Jetpack Compose: Mastering Text Composable Styling

Jetpack Compose offers a powerful and intuitive way to create UIs in Android development. One of the most fundamental elements in any UI is text. In Jetpack Compose, the Text composable is used to display text, and it provides a wide range of styling options to customize its appearance. This article explores various aspects of styling the Text composable in Jetpack Compose, covering font attributes, colors, shadows, and more.

What is the Text Composable?

The Text composable is a basic UI element used to display text in Jetpack Compose. It is highly customizable and supports various styling options to meet diverse UI requirements.

Basic Usage of the Text Composable

To start, let’s look at the basic usage of the Text composable:

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun SimpleText() {
    Text("Hello, Jetpack Compose!")
}

Styling the Text Composable

Now, let’s delve into the various styling options available for the Text composable.

1. Font Attributes

You can customize the font family, size, weight, and style using the TextStyle parameter.

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

@Composable
fun StyledText() {
    Text(
        text = "Styled Text Example",
        style = TextStyle(
            fontFamily = FontFamily.Serif,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            fontStyle = FontStyle.Italic
        )
    )
}
  • fontFamily: Sets the font family (e.g., FontFamily.Serif, FontFamily.SansSerif).
  • fontSize: Sets the font size in scalable pixels (sp).
  • fontWeight: Sets the font weight (e.g., FontWeight.Bold, FontWeight.Normal).
  • fontStyle: Sets the font style (e.g., FontStyle.Italic, FontStyle.Normal).

2. Color Customization

The color of the text can be changed using the color parameter.

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

@Composable
fun ColoredText() {
    Text(
        text = "Colored Text",
        color = Color.Blue
    )
}

You can use predefined colors like Color.Blue, Color.Red, or define custom colors using RGB values.

3. Background Color

You can set the background color using the background modifier.

import androidx.compose.foundation.background
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

@Composable
fun BackgroundText() {
    Text(
        text = "Text with Background",
        modifier = Modifier.background(Color.Yellow)
    )
}

4. Text Alignment

The alignment of the text can be set using the textAlign parameter.

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.fillMaxWidth

@Composable
fun AlignedText() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        Text(
            text = "Left Aligned",
            textAlign = TextAlign.Left,
            modifier = Modifier.fillMaxWidth()
        )
        Text(
            text = "Center Aligned",
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth()
        )
        Text(
            text = "Right Aligned",
            textAlign = TextAlign.Right,
            modifier = Modifier.fillMaxWidth()
        )
    }
}

@Preview(showBackground = true)
@Composable
fun AlignedTextPreview() {
    AlignedText()
}
  • TextAlign.Left: Aligns the text to the left.
  • TextAlign.Center: Centers the text.
  • TextAlign.Right: Aligns the text to the right.
  • TextAlign.Justify: Justifies the text.

5. Line Height and Letter Spacing

You can adjust the line height and letter spacing using lineHeight and letterSpacing properties in TextStyle.

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp
import androidx.compose.ui.unit.em

@Composable
fun SpacedText() {
    Text(
        text = "Text with Line Height and Letter Spacing",
        style = TextStyle(
            lineHeight = 2.em,
            letterSpacing = 0.1.em
        )
    )
}
  • lineHeight: Sets the height of each line of text.
  • letterSpacing: Sets the spacing between letters.

6. Text Overflow

When text exceeds the available space, you can control how it overflows using the overflow parameter.

import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp

@Composable
fun OverflowText() {
    Text(
        text = "This is a very long text that will overflow if it doesn't fit in the given width.",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        modifier = Modifier.width(200.dp)
    )
}
  • TextOverflow.Clip: Clips the text at the boundary.
  • TextOverflow.Ellipsis: Adds an ellipsis (…) to the end of the text.
  • maxLines: Sets the maximum number of lines for the text.

7. Text Shadow

You can add a shadow to the text using the shadow parameter in TextStyle.

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shadow
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun ShadowedText() {
    Text(
        text = "Text with Shadow",
        style = TextStyle(
            fontSize = 24.sp,
            shadow = Shadow(
                color = Color.Gray,
                blurRadius = 3f,
                offset = androidx.compose.ui.geometry.Offset(2f, 2f)
            )
        )
    )
}

The Shadow class allows you to specify the color, blur radius, and offset of the shadow.

8. Styling with Span

You can style specific parts of the text using AnnotatedString and SpanStyle. This is useful for highlighting certain words or phrases within a longer text.

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

@Composable
fun SpannedText() {
    val annotatedText = buildAnnotatedString {
        append("Normal text ")
        withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Blue, fontSize = 18.sp)) {
            append("Bold and Blue Text")
        }
    }
    Text(annotatedText)
}

This allows you to create rich text with different styles applied to different parts of the string.

Conclusion

The Text composable in Jetpack Compose offers a comprehensive set of styling options, allowing developers to create visually appealing and highly customized text elements in their applications. From basic font attributes and colors to advanced features like shadows and spanned text, the flexibility of the Text composable makes it a powerful tool in Android UI development.

Tagged with , , , , , , , , ,