Styling Text With Compose library Parameters
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,
)
}
@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,
textDecoration = TextDecoration.Underline,
modifier = androidx.compose.ui.Modifier.padding(24.dp)
)
}
modifier = androidx.compose.ui.Modifier.padding(you can also set Material theme typography text style which are available from material library like below :
start = 24.dp,
end = 25.dp,
top = 30.dp,
bottom = 35.dp
)
Text(
text = "Hello $name!",
style = MaterialTheme.typography.h2,
maxLines = 2,
textDecoration = TextDecoration.Underline,
modifier = androidx.compose.ui.Modifier.padding(
start = 24.dp,
end = 25.dp,
top = 30.dp,
bottom = 35.dp
)
)
there are other multiple options you can set from lie h1,h2,h3, overline and many others
How to set ellipsis with compose you can use overflow property and maxline property combination like below :
Text(
text = "Hellojdlaldjalsjdjasklkahdkjhakdkhakdhkahdkhakhsdkhaskhdkhakdjlajsdlk $name!",
style = MaterialTheme.typography.button,
overflow = TextOverflow.Ellipsis,
maxLines = 2,
textDecoration = TextDecoration.Underline,
modifier = androidx.compose.ui.Modifier.padding(
start = 24.dp,
end = 25.dp,
top = 30.dp,
bottom = 35.dp
)
)
Comments
Post a Comment