Text

The Text component displays text content with extensive customization options including typography styles, colors, alignment, overflow handling, and font properties. It supports both string literals and string resources.

Usage

Basic Text

Text(text = "Hello World")

Text(
    text = "Welcome to CZAN",
    style = MaterialTheme.typography.headlineMedium
)

Typography Styles

Text(
    text = "Display Large",
    style = MaterialTheme.typography.displayLarge
)

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

Text(
    text = "Body Large",
    style = MaterialTheme.typography.bodyLarge
)

Text(
    text = "Label Small",
    style = MaterialTheme.typography.labelSmall
)

Text Colors

Text(
    text = "Primary Color",
    color = MaterialTheme.colorScheme.primary
)

Text(
    text = "Error Color",
    color = MaterialTheme.colorScheme.error
)

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

Font Weights and Styles

Text(
    text = "Bold Text",
    fontWeight = FontWeight.Bold,
    style = MaterialTheme.typography.bodyLarge
)

Text(
    text = "Light Text",
    fontWeight = FontWeight.Light,
    style = MaterialTheme.typography.bodyLarge
)

Text(
    text = "Italic Text",
    fontStyle = FontStyle.Italic,
    style = MaterialTheme.typography.bodyLarge
)

Text Alignment

Text(
    modifier = Modifier.fillMaxWidth(),
    text = "Center Aligned",
    textAlign = TextAlign.Center,
    style = MaterialTheme.typography.bodyLarge
)

Text(
    modifier = Modifier.fillMaxWidth(),
    text = "Right Aligned",
    textAlign = TextAlign.End,
    style = MaterialTheme.typography.bodyLarge
)

Text Overflow

Text(
    text = "This is a very long text that will be truncated with ellipsis",
    maxLines = 1,
    overflow = TextOverflow.Ellipsis,
    style = MaterialTheme.typography.bodyMedium
)

Text(
    text = "This text is limited to 2 lines maximum and will show ellipsis after that",
    maxLines = 2,
    overflow = TextOverflow.Ellipsis,
    style = MaterialTheme.typography.bodyMedium
)

String Resources

Text(
    text = stringResource(Res.string.welcome_message),
    style = MaterialTheme.typography.headlineSmall
)

Text(
    text = stringResource(Res.string.app_description),
    style = MaterialTheme.typography.bodyMedium,
    color = MaterialTheme.colorScheme.onSurfaceVariant
)

Multi-line Text

Text(
    text = """
        This is a multi-line text example.
        It demonstrates how text wraps across
        multiple lines automatically.
    """.trimIndent(),
    style = MaterialTheme.typography.bodyMedium
)

Styled Text Combinations

Text(
    text = "Important Notice",
    style = MaterialTheme.typography.titleMedium,
    fontWeight = FontWeight.SemiBold,
    color = MaterialTheme.colorScheme.error
)

Text(
    text = "Subtitle with custom styling",
    style = MaterialTheme.typography.bodySmall,
    fontStyle = FontStyle.Italic,
    color = MaterialTheme.colorScheme.onSurfaceVariant
)