Styling Text in Jetpack Compose

Part of the series "Android Development Series by Mircea Ioan Soit"

Text is one of the most fundamental UI elements in any Android application. Jetpack Compose provides a powerful and flexible way to style text using the Text composable and TextStyle.

In this article, we will explore how to customize font size, color, weight, line height, letter spacing, shadows, and more to create beautifully styled text in Jetpack Compose.

Basic Text Styling in Jetpack Compose

The simplest way to display text in Jetpack Compose is by using the Text composable.

Text("Hello, Jetpack Compose!")        

To customize the appearance, use the style parameter with TextStyle.

Text(
    text = "Styled Text",
    style = TextStyle(
        fontSize = 20.sp,
        fontWeight = FontWeight.Bold,
        color = Color.Blue
    )
)        

Typography in Jetpack Compose

Jetpack Compose follows the Material Design typography system, which defines font styles for different UI elements.

1. Using MaterialTheme.typography

The MaterialTheme.typography provides predefined text styles.

Text(
    text = "Headline",
    style = MaterialTheme.typography.titleLarge
)        

To define a custom typography set, override Typography in your theme.

val CustomTypography = Typography(
    titleLarge = TextStyle(
        fontSize = 24.sp,
        fontWeight = FontWeight.Bold
    ),
    bodyMedium = TextStyle(
        fontSize = 16.sp
    )
)        

Apply the typography inside MaterialTheme.

MaterialTheme(typography = CustomTypography) {
    Text("Custom Typography", style = MaterialTheme.typography.titleLarge)
}        

Customizing Text Appearance

1. Font Size and Weight

Adjust font size using fontSize and font weight using fontWeight.

Text(
    text = "Large Bold Text",
    style = TextStyle(
        fontSize = 28.sp,
        fontWeight = FontWeight.Bold
    )
)        

Font weights range from FontWeight.Thin to FontWeight.Black.

2. Font Family and Custom Fonts

Jetpack Compose allows you to use system fonts or import custom fonts.

Using system fonts:

Text(
    text = "Serif Font",
    style = TextStyle(fontFamily = FontFamily.Serif)
)        

Using a custom font:

First, add the font file to res/font and define it in FontFamily.

val CustomFont = FontFamily(
    Font(R.font.my_custom_font, FontWeight.Normal),
    Font(R.font.my_custom_font_bold, FontWeight.Bold)
)

Text(
    text = "Custom Font",
    style = TextStyle(fontFamily = CustomFont, fontSize = 20.sp)
)        

3. Text Color

Customize text color using the color parameter.

Text(
    text = "Red Text",
    color = Color.Red
)        

To use theme-based colors:

Text(
    text = "Theme-Based Color",
    color = MaterialTheme.colorScheme.primary
)        

4. Letter Spacing and Line Height

Modify letter spacing and line height to improve readability.

Text(
    text = "Spaced Out Text",
    style = TextStyle(letterSpacing = 2.sp)
)

Text(
    text = "This is a multi-line text example.\nIt has increased line height.",
    style = TextStyle(lineHeight = 28.sp)
)        

5. Text Alignment

Align text using textAlign.

Text(
    text = "Centered Text",
    textAlign = TextAlign.Center,
    modifier = Modifier.fillMaxWidth()
)        

Available options: TextAlign.Start, TextAlign.Center, TextAlign.End, and TextAlign.Justify.

Text(
    text = "Justified text is great for paragraphs.",
    textAlign = TextAlign.Justify
)        

6. Text Shadows

Add a shadow effect using shadow.

Text(
    text = "Shadowed Text",
    style = TextStyle(
        shadow = Shadow(
            color = Color.Gray,
            offset = Offset(4f, 4f),
            blurRadius = 8f
        )
    )
)        

7. Background and Decorations

Apply background colors, underline, and strikethrough effects.

Text(
    text = "Highlighted Text",
    style = TextStyle(background = Color.Yellow)
)

Text(
    text = "Underlined Text",
    style = TextStyle(textDecoration = TextDecoration.Underline)
)

Text(
    text = "Strikethrough Text",
    style = TextStyle(textDecoration = TextDecoration.LineThrough)
)        

Handling Multiple Styles in One Text

To style parts of a text differently, use AnnotatedString.

Text(
    text = buildAnnotatedString {
        withStyle(style = SpanStyle(color = Color.Blue, fontWeight = FontWeight.Bold)) {
            append("Bold Blue ")
        }
        withStyle(style = SpanStyle(color = Color.Red)) {
            append("Red Text")
        }
    }
)        

Clickable and Selectable Text

1. Making Text Clickable

Use Modifier.clickable to handle text clicks.

Text(
    text = "Click Me",
    modifier = Modifier.clickable { println("Text Clicked!") }
)        

2. Selectable Text

To allow text selection, use SelectionContainer.

SelectionContainer {
    Text("This text can be selected.")
}        

Best Practices for Styling Text in Jetpack Compose

• Use MaterialTheme.typography for consistency.
• Define custom fonts and typography at the theme level.
• Use theme-based colors instead of hardcoded colors.
• Optimize letter spacing and line height for readability.
• Utilize AnnotatedString for rich text styling.
• Ensure text is accessible with proper contrast and readable font sizes.

Conclusion

Jetpack Compose provides a flexible and powerful way to style text with customization options for font, color, spacing, shadows, and decorations. By leveraging Material Theme typography and custom styles, you can ensure your app delivers a visually consistent and readable experience.

Key Takeaways:

• Use TextStyle to customize font size, weight, and family.
• Utilize MaterialTheme.typography for predefined styles.
• Customize text with letter spacing, line height, shadows, and decorations.
• Use AnnotatedString for multi-style text.
• Add clickable and selectable behaviors to text.