Lists 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, lists are vertically scrollable UI components that efficiently render only visible items, designed to provide specific behaviors and input compatibility for AI glasses apps. Jetpack Compose Glimmer accomplishes this using the VerticalList and ListItem components.

The VerticalList is Jetpack Compose Glimmer's component for displaying scrollable vertical content. It offers the same API functionality as LazyColumn but with behaviors specifically optimized for Jetpack Compose Glimmer and AI glasses with a display.

Jetpack Compose Glimmer lists have a few unique constraints:

• Lists should only show three items or less within a view.
• When a list contains more items than can fit within a view, a black scrim is used near the list's bounds.

Example: Display a vertical list with three items

The following code shows how to use a VerticalList and ListItem components to create a list of three items:

@Composable
fun GlimmerListWithButtons() {
    VerticalList(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(count = 3) { index ->
            ListItem(
                onClick = { /* Handle Click */ },
                leadingIcon = if (index == 1) {
                    { Icon(Icons.Rounded.Favorite, "Favorite Icon") }
                } else null
            ) {
                Text("List Item + $index")
            }
        }
    }
}

Key points about the code

• The list displays three items that are generated dynamically, with each being a ListItem.
• Each ListItem can be customized, and an icon can be added to it.