Add Text in jetpack compose: style, color and weight
In this tutorial, you will learn how to add a text view component in jetpack compose, You will also see how to style the text, by setting the color, the font weight (bold, semibold..) and the text size in sp value. You will also see how to cut the text to a maximum numbers of line and set the text ellipsis, the tree dots at the end of a truncated text.
Text("your text")
Set Text color, font weight and size
Text("hello", color = Color.Red, fontSize = 20.sp, fontWeight = FontWeight.SemiBold)
Cut the multine line text and add the ellipsis
Box(
contentAlignment = Alignment.Center,
modifier = Modifier.fillMaxSize()
) {
Text(
text = "hello\nsecond line\nhidden line",
modifier = Modifier.fillMaxWidth(),
color = Color.Red,
fontSize = 20.sp,
fontWeight = FontWeight.SemiBold,
textAlign = TextAlign.Center,
lineHeight = 30.sp,
maxLines = 2,
overflow = TextOverflow.Ellipsis,
)
}
Used modifiers for the text view:
text: is used to be explicit about the text to draw
modifier - fillMaxWidth : is used to fill all the available width
color: is used to set the text color
fontSize: set the text size in sp unit
fontWeight: set the text weight, semibold in this case
textAlign: set the alignment of the text, start, end or center
lineHeight: set the space between the different text lines
maxLines: set the maximum number of allowed lines
overflow: set the behaviour when the text is truncated. In this case, the three dots at the end of the truncated text are displayed