Jetpack Compose – Text Compose

Jetpack Compose, Google's advanced UI toolkit for Android, transforms the way user interfaces are built through a declarative Kotlin API. A key component of this toolkit is the Text composable, an essential element for presenting text. This article delves into the diverse capabilities of the Text composable, ranging from basic text rendering to more sophisticated styled and interactive text features.

Jetpack Compose, Google’s advanced UI toolkit for Android, transforms the way user interfaces are built through a declarative Kotlin API. A key component of this toolkit is the Text composable, an essential element for presenting text. This article delves into the diverse capabilities of the Text composable, ranging from basic text rendering to more sophisticated styled and interactive text features.

Basic Text Display

@Composable
fun BasicText() {
    Text(text = "Hello, World!")
}

This function displays a greeting message, which is straightforward and serves as a starting point for introducing text in UIs.

Styling Text

Jetpack Compose allows extensive customization of text appearance through various styling options:

@Composable
fun ColoredText() {
    Text(
        text = "Colored Text",
        color = Color.Blue,
        fontSize = 20.sp,
        fontFamily = FontFamily.Serif,
        fontStyle = FontStyle.Italic
    )
}

Important Attributes of Text

Attributes	Description
text	to set the text which we have to display inside our Text.
style	to change the style of Text in Android.
color	to change the color of Text.
fontSize	to change the font size of our text.
fontWeight	to set the weight for our font ie. to extra bold, dark, and many more
fontStyle	to set font style to italic.
fontFamily	to change the font family of our text.
letterSpacing	to set spacing in between letters of our Text.
background	to set the background color for our Text.
shadow	to add a shadow for our Text.
textAlign	to change the alignment of our Text.
modifier	the modifier is used to add padding to our Text.
textDecoration	the decoration to be applied to the text
lineHeight	the height of each line of text.
overflow	how to handle overflowed text
softWrap	whether to wrap the text if it exceeds the width of its container.
maxLines	the maximum number of lines for the text
minLines	the minimum number of lines for the text.
onTextLayout	callback that is invoked when the text is laid out.