Text in Jetpack Compose Glimmer

Applicable XR devices

This guidance helps you build experiences for these types of XR devices.

Learn about XR device types →

Learn about XR device types →

In Jetpack Compose Glimmer, the Text component builds upon the basic text and lets you set various text properties like color, font size, font style, font weight, font family, letter spacing, and text alignment. The Jetpack Compose Glimmer Text component is unique in that it intelligently manages color matching. For example, if no color override is specified, the text defaults to the content color provided by the nearest surface in the UI hierarchy.

Example: Create a text heading in a box

@Composable
fun GlimmerStyleSample() {
    GlimmerTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Text(
                    text = "This is a sample heading",
                    color = GlimmerTheme.colors.secondary
                )
                Spacer(modifier = Modifier.height(16.dp))
                Button(onClick = { /* Handle Click */ }) {
                    Text(text = "Sample Button")
                }
            }
        }
    }
}

Key points about the code

• The Button composable is automatically interactable, has a Colors.surface background, and the text is automatically set to:

  • style = GlimmerTheme.typography.bodyMedium
  • color = GlimmerTheme.Colors.surface