Posts

Showing posts with the label compose

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 , ...

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...