Lists with Compose for Wear OS

bookmark_border Stay organized with collections Save and categorize content based on your preferences.

Lists let users select an item from a set of choices on Wear OS devices.

Many Wear OS devices use round screens, which makes it more difficult to see list items that appear near the top and bottom of the screen. For this reason, Compose for Wear OS includes a version of the LazyColumn class called ScalingLazyColumn, which supports scaling and fading effects. When items move toward the center of the screen, they get larger and more opaque.

The following animation shows how an element's size and transparency changes as it moves along the screen:

The following code snippet shows how to create a list using the Horologist's version of the ScalingLazyColumn layout to create content that looks great on a variety of Wear OS screen sizes, for example in the example below, it will add the necessary padding to the first and last elements of the list which are set in the scrollState of the ScalingLazyColumn:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

Add a snap-and-fling effect

You can add a snap-and-fling behavior to finger gestures that the user applies to ScalingLazyColumn objects. This effect helps users more precisely navigate through the items in a list while also helping them move more quickly through a long list.

To add this effect to the Horologist's version of the ScalingLazyColumn, set the rotaryMode parameter of columnState to RotaryWithSnap, as shown in the following code snippet:

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt