androidx.wear.compose.material

@Composable
fun AppCard(
    onClick: () -> Unit,
    appName: @Composable RowScope.() -> Unit,
    time: @Composable RowScope.() -> Unit,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    appImage: (@Composable RowScope.() -> Unit)? = null,
    backgroundPainter: Painter = CardDefaults.cardBackgroundPainter(),
    contentColor: Color = MaterialTheme.colors.onSurfaceVariant,
    appColor: Color = contentColor,
    timeColor: Color = contentColor,
    titleColor: Color = MaterialTheme.colors.onSurface,
    content: @Composable ColumnScope.() -> Unit
): Unit

Opinionated Wear Material Card that offers a specific 5 slot layout to show information about an application, e.g. a notification. AppCards are designed to show interactive elements from multiple applications. They will typically be used by the system UI, e.g. for showing a list of notifications from different applications. However it could also be adapted by individual application developers to show information about different parts of their application.

The first row of the layout has three slots, 1) a small optional application Image or Icon of size CardDefaults.AppImageSizexCardDefaults.AppImageSize dp, 2) an application name (emphasised with the CardColors.appColor() color), it is expected to be a short start aligned Text composable, and 3) the time that the application activity has occurred which will be shown on the top row of the card, this is expected to be an end aligned Text composable showing a time relevant to the contents of the Card.

The second row shows a title, this is expected to be a single row of start aligned Text.

The rest of the Card contains the content which can be either Text or an Image. If the content is text it can be single or multiple line and is expected to be Top and Start aligned.

If more than one composable is provided in the content slot it is the responsibility of the caller to determine how to layout the contents, e.g. provide either a row or a column.

Example of an AppCard with icon, title, time and two lines of body text:

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material.AppCard
import androidx.wear.compose.material.CardDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.Text

AppCard(
    onClick = {},
    appName = { Text("AppName") },
    appImage = {
        Icon(
            painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
            contentDescription = "airplane",
            modifier =
                Modifier.size(CardDefaults.AppImageSize)
                    .wrapContentSize(align = Alignment.Center),
        )
    },
    title = { Text("AppCard") },
    time = { Text("now") },
) {
    Text("Some body content")
    Text("and some more body content")
}

Example of an AppCard with image content:

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.AppCard
import androidx.wear.compose.material.CardDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.Text

AppCard(
    onClick = {},
    appName = { Text("App name") },
    appImage = {
        Icon(
            painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
            contentDescription = "airplane",
            modifier =
                Modifier.size(CardDefaults.AppImageSize)
                    .wrapContentSize(align = Alignment.Center),
        )
    },
    title = {
        Text(
            text = "Title with maximum two lines",
            maxLines = 2,
        )
    },
    time = { Text("now") },
) {
    Spacer(Modifier.height(6.dp))
    Image(
        modifier =
            Modifier.padding(end = 28.dp).aspectRatio(16f / 9f).clip(RoundedCornerShape(16.dp)),
        painter = painterResource(R.drawable.card_background),
        contentScale = ContentScale.Crop,
        contentDescription = null
    )
}

For more information, see the Cards guide.

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.primaryButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = CircleShape,
    border: ButtonBorder = ButtonDefaults.buttonBorder(),
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material Button that offers a single slot to take any content (text, icon or image).

The recommended Button sizes can be obtained from ButtonDefaults - see ButtonDefaults.DefaultButtonSize, ButtonDefaults.LargeButtonSize, ButtonDefaults.SmallButtonSize. Icon content should be of size ButtonDefaults.DefaultIconSize, ButtonDefaults.LargeIconSize or ButtonDefaults.SmallIconSize respectively.

The recommended set of ButtonColors styles can be obtained from ButtonDefaults, e.g. ButtonDefaults.primaryButtonColors to get a color scheme for a primary Button which by default will have a solid background of Colors.primary and content color of Colors.onPrimary.

Buttons can be enabled or disabled. A disabled button will not respond to click events.

Example of a Button displaying an icon:

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material.Button
import androidx.wear.compose.material.ButtonDefaults
import androidx.wear.compose.material.Icon

Button(
    onClick = { /* Do something */ },
    enabled = true,
) {
    Icon(
        painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
        contentDescription = "airplane",
        modifier =
            Modifier.size(ButtonDefaults.DefaultIconSize)
                .wrapContentSize(align = Alignment.Center),
    )
}

Example of a large Button displaying an icon:

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material.Button
import androidx.wear.compose.material.ButtonDefaults
import androidx.wear.compose.material.Icon

Button(
    onClick = { /* Do something */ },
    enabled = true,
    modifier = Modifier.size(ButtonDefaults.LargeButtonSize)
) {
    Icon(
        painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
        contentDescription = "airplane",
        modifier =
            Modifier.size(ButtonDefaults.LargeIconSize)
                .wrapContentSize(align = Alignment.Center),
    )
}

Example of a Button with text content and size modified to LargeButtonSize:

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.wear.compose.material.Button
import androidx.wear.compose.material.ButtonDefaults
import androidx.wear.compose.material.Text

Button(
    onClick = { /* Do something */ },
    enabled = true,
    modifier = Modifier.size(ButtonDefaults.LargeButtonSize)
) {
    Text("Big")
}

For more information, see the Buttons guide.

@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    backgroundPainter: Painter = CardDefaults.cardBackgroundPainter(),
    contentColor: Color = MaterialTheme.colors.onSurfaceVariant,
    enabled: Boolean = true,
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
    interactionSource: MutableInteractionSource? = null,
    role: Role? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Base level Wear Material Card that offers a single slot to take any content.

Is used as the container for more opinionated Card components that take specific content such as icons, images, titles, subtitles and labels.

The Card is Rectangle shaped rounded corners by default.

Cards can be enabled or disabled. A disabled card will not respond to click events.

For more information, see the Cards Wear OS Material design guide.

Note that the Wear OS design guidance recommends a gradient or image background for Cards which is not the case for Mobile Cards. As a result you will see a backgroundPainter rather than a backgroundColor for Cards. If you want to workaround this recommendation you could use a ColorPainter to produce a solid colored background.

@Composable
fun Checkbox(
    checked: Boolean,
    modifier: Modifier = Modifier,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    enabled: Boolean = true,
    onCheckedChange: ((Boolean) -> Unit)? = null,
    interactionSource: MutableInteractionSource? = null
): Unit

Checkbox provides an animated checkbox for use as a toggle control in ToggleChip or SplitToggleChip.

Example of a SplitToggleChip with Checkbox toggle control:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material.Checkbox
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.SplitToggleChip
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.ToggleChip

var checked by remember { mutableStateOf(true) }
// The primary label should have a maximum 3 lines of text
// and the secondary label should have max 2 lines of text.
SplitToggleChip(
    label = { Text("Split with CheckboxIcon", maxLines = 3, overflow = TextOverflow.Ellipsis) },
    checked = checked,
    toggleControl = {
        Checkbox(
            checked = checked,
            enabled = true,
        )
    },
    onCheckedChange = { checked = it },
    onClick = {
        /* Do something */
    },
    enabled = true,
)

@Composable
fun Chip(
    onClick: () -> Unit,
    colors: ChipColors,
    border: ChipBorder,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    contentPadding: PaddingValues = ChipDefaults.ContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
    interactionSource: MutableInteractionSource? = null,
    role: Role? = Role.Button,
    content: @Composable RowScope.() -> Unit
): Unit

Base level Wear Material Chip that offers a single slot to take any content.

Is used as the container for more opinionated Chip components that take specific content such as icons and labels.

The Chip is Stadium shaped and has a max height designed to take no more than two lines of text of Typography.button style. The Chip can have an icon or image horizontally parallel to the two lines of text. With localisation and/or large font sizes, the Chip height adjusts to accommodate the contents.

The Chip can have different styles with configurable content colors, background colors including gradients, these are provided by ChipColors implementations.

The recommended set of ChipColors styles can be obtained from ChipDefaults, e.g. ChipDefaults.primaryChipColors to get a color scheme for a primary Chip which by default will have a solid background of Colors.primary and content color of Colors.onPrimary.

Chips can be enabled or disabled. A disabled chip will not respond to click events.

For more information, see the Chips guide.

@Composable
fun Chip(
    label: @Composable RowScope.() -> Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    colors: ChipColors = ChipDefaults.primaryChipColors(),
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    contentPadding: PaddingValues = ChipDefaults.ContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
    border: ChipBorder = ChipDefaults.chipBorder()
): Unit

Wear Material Chip that offers three slots and a specific layout for an icon, label and secondaryLabel. The icon and secondaryLabel are optional. The items are laid out with the icon, if provided, at the start of a row, with a column next containing the two label slots.

The Chip is Stadium shaped and has a max height designed to take no more than two lines of text of Typography.button style. If no secondary label is provided then the label can be two lines of text. The label and secondary label should be consistently aligned. With localisation and/or large font sizes, the Chip height adjusts to accommodate the contents.

If a icon is provided then the labels should be "start" aligned, e.g. left aligned in ltr so that the text starts next to the icon.

The Chip can have different styles with configurable content colors, background colors including gradients, these are provided by ChipColors implementations.

The recommended set of ChipColors styles can be obtained from ChipDefaults, e.g. ChipDefaults.primaryChipColors to get a color scheme for a primary Chip which by default will have a solid background of Colors.primary and content color of Colors.onPrimary.

Chips can be enabled or disabled. A disabled chip will not respond to click events.

Example of a Chip with icon and a label only with longer text:

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.Text

Chip(
    onClick = { /* Do something */ },
    enabled = true,
    // Primary label can have up to 3 lines of text
    label = {
        Text(
            text = "Main label can span up to 3 lines",
            maxLines = 3,
            overflow = TextOverflow.Ellipsis
        )
    },
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
            contentDescription = "airplane",
            modifier =
                Modifier.size(ChipDefaults.IconSize).wrapContentSize(align = Alignment.Center),
        )
    }
)

Example of a Chip with icon, label and secondary label:

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.Text

Chip(
    onClick = { /* Do something */ },
    enabled = true,
    // Primary label has maximum 3 lines, Secondary label has maximum 2 lines.
    label = { Text(text = "Main label", maxLines = 3, overflow = TextOverflow.Ellipsis) },
    secondaryLabel = {
        Text(text = "secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
    },
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
            contentDescription = "airplane",
            modifier =
                Modifier.size(ChipDefaults.IconSize).wrapContentSize(align = Alignment.Center),
        )
    }
)

For more information, see the Chips guide.

@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    startAngle: Float = 270.0f,
    indicatorColor: Color = MaterialTheme.colors.onBackground,
    trackColor: Color = MaterialTheme.colors.onBackground.copy(alpha = 0.3f),
    strokeWidth: Dp = IndeterminateStrokeWidth
): Unit

Indeterminate Material Design circular progress indicator.

Indeterminate progress indicator expresses an unspecified wait time and spins indefinitely.

Progress Indicator doc

Example of indeterminate progress indicator:

import androidx.wear.compose.material.CircularProgressIndicator

CircularProgressIndicator()

@Composable
fun CircularProgressIndicator(
    progress: @FloatRange(from = 0.0, to = 1.0) Float,
    modifier: Modifier = Modifier,
    startAngle: Float = 270.0f,
    endAngle: Float = startAngle,
    indicatorColor: Color = MaterialTheme.colors.primary,
    trackColor: Color = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
): Unit

Determinate Material Design circular progress indicator.

Progress indicators express the proportion of completion of an ongoing task.

Progress Indicator doc

There is no animation between progress values by default, but progress can be animated with the recommended ProgressIndicatorDefaults.ProgressAnimationSpec, as in the following example:

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.CircularProgressIndicator
import androidx.wear.compose.material.CompactChip
import androidx.wear.compose.material.ProgressIndicatorDefaults
import androidx.wear.compose.material.Text

var progress by remember { mutableStateOf(0.1f) }
val animatedProgress by
    animateFloatAsState(
        targetValue = progress,
        animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
    )

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    CircularProgressIndicator(
        progress = animatedProgress,
    )
    Spacer(Modifier.requiredHeight(10.dp))
    CompactChip(
        modifier = Modifier.width(90.dp),
        onClick = { if (progress < 1f) progress += 0.1f },
        label = { Text("Increase") }
    )
}

CircularProgressIndicator supports a gap in the circular track between endAngle and startAngle, which leaves room for other content, such as TimeText at the top of the screen. This sample also shows how to disable accessibility semantics for the fullscreen CircularProgressIndicator:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.CircularProgressIndicator
import androidx.wear.compose.material.ProgressIndicatorDefaults

CircularProgressIndicator(
    modifier = Modifier.fillMaxSize().padding(all = 1.dp).clearAndSetSemantics {},
    startAngle = 295.5f,
    endAngle = 245.5f,
    progress = 0.3f,
    strokeWidth = ProgressIndicatorDefaults.FullScreenStrokeWidth
)

@Composable
fun CompactButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.primaryButtonColors(),
    backgroundPadding: Dp = ButtonDefaults.CompactButtonBackgroundPadding,
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = CircleShape,
    border: ButtonBorder = ButtonDefaults.buttonBorder(),
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material CompactButton that offers a single slot to take any content (text, icon or image).

The CompactButton has background size ButtonDefaults.ExtraSmallButtonSize. There is an optional transparent padding around the background, defaulted to ButtonDefaults.CompactButtonBackgroundPadding, which increases the clickable area. Icon content should have size ButtonDefaults.SmallIconSize.

The recommended set of ButtonColors styles can be obtained from ButtonDefaults, e.g. ButtonDefaults.primaryButtonColors to get a color scheme for a primary Button which by default will have a solid background of Colors.primary and content color of Colors.onPrimary.

CompactButtons can be enabled or disabled. A disabled button will not respond to click events.

Example usage:

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material.Button
import androidx.wear.compose.material.ButtonDefaults
import androidx.wear.compose.material.CompactButton
import androidx.wear.compose.material.Icon

CompactButton(
    onClick = { /* Do something */ },
    enabled = true,
) {
    Icon(
        painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
        contentDescription = "airplane",
        modifier =
            Modifier.size(ButtonDefaults.SmallIconSize)
                .wrapContentSize(align = Alignment.Center),
    )
}

For more information, see the Buttons guide.

@Composable
fun CompactChip(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    label: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    colors: ChipColors = ChipDefaults.primaryChipColors(),
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    contentPadding: PaddingValues = ChipDefaults.CompactChipContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
    border: ChipBorder = ChipDefaults.chipBorder()
): Unit

A compact Wear Material Chip that offers two slots and a specific layout for an icon and label. Both the icon and label are optional however it is expected that at least one will be provided.

The CompactChip is Stadium shaped and has a max height designed to take no more than one line of text of Typography.caption1 style and/or one icon. The default max height is ChipDefaults.CompactChipHeight. This includes a visible chip height of 32.dp and 8.dp of padding above and below the chip in order to meet accessibility guidelines that request a minimum of 48.dp height and width of tappable area.

If a icon is provided then the labels should be "start" aligned, e.g. left aligned in ltr so that the text starts next to the icon.

The items are laid out as follows.

1. If a label is provided then the chip will be laid out with the optional icon at the start of a row followed by the label with a default max height of ChipDefaults.CompactChipHeight.

2. If only an icon is provided it will be laid out vertically and horizontally centered with a default height of ChipDefaults.CompactChipHeight and the default width of ChipDefaults.IconOnlyCompactChipWidth

If neither icon nor label is provided then the chip will displayed like an icon only chip but with no contents and ChipColors.background() color.

The CompactChip can have different styles with configurable content colors, background colors including gradients, these are provided by ChipColors implementations.

The recommended set of ChipColors styles can be obtained from ChipDefaults, e.g. ChipDefaults.primaryChipColors to get a color scheme for a primary Chip which by default will have a solid background of Colors.primary and content color of Colors.onPrimary.

Chips can be enabled or disabled. A disabled chip will not respond to click events.

Example of a CompactChip with icon and single line of label text:

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.CompactChip
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.Text

CompactChip(
    onClick = { /* Do something */ },
    enabled = true,
    // CompactChip label should be no more than 1 line of text
    label = { Text("Single line label", maxLines = 1, overflow = TextOverflow.Ellipsis) },
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
            contentDescription = "airplane",
            modifier = Modifier.size(ChipDefaults.SmallIconSize),
        )
    },
)

Example of a CompactChip with a label, note that the text is center aligned:

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.CompactChip
import androidx.wear.compose.material.Text

CompactChip(
    onClick = { /* Do something */ },
    enabled = true,
    // CompactChip label should be no more than 1 line of text
    label = {
        Text(
            text = "Single line label",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth()
        )
    },
)

Example of a CompactChip with an icon only, note that the recommended icon size is 24x24 when only an icon is displayed:

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.CompactChip
import androidx.wear.compose.material.Icon

CompactChip(
    onClick = { /* Do something */ },
    enabled = true,
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
            contentDescription = "airplane",
            modifier = Modifier.size(ChipDefaults.IconSize)
        )
    },
)

For more information, see the Chips guide.

@Composable
fun HorizontalPageIndicator(
    pageIndicatorState: PageIndicatorState,
    modifier: Modifier = Modifier,
    indicatorStyle: PageIndicatorStyle = PageIndicatorDefaults.style(),
    selectedColor: Color = MaterialTheme.colors.onBackground,
    unselectedColor: Color = selectedColor.copy(alpha = 0.3f),
    indicatorSize: Dp = 6.dp,
    spacing: Dp = 4.dp,
    indicatorShape: Shape = CircleShape
): Unit

A horizontal indicator for a Pager, representing the currently active page and total pages drawn using a Shape. It shows up to 6 pages on the screen and doesn't represent the exact page index if there are more than 6 pages. Instead of showing the exact position, HorizontalPageIndicator shows a half-size indicator on the left or on the right if there are more pages.

Here's how different positions 0..10 might be visually represented: "X" is selected item, "O" and "o" full and half size items respectively.

O X O O O o - 2nd position out of 10. There are no more items on the left but more on the right o O O O X o - might be 6, 7 or 8 out of 10, as there are more possible items on the left and on the right o O O O X O - is 9 out of 10, as there're no more items on the right

HorizontalPageIndicator may be linear or curved, depending on indicatorStyle. By default it depends on the screen shape of the device - for circular screens it will be curved, whilst for square screens it will be linear.

This component also allows customising the indicatorShape, which defines how the indicator is visually represented.

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.HorizontalPageIndicator
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.InlineSlider
import androidx.wear.compose.material.InlineSliderDefaults
import androidx.wear.compose.material.PageIndicatorState

val maxPages = 9
var selectedPage by remember { mutableStateOf(0) }
var finalValue by remember { mutableStateOf(0) }

val animatedSelectedPage by
    animateFloatAsState(
        targetValue = selectedPage.toFloat(),
    ) {
        finalValue = it.toInt()
    }

val pageIndicatorState: PageIndicatorState = remember {
    object : PageIndicatorState {
        override val pageOffset: Float
            get() = animatedSelectedPage - finalValue

        override val selectedPage: Int
            get() = finalValue

        override val pageCount: Int
            get() = maxPages
    }
}

Box(modifier = Modifier.fillMaxSize().padding(6.dp)) {
    InlineSlider(
        modifier = Modifier.align(Alignment.Center),
        value = selectedPage,
        increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
        decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
        valueProgression = 0 until maxPages,
        onValueChange = { selectedPage = it }
    )
    HorizontalPageIndicator(pageIndicatorState = pageIndicatorState)
}

@Composable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
): Unit

Icon component that draws bitmap using tint, defaulting to LocalContentColor. For a clickable icon, see Chip.

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
): Unit

Icon component that draws imageVector using tint, defaulting to LocalContentColor. For a clickable icon, see Chip.

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
): Unit

Icon component that draws a painter using tint, defaulting to LocalContentColor. For a clickable icon, see Chip.

@Composable
fun InlineSlider(
    value: Int,
    onValueChange: (Int) -> Unit,
    valueProgression: IntProgression,
    decreaseIcon: @Composable () -> Unit,
    increaseIcon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    segmented: Boolean = valueProgression.stepsNumber() <= 8,
    colors: InlineSliderColors = InlineSliderDefaults.colors()
): Unit

InlineSlider allows users to make a selection from a range of values. The range of selections is shown as a bar between the minimum and maximum values of the range, from which users may select a single value. InlineSlider is ideal for adjusting settings such as volume or brightness.

Value can be increased and decreased by clicking on the increase and decrease buttons, located accordingly to the start and end of the control. Buttons can have custom icons - decreaseIcon and increaseIcon.

The bar in the middle of control can have separators if segmented flag is set to true. A number of steps is calculated as the difference between max and min values of valueProgression divided by valueProgression.step - 1. For example, with a range of 100..120 and a step 5, number of steps will be (120-100)/ 5 - 1 = 3. Steps are 100(first), 105, 110, 115, 120(last)

If valueProgression range is not equally divisible by valueProgression.step, then valueProgression.last will be adjusted to the closest divisible value in the range. For example, 1..13 range and a step = 5, steps will be 1(first) , 6 , 11(last)

A continuous non-segmented slider sample:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.InlineSlider
import androidx.wear.compose.material.InlineSliderDefaults

var value by remember { mutableStateOf(4) }
InlineSlider(
    value = value,
    onValueChange = { value = it },
    increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
    decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
    valueProgression = 0..10,
    segmented = false
)

A segmented slider sample:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.InlineSlider
import androidx.wear.compose.material.InlineSliderDefaults

var value by remember { mutableStateOf(2f) }
InlineSlider(
    value = value,
    onValueChange = { value = it },
    increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
    decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
    valueRange = 1f..4f,
    steps = 7,
    segmented = true
)

@Composable
fun InlineSlider(
    value: Float,
    onValueChange: (Float) -> Unit,
    steps: Int,
    decreaseIcon: @Composable () -> Unit,
    increaseIcon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..(steps + 1).toFloat(),
    segmented: Boolean = steps <= 8,
    colors: InlineSliderColors = InlineSliderDefaults.colors()
): Unit

InlineSlider allows users to make a selection from a range of values. The range of selections is shown as a bar between the minimum and maximum values of the range, from which users may select a single value. InlineSlider is ideal for adjusting settings such as volume or brightness.

Value can be increased and decreased by clicking on the increase and decrease buttons, located accordingly to the start and end of the control. Buttons can have custom icons - decreaseIcon and increaseIcon.

The bar in the middle of control can have separators if segmented flag is set to true. A single step value is calculated as the difference between min and max values of valueRange divided by steps + 1 value.

A continuous non-segmented slider sample:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.InlineSlider
import androidx.wear.compose.material.InlineSliderDefaults

var value by remember { mutableStateOf(4.5f) }
InlineSlider(
    value = value,
    onValueChange = { value = it },
    increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
    decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
    valueRange = 3f..6f,
    steps = 5,
    segmented = false
)

A segmented slider sample:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.InlineSlider
import androidx.wear.compose.material.InlineSliderDefaults

var value by remember { mutableStateOf(2f) }
InlineSlider(
    value = value,
    onValueChange = { value = it },
    increaseIcon = { Icon(InlineSliderDefaults.Increase, "Increase") },
    decreaseIcon = { Icon(InlineSliderDefaults.Decrease, "Decrease") },
    valueRange = 1f..4f,
    steps = 7,
    segmented = true
)

@Composable
fun ListHeader(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = MaterialTheme.colors.onSurfaceVariant,
    content: @Composable RowScope.() -> Unit
): Unit

A slot based composable for creating a list header item. List header items are typically expected to be text. The contents provided will have text and colors effects applied based on the MaterialTheme. The contents will be start and end padded and should cover up to 3 lines of text.

Example usage:

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ListHeader
import androidx.wear.compose.material.Text

ScalingLazyColumn(
    modifier = Modifier.fillMaxWidth(),
) {
    item { ListHeader { Text("Header1") } }
    items(5) {
        Chip(
            onClick = {},
            label = { Text("List item $it") },
            colors = ChipDefaults.secondaryChipColors()
        )
    }
    item { ListHeader { Text("Header2") } }
    items(5) {
        Chip(
            onClick = {},
            label = { Text("List item ${it + 5}") },
            colors = ChipDefaults.secondaryChipColors()
        )
    }
}

@Composable
fun MaterialTheme(
    colors: Colors = MaterialTheme.colors,
    typography: Typography = MaterialTheme.typography,
    shapes: Shapes = MaterialTheme.shapes,
    content: @Composable () -> Unit
): Unit

MaterialTheme defines the styling principles from the WearOS Material design specification which extends the Material design specification.

Wear Material components from package/sub-packages in androidx.wear.compose.material use values provided here when retrieving default values.

It defines colors as specified in the Wear Material Color theme spec, typography defined in the Wear Material Type Scale spec, and shapes defined in the Wear Shape scheme.

All values may be set by providing this component with the colors, typography, and shapes attributes. Use this to configure the overall theme of elements within this MaterialTheme.

Any values that are not set will inherit the current value from the theme, falling back to the defaults if there is no parent MaterialTheme. This allows using a MaterialTheme at the top of your application, and then separate MaterialTheme(s) for different screens / parts of your UI, overriding only the parts of the theme definition that need to change.

For more information, see the Theming guide.

@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = CircleShape,
    border: ButtonBorder = ButtonDefaults.outlinedButtonBorder(),
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material OutlinedButton that offers a single slot to take any content (text, icon or image).

The recommended Button sizes can be obtained from ButtonDefaults - see ButtonDefaults.DefaultButtonSize, ButtonDefaults.LargeButtonSize, ButtonDefaults.SmallButtonSize. Icon content should be of size ButtonDefaults.DefaultIconSize, ButtonDefaults.LargeIconSize or ButtonDefaults.SmallIconSize respectively.

Buttons can be enabled or disabled. A disabled button will not respond to click events.

An OutlinedButton has a transparent background and a thin border by default with content taking the theme primary color.

Example of a OutlinedButton displaying an icon:

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material.Button
import androidx.wear.compose.material.ButtonDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.OutlinedButton

OutlinedButton(
    onClick = { /* Do something */ },
    enabled = true,
) {
    Icon(
        painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
        contentDescription = "airplane",
        modifier =
            Modifier.size(ButtonDefaults.DefaultIconSize)
                .wrapContentSize(align = Alignment.Center),
    )
}

For more information, see the Buttons guide.

@Composable
fun OutlinedChip(
    label: @Composable RowScope.() -> Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    colors: ChipColors = ChipDefaults.outlinedChipColors(),
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    contentPadding: PaddingValues = ChipDefaults.ContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
    border: ChipBorder = ChipDefaults.outlinedChipBorder()
): Unit

Wear Material OutlinedChip that offers three slots and a specific layout for an icon, label and secondaryLabel. The icon and secondaryLabel are optional. The items are laid out with the icon, if provided, at the start of a row, with a column next containing the two label slots.

The OutlinedChip is Stadium shaped and has a max height designed to take no more than two lines of text of Typography.button style. If no secondary label is provided then the label can be two lines of text. The label and secondary label should be consistently aligned. With localisation and/or large font sizes, the OutlinedChip height adjusts to accommodate the contents.

If a icon is provided then the labels should be "start" aligned, e.g. left aligned in ltr so that the text starts next to the icon.

the OutlinedChip has a transparent background, a thin border and contents which are colored with the theme primary color. Colors can be obtained and customized using ChipDefaults.outlinedChipColors().

Chips can be enabled or disabled. A disabled chip will not respond to click events.

Example of a OutlinedChip with icon and a label only with longer text:

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.OutlinedChip
import androidx.wear.compose.material.Text

OutlinedChip(
    onClick = { /* Do something */ },
    enabled = true,
    // Primary label can have up to 3 lines of text
    label = {
        Text(
            text = "Main label can span up to 3 lines",
            maxLines = 3,
            overflow = TextOverflow.Ellipsis
        )
    },
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
            contentDescription = "airplane",
            modifier =
                Modifier.size(ChipDefaults.IconSize).wrapContentSize(align = Alignment.Center),
        )
    }
)

For more information, see the Chips guide.

@Composable
fun OutlinedCompactButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    backgroundPadding: Dp = ButtonDefaults.CompactButtonBackgroundPadding,
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = CircleShape,
    border: ButtonBorder = ButtonDefaults.outlinedButtonBorder(),
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material OutlinedCompactButton that offers a single slot to take any content (text, icon or image).

The OutlinedCompactButton has background size ButtonDefaults.ExtraSmallButtonSize. There is an transparent padding around the background, defaulted to ButtonDefaults.CompactButtonBackgroundPadding, which increases the clickable area. Icon content should have size ButtonDefaults.SmallIconSize.

An OutlinedCompactButton has a transparent background and a thin border by default with content taking the theme primary color.

OutlinedCompactButtons can be enabled or disabled. A disabled button will not respond to click events.

Example usage:

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material.Button
import androidx.wear.compose.material.ButtonDefaults
import androidx.wear.compose.material.CompactButton
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.OutlinedCompactButton

OutlinedCompactButton(
    onClick = { /* Do something */ },
    enabled = true,
) {
    Icon(
        painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
        contentDescription = "airplane",
        modifier =
            Modifier.size(ButtonDefaults.SmallIconSize)
                .wrapContentSize(align = Alignment.Center),
    )
}

For more information, see the Buttons guide.

@Composable
fun OutlinedCompactChip(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    label: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    colors: ChipColors = ChipDefaults.outlinedChipColors(),
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    contentPadding: PaddingValues = ChipDefaults.CompactChipContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
    border: ChipBorder = ChipDefaults.outlinedChipBorder()
): Unit

A compact Outlined Wear Material Chip that offers two slots and a specific layout for an icon and label. Both the icon and label are optional however it is expected that at least one will be provided.

The CompactChip is Stadium shaped and has a max height designed to take no more than one line of text of Typography.caption1 style and/or one icon. The default max height is ChipDefaults.CompactChipHeight. This includes a visible chip height of 32.dp and 8.dp of padding above and below the chip in order to meet accessibility guidelines that request a minimum of 48.dp height and width of tappable area.

If a icon is provided then the labels should be "start" aligned, e.g. left aligned in ltr so that the text starts next to the icon.

The items are laid out as follows.

1. If a label is provided then the chip will be laid out with the optional icon at the start of a row followed by the label with a default max height of ChipDefaults.CompactChipHeight.

2. If only an icon is provided it will be laid out vertically and horizontally centered with a default height of ChipDefaults.CompactChipHeight and the default width of ChipDefaults.IconOnlyCompactChipWidth

If neither icon nor label is provided then the chip will displayed like an icon only chip but with no contents and ChipColors.background() color.

the OutlinedCompactChip has a transparent background, a thin border and contents which are colored with the theme primary color. Colors can be obtained and customized using ChipDefaults.outlinedChipColors().

Chips can be enabled or disabled. A disabled chip will not respond to click events.

Example of a OutlinedCompactChip with icon and single line of label text:

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.CompactChip
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.OutlinedCompactChip
import androidx.wear.compose.material.Text

OutlinedCompactChip(
    onClick = { /* Do something */ },
    enabled = true,
    // CompactChip label should be no more than 1 line of text
    label = { Text("Single line label", maxLines = 1, overflow = TextOverflow.Ellipsis) },
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
            contentDescription = "airplane",
            modifier = Modifier.size(ChipDefaults.SmallIconSize),
        )
    },
)

For more information, see the Chips guide.

@Composable
fun Picker(
    state: PickerState,
    modifier: Modifier = Modifier,
    readOnly: Boolean = false,
    readOnlyLabel: (@Composable BoxScope.() -> Unit)? = null,
    scalingParams: ScalingParams = PickerDefaults.scalingParams(),
    separation: Dp = 0.dp,
    gradientRatio: @FloatRange(from = 0.0, to = 0.5) Float = PickerDefaults.DefaultGradientRatio,
    gradientColor: Color = MaterialTheme.colors.background,
    flingBehavior: FlingBehavior = PickerDefaults.flingBehavior(state),
    option: @Composable PickerScope.(optionIndex: Int) -> Unit
): Unit

A scrollable list of items to pick from. By default, items will be repeated "infinitely" in both directions, unless PickerState#repeatItems is specified as false.

Example of a simple picker to select one of five options:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Picker
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.rememberPickerState

val items = listOf("One", "Two", "Three", "Four", "Five")
val state = rememberPickerState(items.size)
val contentDescription by remember { derivedStateOf { "${state.selectedOption + 1}" } }
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Text(
        modifier = Modifier.align(Alignment.TopCenter).padding(top = 10.dp),
        text = "Selected: ${items[state.selectedOption]}"
    )
    Picker(
        modifier = Modifier.size(100.dp, 100.dp),
        state = state,
        contentDescription = contentDescription,
    ) {
        Text(items[it])
    }
}

Example of dual pickers, where clicking switches which one is editable and which is read-only:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInteropFilter
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.Picker
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.rememberPickerState

var selectedColumn by remember { mutableStateOf(0) }
val textStyle = MaterialTheme.typography.display1

@Composable
fun Option(column: Int, text: String) =
    Box(modifier = Modifier.fillMaxSize()) {
        Text(
            text = text,
            style = textStyle,
            color =
                if (selectedColumn == column) MaterialTheme.colors.secondary
                else MaterialTheme.colors.onBackground,
            modifier =
                Modifier.align(Alignment.Center).wrapContentSize().pointerInteropFilter {
                    if (it.action == MotionEvent.ACTION_DOWN) selectedColumn = column
                    true
                }
        )
    }

Row(
    modifier = Modifier.fillMaxSize(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center,
) {
    val hourState =
        rememberPickerState(initialNumberOfOptions = 12, initiallySelectedOption = 5)
    val hourContentDescription by remember {
        derivedStateOf { "${hourState.selectedOption + 1 } hours" }
    }
    Picker(
        readOnly = selectedColumn != 0,
        state = hourState,
        modifier = Modifier.size(64.dp, 100.dp),
        contentDescription = hourContentDescription,
        option = { hour: Int -> Option(0, "%2d".format(hour + 1)) }
    )
    Spacer(Modifier.width(8.dp))
    Text(text = ":", style = textStyle, color = MaterialTheme.colors.onBackground)
    Spacer(Modifier.width(8.dp))
    val minuteState =
        rememberPickerState(initialNumberOfOptions = 60, initiallySelectedOption = 0)
    val minuteContentDescription by remember {
        derivedStateOf { "${minuteState.selectedOption} minutes" }
    }
    Picker(
        readOnly = selectedColumn != 1,
        state = minuteState,
        modifier = Modifier.size(64.dp, 100.dp),
        contentDescription = minuteContentDescription,
        option = { minute: Int -> Option(1, "%02d".format(minute)) }
    )
}

@Composable
fun Picker(
    state: PickerState,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    readOnly: Boolean = false,
    readOnlyLabel: (@Composable BoxScope.() -> Unit)? = null,
    onSelected: () -> Unit = {},
    scalingParams: ScalingParams = PickerDefaults.defaultScalingParams(),
    separation: Dp = 0.dp,
    gradientRatio: @FloatRange(from = 0.0, to = 0.5) Float = PickerDefaults.DefaultGradientRatio,
    gradientColor: Color = MaterialTheme.colors.background,
    flingBehavior: FlingBehavior = PickerDefaults.flingBehavior(state),
    userScrollEnabled: Boolean = true,
    rotaryScrollableBehavior: RotaryScrollableBehavior? = RotaryScrollableDefaults.snapBehavior(state, state.toRotarySnapLayoutInfoProvider()),
    option: @Composable PickerScope.(optionIndex: Int) -> Unit
): Unit

A scrollable list of items to pick from. By default, items will be repeated "infinitely" in both directions, unless PickerState#repeatItems is specified as false.

This overload supports rotary input. Rotary input allows users to scroll the content of the Picker - by using a crown or a rotating bezel on their Wear OS device. It can be modified with rotaryScrollableBehavior param. Note that rotary scroll and touch scroll should be aligned. If rotaryScrollableBehavior is set for snap (using RotaryScrollableDefaults.snapBehavior), flingBehavior should be set for snap as well (using PickerDefaults.flingBehavior).

Example of a simple picker to select one of five options:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Picker
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.rememberPickerState

val items = listOf("One", "Two", "Three", "Four", "Five")
val state = rememberPickerState(items.size)
val contentDescription by remember { derivedStateOf { "${state.selectedOption + 1}" } }
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Text(
        modifier = Modifier.align(Alignment.TopCenter).padding(top = 10.dp),
        text = "Selected: ${items[state.selectedOption]}"
    )
    Picker(
        modifier = Modifier.size(100.dp, 100.dp),
        state = state,
        contentDescription = contentDescription,
    ) {
        Text(items[it])
    }
}

Example of dual pickers, where clicking switches which one is editable and which is read-only:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.pointer.pointerInteropFilter
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.Picker
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.rememberPickerState

var selectedColumn by remember { mutableStateOf(0) }
val textStyle = MaterialTheme.typography.display1

@Composable
fun Option(column: Int, text: String) =
    Box(modifier = Modifier.fillMaxSize()) {
        Text(
            text = text,
            style = textStyle,
            color =
                if (selectedColumn == column) MaterialTheme.colors.secondary
                else MaterialTheme.colors.onBackground,
            modifier =
                Modifier.align(Alignment.Center).wrapContentSize().pointerInteropFilter {
                    if (it.action == MotionEvent.ACTION_DOWN) selectedColumn = column
                    true
                }
        )
    }

Row(
    modifier = Modifier.fillMaxSize(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center,
) {
    val hourState =
        rememberPickerState(initialNumberOfOptions = 12, initiallySelectedOption = 5)
    val hourContentDescription by remember {
        derivedStateOf { "${hourState.selectedOption + 1 } hours" }
    }
    Picker(
        readOnly = selectedColumn != 0,
        state = hourState,
        modifier = Modifier.size(64.dp, 100.dp),
        contentDescription = hourContentDescription,
        option = { hour: Int -> Option(0, "%2d".format(hour + 1)) }
    )
    Spacer(Modifier.width(8.dp))
    Text(text = ":", style = textStyle, color = MaterialTheme.colors.onBackground)
    Spacer(Modifier.width(8.dp))
    val minuteState =
        rememberPickerState(initialNumberOfOptions = 60, initiallySelectedOption = 0)
    val minuteContentDescription by remember {
        derivedStateOf { "${minuteState.selectedOption} minutes" }
    }
    Picker(
        readOnly = selectedColumn != 1,
        state = minuteState,
        modifier = Modifier.size(64.dp, 100.dp),
        contentDescription = minuteContentDescription,
        option = { minute: Int -> Option(1, "%02d".format(minute)) }
    )
}

@Composable
fun PickerGroup(
    vararg pickers: PickerGroupItem,
    modifier: Modifier = Modifier,
    pickerGroupState: PickerGroupState = rememberPickerGroupState(),
    onSelected: (selectedIndex: Int) -> Unit = {},
    autoCenter: Boolean = true,
    propagateMinConstraints: Boolean = false,
    touchExplorationStateProvider: TouchExplorationStateProvider = DefaultTouchExplorationStateProvider(),
    separator: (@Composable (Int) -> Unit)? = null
): Unit

A group of Pickers to build components where multiple pickers are required to be combined together. The component maintains the focus between different Pickers by using PickerGroupState. It can be handled from outside the component using the same instance and its properties. When touch exploration services are enabled, the focus moves to the picker which is clicked. To handle clicks in a different manner, use the onSelected lambda to control the focus of talkback and actual focus.

It is recommended to ensure that a Picker in non read only mode should have user scroll enabled when touch exploration services are running.

Example of a sample picker group with an hour and minute picker (24 hour format)

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.PickerGroup
import androidx.wear.compose.material.PickerGroupItem
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.rememberPickerGroupState
import androidx.wear.compose.material.rememberPickerState

val pickerGroupState = rememberPickerGroupState()
val pickerStateHour = rememberPickerState(initialNumberOfOptions = 24)
val pickerStateMinute = rememberPickerState(initialNumberOfOptions = 60)
Column(
    modifier = Modifier.fillMaxWidth(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Spacer(modifier = Modifier.size(30.dp))
    Text(text = if (pickerGroupState.selectedIndex == 0) "Hours" else "Minutes")
    Spacer(modifier = Modifier.size(10.dp))
    PickerGroup(
        PickerGroupItem(
            pickerState = pickerStateHour,
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            modifier = Modifier.size(80.dp, 100.dp)
        ),
        PickerGroupItem(
            pickerState = pickerStateMinute,
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            modifier = Modifier.size(80.dp, 100.dp)
        ),
        pickerGroupState = pickerGroupState,
        autoCenter = false
    )
}

Example of an auto centering picker group where the total width exceeds screen's width

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.PickerGroup
import androidx.wear.compose.material.PickerGroupItem
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.rememberPickerGroupState
import androidx.wear.compose.material.rememberPickerState

val pickerGroupState = rememberPickerGroupState()
val pickerStateHour = rememberPickerState(initialNumberOfOptions = 24)
val pickerStateMinute = rememberPickerState(initialNumberOfOptions = 60)
val pickerStateSeconds = rememberPickerState(initialNumberOfOptions = 60)
val pickerStateMilliSeconds = rememberPickerState(initialNumberOfOptions = 1000)
Column(
    modifier = Modifier.fillMaxWidth(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    val headingText = mapOf(0 to "Hours", 1 to "Minutes", 2 to "Seconds", 3 to "Milli")
    Spacer(modifier = Modifier.size(30.dp))
    Text(text = headingText[pickerGroupState.selectedIndex]!!)
    Spacer(modifier = Modifier.size(10.dp))
    PickerGroup(
        PickerGroupItem(
            pickerState = pickerStateHour,
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            modifier = Modifier.size(80.dp, 100.dp)
        ),
        PickerGroupItem(
            pickerState = pickerStateMinute,
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            modifier = Modifier.size(80.dp, 100.dp)
        ),
        PickerGroupItem(
            pickerState = pickerStateSeconds,
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            modifier = Modifier.size(80.dp, 100.dp)
        ),
        PickerGroupItem(
            pickerState = pickerStateMilliSeconds,
            option = { optionIndex, _ -> Text(text = "%03d".format(optionIndex)) },
            modifier = Modifier.size(80.dp, 100.dp)
        ),
        pickerGroupState = pickerGroupState,
        autoCenter = true
    )
}

@Composable
fun PositionIndicator(
    scalingLazyListState: ScalingLazyListState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false
): Unit

Creates an PositionIndicator based on the values in a ScalingLazyListState object that a ScalingLazyColumn uses.

For more information, see the Scroll indicators guide.

@Composable
fun PositionIndicator(
    lazyListState: LazyListState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false,
    fadeInAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    fadeOutAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    positionAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.positionAnimationSpec
): Unit

Creates an PositionIndicator based on the values in a LazyListState object that a LazyColumn uses.

For more information, see the Scroll indicators guide.

@Composable
fun PositionIndicator(
    scalingLazyListState: ScalingLazyListState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false,
    fadeInAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    fadeOutAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    positionAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.positionAnimationSpec
): Unit

Creates an PositionIndicator based on the values in a ScalingLazyListState object that a ScalingLazyColumn uses.

For more information, see the Scroll indicators guide.

@Composable
fun PositionIndicator(
    scrollState: ScrollState,
    modifier: Modifier = Modifier,
    reverseDirection: Boolean = false,
    fadeInAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    fadeOutAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    positionAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.positionAnimationSpec
): Unit

Creates an PositionIndicator based on the values in a ScrollState object. e.g. a Column implementing Modifier.verticalScroll provides a ScrollState.

For more information, see the Scroll indicators guide.

@Composable
fun PositionIndicator(
    value: () -> Float,
    modifier: Modifier = Modifier,
    range: ClosedFloatingPointRange<Float> = 0f..1f,
    color: Color = MaterialTheme.colors.onBackground,
    reverseDirection: Boolean = false,
    position: PositionIndicatorAlignment = PositionIndicatorAlignment.OppositeRsb,
    fadeInAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    fadeOutAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    positionAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.positionAnimationSpec
): Unit

Creates a PositionIndicator for controls like rotating side button, rotating bezel or slider.

For more information, see the Scroll indicators guide.

@Composable
fun PositionIndicator(
    state: PositionIndicatorState,
    indicatorHeight: Dp,
    indicatorWidth: Dp,
    paddingHorizontal: Dp,
    modifier: Modifier = Modifier,
    background: Color = MaterialTheme.colors.onBackground.copy(alpha = 0.3f),
    color: Color = MaterialTheme.colors.onBackground,
    reverseDirection: Boolean = false,
    position: PositionIndicatorAlignment = PositionIndicatorAlignment.End,
    fadeInAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    fadeOutAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.visibilityAnimationSpec,
    positionAnimationSpec: AnimationSpec<Float> = PositionIndicatorDefaults.positionAnimationSpec
): Unit

An indicator on one side of the screen to show the current PositionIndicatorState.

Typically used with the Scaffold but can be used to decorate any full screen situation.

This composable should only be used to fill the whole screen as Wear Material Design language requires the placement of the position indicator to be right center of the screen as the indicator is curved on circular devices.

It detects if the screen is round or square and draws itself as a curve or line.

Note that the composable will take the whole screen, but it will be drawn with the given dimensions indicatorHeight and indicatorWidth, and position with respect to the edge of the screen according to paddingHorizontal

This PositionIndicator has 3 separate animation specs to control different animations.

• fadeInAnimationSpec - controls fade-in animation.

• fadeOutAnimationSpec - controls fade-out animation.

• positionAnimationSpec - controls position change animation.

For performance reasons and for UX consistency, when PositionIndicator is used with scrollable list, we recommend to switch off fade-in and position animations by passing snap spec into fadeInAnimationSpec and positionAnimationSpec parameters. If PositionIndicator is used as a standalone indicator, for example as volume control, then we recommend to have all 3 animations turned on.

If color of PositionIndicator is not white and position animation is enabled - a short highlight animation will be triggered on any position change. This is a short animation accenting PositionIndicator with white color with 33% opacity.

For more information, see the Scroll indicators guide.

@Composable
fun ProvideTextStyle(value: TextStyle, content: @Composable () -> Unit): Unit

This function is used to set the current value of LocalTextStyle, merging the given style with the current style values for any missing attributes. Any Text components included in this component's content will be styled with this style unless styled explicitly.

@Composable
fun RadioButton(
    selected: Boolean,
    modifier: Modifier = Modifier,
    colors: RadioButtonColors = RadioButtonDefaults.colors(),
    enabled: Boolean = true,
    onClick: (() -> Unit)? = null,
    interactionSource: MutableInteractionSource? = null
): Unit

RadioButton provides an animated radio button for use as a toggle control in ToggleChip or SplitToggleChip.

Example of a ToggleChip with RadioButton toggle control:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.SelectableChip
import androidx.wear.compose.material.Text

var selectedRadioIndex by remember { mutableStateOf(0) }
Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    SelectableChip(
        modifier = Modifier.fillMaxWidth(),
        selected = selectedRadioIndex == 0,
        onClick = { selectedRadioIndex = 0 },
        label = {
            // The primary label should have a maximum 3 lines of text
            Text("Primary label", maxLines = 3, overflow = TextOverflow.Ellipsis)
        },
        secondaryLabel = {
            // and the secondary label should have max 2 lines of text.
            Text("Secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
        },
        appIcon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                contentDescription = "airplane",
                modifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center),
            )
        },
        enabled = true,
    )
    Spacer(modifier = Modifier.height(8.dp))
    SelectableChip(
        modifier = Modifier.fillMaxWidth(),
        selected = selectedRadioIndex == 1,
        onClick = { selectedRadioIndex = 1 },
        label = {
            // The primary label should have a maximum 3 lines of text
            Text("Alternative label", maxLines = 3, overflow = TextOverflow.Ellipsis)
        },
        secondaryLabel = {
            // and the secondary label should have max 2 lines of text.
            Text("Alternative secondary", maxLines = 2, overflow = TextOverflow.Ellipsis)
        },
        appIcon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                contentDescription = "airplane",
                modifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center),
            )
        },
        enabled = true,
    )
}

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    vignette: (@Composable () -> Unit)? = null,
    positionIndicator: (@Composable () -> Unit)? = null,
    pageIndicator: (@Composable () -> Unit)? = null,
    timeText: (@Composable () -> Unit)? = null,
    content: @Composable () -> Unit
): Unit

Scaffold implements the basic Wear Material Design visual layout structure.

This component provides API to put together several material components to construct your screen, by ensuring proper layout strategy for them and collecting necessary data so these components will work together correctly.

The Scaffold provides the main application structure in a Wear Material application. It provides slots for the different parts of the application and sensible defaults were appropriate.

The layout of the Wear Scaffold is typically z-layered with decorations such as PositionIndicator, HorizontalPageIndicator and Vignette applied in the order laid out in the Wear Material Design guidance.

Simple example of a Scaffold with a ScalingLazyColumn as the main application content and a scroll indicator to show the position of the items in the ScalingLazyColumn as.

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.PositionIndicator
import androidx.wear.compose.material.Scaffold
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.TimeText
import androidx.wear.compose.material.Vignette
import androidx.wear.compose.material.VignettePosition

val listState = rememberScalingLazyListState()
val vignetteState = mutableStateOf(VignettePosition.TopAndBottom)
val showVignette = mutableStateOf(true)

Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState, modifier = Modifier)
    },
    vignette = {
        if (showVignette.value) {
            Vignette(vignettePosition = vignetteState.value)
        }
    },
    timeText = { TimeText() }
) {
    ScalingLazyColumn(
        contentPadding = PaddingValues(top = 40.dp),
        state = listState,
        modifier = Modifier.fillMaxWidth()
    ) {
        item {
            Chip(
                onClick = { showVignette.value = false },
                label = { Text("No Vignette") },
                colors = ChipDefaults.secondaryChipColors()
            )
        }
        item {
            Chip(
                onClick = {
                    showVignette.value = true
                    vignetteState.value = VignettePosition.Top
                },
                label = { Text("Top Vignette only") },
                colors = ChipDefaults.secondaryChipColors()
            )
        }
        item {
            Chip(
                onClick = {
                    showVignette.value = true
                    vignetteState.value = VignettePosition.Bottom
                },
                label = { Text("Bottom Vignette only") },
                colors = ChipDefaults.secondaryChipColors()
            )
        }
        item {
            Chip(
                onClick = {
                    showVignette.value = true
                    vignetteState.value = VignettePosition.TopAndBottom
                },
                label = { Text("Top and Bottom Vignette") },
                colors = ChipDefaults.secondaryChipColors()
            )
        }
        items(20) {
            Chip(
                onClick = {},
                label = { Text("List item $it") },
                colors = ChipDefaults.secondaryChipColors()
            )
        }
    }
}

@Composable
fun ScalingLazyColumn(
    modifier: Modifier = Modifier,
    state: ScalingLazyListState = rememberScalingLazyListState(),
    contentPadding: PaddingValues = PaddingValues(horizontal = 10.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(
            space = 4.dp,
            alignment = if (!reverseLayout) Alignment.Top else Alignment.Bottom
        ),
    horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    scalingParams: ScalingParams = ScalingLazyColumnDefaults.scalingParams(),
    anchorType: ScalingLazyListAnchorType = ScalingLazyListAnchorType.ItemCenter,
    autoCentering: AutoCenteringParams? = AutoCenteringParams(),
    content: ScalingLazyListScope.() -> Unit
): Unit

A scrolling scaling/fisheye list component that forms a key part of the Wear Material Design language. Provides scaling and transparency effects to the content items.

ScalingLazyColumn is designed to be able to handle potentially large numbers of content items. Content items are only materialized and composed when needed.

If scaling/fisheye functionality is not required then a LazyColumn should be considered instead to avoid any overhead of measuring and calculating scaling and transparency effects for the content items.

Example of a ScalingLazyColumn with default parameters:

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ListHeader
import androidx.wear.compose.material.Text

ScalingLazyColumn(modifier = Modifier.fillMaxWidth()) {
    item { ListHeader { Text(text = "List Header") } }
    items(20) {
        Chip(
            onClick = {},
            label = { Text("List item $it") },
            colors = ChipDefaults.secondaryChipColors()
        )
    }
}

Example of a ScalingLazyColumn using ScalingLazyListAnchorType.ItemStart anchoring, in this configuration the edge of list items is aligned to the center of the screen. Also this example shows scrolling to a clicked list item with ScalingLazyListState.animateScrollToItem:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.AutoCenteringParams
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.ScalingLazyListAnchorType
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ListHeader
import androidx.wear.compose.material.Text

val coroutineScope = rememberCoroutineScope()
val itemSpacing = 6.dp
// Line up the gap between the items on the center-line
val scrollOffset = with(LocalDensity.current) { -(itemSpacing / 2).roundToPx() }
val state =
    rememberScalingLazyListState(
        initialCenterItemIndex = 1,
        initialCenterItemScrollOffset = scrollOffset
    )

ScalingLazyColumn(
    modifier = Modifier.fillMaxWidth(),
    anchorType = ScalingLazyListAnchorType.ItemStart,
    verticalArrangement = Arrangement.spacedBy(itemSpacing),
    state = state,
    autoCentering = AutoCenteringParams(itemOffset = scrollOffset)
) {
    item { ListHeader { Text(text = "List Header") } }
    items(20) {
        Chip(
            onClick = {
                coroutineScope.launch {
                    // Add +1 to allow for the ListHeader
                    state.animateScrollToItem(it + 1, scrollOffset)
                }
            },
            label = { Text("List item $it") },
            colors = ChipDefaults.secondaryChipColors()
        )
    }
}

Example of a ScalingLazyColumn with snap of items to the viewport center:

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.ScalingLazyColumnDefaults
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ListHeader
import androidx.wear.compose.material.Text

val state = rememberScalingLazyListState()
ScalingLazyColumn(
    modifier = Modifier.fillMaxWidth(),
    state = state,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state)
) {
    item { ListHeader { Text(text = "List Header") } }
    items(20) {
        Chip(
            onClick = {},
            label = { Text("List item $it") },
            colors = ChipDefaults.secondaryChipColors()
        )
    }
}

Example of a ScalingLazyColumn where autoCentering has been disabled and explicit contentPadding provided to ensure there is space above the first and below the last list item to allow them to be scrolled into view on circular screens:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ListHeader
import androidx.wear.compose.material.Text

ScalingLazyColumn(
    modifier = Modifier.fillMaxWidth(),
    contentPadding = PaddingValues(top = 20.dp, bottom = 20.dp),
    autoCentering = null
) {
    item { ListHeader { Text(text = "List Header") } }
    items(20) {
        Chip(
            onClick = {},
            label = { Text("List item $it") },
            colors = ChipDefaults.secondaryChipColors()
        )
    }
}

For more information, see the Lists guide.