Posts

Showing posts with the label material design

Styling android button

If you want to style android button with custom style with background, custom font different enable disable state button colors you can do that using providing custom style to your button below is the example: inside res/value folder 1st. style for the button  <style name =“CustomButtonStyle” parent ="Widget.AppCompat.Button" >     <item name ="android:background" > @drawable/button_background.xml </item>     <item name ="android:textSize" > 16sp </item>     <item name ="android:textColor" > @color/black </item>     <item name ="android:fontFamily" > @font/font_name </item>     <item name ="fontFamily" > @font/font_name </item>     <item name ="textAllCaps" > false </item> </style> 2nd. in background we are supplying selector so we can have different enable / disable state background and text colors button_background.xml <? xml ver

Showing Alert Dialog with compose example android

Image
 With new compose library you can show alert dialog using the android compose below is the example : @Composable fun showDialog (message: String , onDismiss: () -> Unit) { AlertDialog ( text = { Text (message) } , onDismissRequest = onDismiss , buttons = { Column { Divider ( androidx.compose.ui.Modifier. padding ( horizontal = 12 . dp ) , color = MaterialTheme. colors . onSurface .copy( alpha = 0.2f ) ) Column { TextButton ( onClick = onDismiss , shape = RectangleShape , contentPadding = PaddingValues( 16 . dp ) , modifier = androidx.compose.ui.Modifier. fillMaxWidth () , ) { Text ( "Yes" ) } TextButton ( onClick = onDismiss ,

styling android TabLayout material design

Image
If you want to style android Widget.MaterialComponents. TabLayout you can customize style with different properties changing tab text color can be done with property <item name="tabTextColor">@color/red</item> changing tab selected text color with property <item name="tabSelectedTextColor">@color/black</item> updating height of the underline below tab can be done using <item name="tabIndicatorHeight">2dp</item> changing the underline color in the bottom of the text of the tab can be done using property <item name="tabIndicatorColor">@color/red</item> If you want multiple tabs and you want them to be scrollable can be done using <item name="tabMode">scrollable</item>    you can set tabMode fixed where it can displays all tabs with divided equally If you have Icon with text for your tab you can set app:tabInlineLabel property setting false label will be below icon , true will sh

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&g

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

Styling TextInput Layout with material design library

Image
Google release material design library which provides with material design styles for different components which can be customized. To get started you need to include material design library into your gradle file provided on this link : https://material.io/develop/android/docs/getting-started TextInputLayout provides different material styles Widget.MaterialComponents.TextInputLayout.FilledBox Widget.MaterialComponents.TextInputLayout.OutlinedBox for using above material themes you are required to use parent theme as parent="Theme.MaterialComponents.Bridge" this can become issue if you are using some old parent theme for your application changing the parent theme may change some UI are looking before changing to Theme.MaterialComponents.Bridge in place of changing the parent theme for your application you can assign new material components theme at your activity level your layout xml file root layout android:theme = "material theme" to keep your current dialogs and