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,
)
}







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.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(
start = 24.dp,
end = 25.dp,
top = 30.dp,
bottom = 35.dp
)
you can also set Material theme typography text style which are available from material library like below :

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

Popular posts from this blog

Using TabLayout and ViewPager with CollapsingToolbarLayout

Using android BadgeDrawable to show the Badge android

styling android TabLayout material design