Posts

Showing posts with the label MaterialComponents

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