Posts

Showing posts from October, 2020

Setting app level theme for TextInputLayout

Image
If you have same design across app for TextInputLayout you can set app level style for TextInputLayout inside TextInputLayout you can set different properties to theme for TextInputLayout below is the example from material design theme. you can change parent for TextInputLayout from FilledBox to OutlinedBox and other styles can use different properties to customize the design. there is list of properties you can explore on material design website. If you have to different style for some places for TextInputLayout you can always set custom style at layout level xml which will override the app level theme. <resources> <!-- Base application theme. --> <style name ="AppTheme" parent ="Theme.MaterialComponents.Bridge" > <!-- Customize your theme here. --> <item name ="colorPrimary" > @color/colorPrimary </item> <item name ="colorPrimaryDark" > @color/colorPrimaryDark </item...

Edit Input text with compose library

Image
we have TextInputEditText and EditText for text input in android with compose we have new class that we need to use you can style them with different properties val state = remember { mutableStateOf (TextFieldValue( "Text" )) } Column ( modifier = androidx.compose.ui.Modifier. padding ( 16 . dp )) { TextField ( modifier = androidx.compose.ui.Modifier. fillMaxWidth () , value = state. value , onValueChange = { state. value = it } , errorColor = Color. Red , isErrorValue = false, textStyle = TextStyle( color = Color. Blue , fontSize = TextUnit.Companion.Sp( 26 ) , fontFamily = FontFamily. Monospace ) , inactiveColor = Color. Transparent , activeColor = Color. Transparent , ) } fillMaxWidth to fit to screen size inside column  inactive color and active color above are transparent to hide default bottom border setting active and inactive color wi...

Styling Text With Compose library Parameters

Image
Styling using compose library for new declarative UI. you have to use different properties to style the text some of the property like text color, font style, weight ,  background color, text alignment you can set as below @Composable fun Greeting (name: String) { Text ( text = "Hello $ name !" , style = TextStyle( color = Color. Blue , fontSize = TextUnit.Companion.Sp( 56 ) , background = Color. Yellow , fontFamily = FontFamily. Monospace , fontStyle = FontStyle. Italic , textAlign = TextAlign. Right ) , maxLines = 2 , ) } setting padding you can use modifier property as below if you want to set different padding for start , end , top and end you can set seprate property @Composable fun Greeting (name: String) { Text ( text = "Hello $ name !" , style = TextStyle( color = Color. Blue , fontSize = TextUnit.Compani...

Clear Icon not visible in TextInputLayout issue with custom TextWatcher

If you are using custom TextWatcher with with your TextInputEditText then you may notice <item name="endIconMode">clear_text</item> set to TextInputLayout is not visible after some finding working on that found out its issue with material design library version 1.1.0 if you upgrade to latest material design library 1.2.1 stable version this issue doesn't happen. another noticeable issue was when you set error the red line and text below also overlap in 1.1.0 library version which seems to be working fine now in 1.2.1 version. one thing which is still issue is if you have something like this custom text-watcher  textInputEditText.addTextChangedListener(UsPhoneNumberFormatter(textInputEditText ))) error text jumps up and down bit while user is typing in the field. https://github.com/material-components/material-components-android/releases