androidx.wear.compose.material3

Interfaces

`ButtonGroupScope`
`MotionScheme`	A motion scheme provides all the `FiniteAnimationSpec`s for a `MaterialTheme`.
`PickerScope`	Receiver scope which is used by `Picker`.
`SurfaceTransformation`	Object to be used to apply different transformation to the content and the container (i.e. the background) of the composable.
`TimeSource`

Classes

`AngularDirection`	Class to define angular direction - Clockwise and Counter Clockwise.
`AnimatedTextFontRegistry`	Generates fonts to be used by `AnimatedText` throughout the animation.
`ButtonColors`	Represents the container and content colors used in buttons in different states.
`CardColors`	Represents Colors used in `Card`.
`CheckboxButtonColors`	Represents the different container and content colors used for `CheckboxButton` in various states, that are checked, unchecked, enabled and disabled.
`ColorScheme`	A `ColorScheme` holds all the named color parameters for a `MaterialTheme`.
`ConfirmationDialogColors`	Represents the colors used in `ConfirmationDialog`, `SuccessConfirmationDialog` and `FailureConfirmationDialog`.
`DatePickerColors`	Colors for `DatePicker`.
`DatePickerType`	Specifies the types of columns to display in the DatePicker.
`EdgeButtonSize`	Size of the `EdgeButton`.
`IconButtonColors`	Represents the container and content colors used in an icon button in different states.
`IconButtonShapes`	Represents the shapes used for `IconButton` in various states.
`IconToggleButtonColors`	Represents the different container and content colors used for `IconToggleButton` in various states, that are checked, unchecked, enabled and disabled.
`IconToggleButtonShapes`	Represents the shapes used for `IconToggleButton` in various states.
`LevelIndicatorColors`	Represents the indicator and track colors used in `LevelIndicator`.
`OpenOnPhoneDialogColors`	Represents the colors used in `OpenOnPhoneDialog`.
`PagerSensitivity`	Represents the sensitivity level of pager for snapping algorithms, such as during fling or rotary scrolling (either horizontal or vertical).
`PickerGroupScope`
`PickerState`	A state object that can be hoisted to observe item selection.
`PlaceholderState`	A state object that can be used to control placeholders.
`ProgressIndicatorColors`	Represents the indicator and track colors used in progress indicator.
`RadioButtonColors`	Represents the different container and content colors used for `RadioButton` in various states, that are selected, unselected, enabled and disabled.
`RevealDirection`	Different values `SwipeToReveal` composable can reveal the actions from.
`RevealState`	A class to keep track of the state of the composable.
`RevealValue`	Different values that determine the state of the `SwipeToReveal` composable, reflected in `RevealState.currentValue`.
`ScreenStage`	`ScreenStage` represents the different stages for a screen, which affect visibility of scaffold components such as `TimeText` and `ScrollIndicator` with `scrollAway` and other animations.
`ScrollIndicatorColors`	Represents the indicator and track colors used in `ScrollIndicator`.
`Shapes`	Material surfaces can be displayed in different shapes.
`SliderColors`	Represents the background and content colors used in `Slider` in different states.
`SplitCheckboxButtonColors`	Represents the different colors used in `SplitCheckboxButton` in different states.
`SplitRadioButtonColors`	Represents the different colors used in `SplitRadioButton` in different states.
`SplitSwitchButtonColors`	Represents the different colors used in `SplitSwitchButton` in different states.
`StepperColors`	Represents Colors used in `Stepper`.
`SwipeToRevealScope`	Scope for the actions of a `SwipeToReveal` composable.
`SwitchButtonColors`	Represents the different container and content colors used for `SwitchButton`, in various states, that are checked, unchecked, enabled and disabled.
`TextButtonColors`	Represents the container and content colors used in a text button in different states.
`TextButtonShapes`	Represents the shapes used for `TextButton` in various states.
`TextConfiguration`	Class representing aspects of `Text` that can be configured with `LocalTextConfiguration`.
`TextToggleButtonColors`	Represents the different container and content colors used for `TextToggleButton` in various states, that are checked, unchecked, enabled and disabled.
`TextToggleButtonShapes`	Represents the shapes used for `TextToggleButton` in various states.
`TimePickerColors`	Represents the colors used by a `TimePicker`.
`TimePickerSelection`
`TimePickerType`	Specifies the types of columns to display in the TimePicker.
`Typography`	Class holding typography definitions as defined by the Wear Material typography specification.

Objects

`AlertDialogDefaults`	Contains the default values used by `AlertDialog`
`AnimatedTextDefaults`	Defaults for AnimatedText.
`ArcProgressIndicatorDefaults`	Contains default values for `ArcProgressIndicator`.
`ButtonDefaults`	Contains the default values used by `Button`
`ButtonGroupDefaults`	Contains the default values used by `ButtonGroup`
`CardDefaults`	Contains the default values used by `Card`
`CheckboxButtonDefaults`	Contains the default values used by `CheckboxButton`s and `SplitCheckboxButton`s
`CircularProgressIndicatorDefaults`	Contains default values for `CircularProgressIndicator`.
`ConfirmationDialogDefaults`	Contains default values used by `ConfirmationDialog` composable.
`CurvedTextDefaults`
`DatePickerDefaults`	Contains the default values used by `DatePicker`
`EdgeButtonDefaults`	Contains the default values used by `EdgeButton`.
`FadingExpandingLabelDefaults`	Contains default values for `FadingExpandingLabel`.
`IconButtonDefaults`	Contains the default values used by `IconButton`.
`IconToggleButtonDefaults`	Contains the default values used by `IconToggleButton`.
`LevelIndicatorDefaults`	Contains the default values used for `LevelIndicator`.
`LinearProgressIndicatorDefaults`	Contains defaults for Linear Progress Indicator.
`ListHeaderDefaults`
`MaterialTheme`
`OpenOnPhoneDialogDefaults`	Contains the default values used by `OpenOnPhoneDialog`.
`PageIndicatorDefaults`	Contains the default values used by `HorizontalPageIndicator` and `VerticalPageIndicator`
`PagerScaffoldDefaults`	Contains default values used for `HorizontalPagerScaffold` and `VerticalPagerScaffold`.
`PickerDefaults`	Contains the default values used by `Picker`.
`PlaceholderDefaults`	Contains the default values used for providing placeholders.
`ProgressIndicatorDefaults`	Contains defaults for Progress Indicators.
`RadioButtonDefaults`	Contains the default values used by `RadioButton`s and `SplitRadioButton`s
`ScreenScaffoldDefaults`	Contains the default values used by `ScreenScaffold`
`ScrollIndicatorDefaults`	Contains the default values used for `ScrollIndicator`.
`ShapeDefaults`	Contains the default values used by `Shapes`
`SliderDefaults`	Defaults used by slider.
`StepperDefaults`	Defaults used by `Stepper`.
`SwipeToRevealDefaults`	Defaults for Material 3 `SwipeToReveal`.
`SwitchButtonDefaults`	Contains the default values used by `SwitchButton`s and `SplitSwitchButton`s
`TextButtonDefaults`	Contains the default values used by `TextButton`.
`TextConfigurationDefaults`	Default values for `TextConfiguration`
`TextToggleButtonDefaults`	Contains the default values used by `TextToggleButton`.
`TimePickerDefaults`	Contains the default values used by `TimePicker`
`TimeTextDefaults`	Contains the default values used by `TimeText`.

Top-level functions summary

`Unit`	`@Composable AlertDialog( visible: Boolean, onDismissRequest: () -> Unit, title: @Composable () -> Unit, modifier: Modifier, icon: (@Composable () -> Unit)?, text: (@Composable () -> Unit)?, verticalArrangement: Arrangement.Vertical, contentPadding: PaddingValues, properties: DialogProperties, content: (ScalingLazyListScope.() -> Unit)? )` Dialogs provide important prompts in a user flow.
`Unit`	`@Composable AlertDialog( visible: Boolean, onDismissRequest: () -> Unit, edgeButton: @Composable BoxScope.() -> Unit, title: @Composable () -> Unit, modifier: Modifier, icon: (@Composable () -> Unit)?, text: (@Composable () -> Unit)?, verticalArrangement: Arrangement.Vertical, contentPadding: PaddingValues, properties: DialogProperties, content: (ScalingLazyListScope.() -> Unit)? )` Dialogs provide important prompts in a user flow.
`Unit`	@Composable AlertDialog( visible: Boolean, onDismissRequest: () -> Unit, confirmButton: @Composable RowScope.() -> Unit, title: @Composable () -> Unit, modifier: Modifier, dismissButton: @Composable RowScope.() -> Unit, icon: (@Composable () -> Unit)?, text: (@Composable () -> Unit)?, verticalArrangement: Arrangement.Vertical, contentPadding: PaddingValues, properties: DialogProperties, content: (ScalingLazyListScope.() -> Unit)? ) AlertDialogs provide important prompts in a user flow.
`Unit`	`@Composable AlertDialogContent( title: @Composable () -> Unit, modifier: Modifier, icon: (@Composable () -> Unit)?, text: (@Composable () -> Unit)?, verticalArrangement: Arrangement.Vertical, contentPadding: PaddingValues, content: (ScalingLazyListScope.() -> Unit)? )` This `AlertDialogContent` overload provides the content for an `AlertDialog` without any dedicated slots for buttons.
`Unit`	`@Composable AlertDialogContent( edgeButton: @Composable BoxScope.() -> Unit, title: @Composable () -> Unit, modifier: Modifier, icon: (@Composable () -> Unit)?, text: (@Composable () -> Unit)?, verticalArrangement: Arrangement.Vertical, contentPadding: PaddingValues, content: (ScalingLazyListScope.() -> Unit)? )` This `AlertDialogContent` overload provides the content for an `AlertDialog` with a single `EdgeButton` to confirm an action.
`Unit`	`@Composable AlertDialogContent( confirmButton: @Composable RowScope.() -> Unit, title: @Composable () -> Unit, dismissButton: @Composable RowScope.() -> Unit, modifier: Modifier, icon: (@Composable () -> Unit)?, text: (@Composable () -> Unit)?, verticalArrangement: Arrangement.Vertical, contentPadding: PaddingValues, content: (ScalingLazyListScope.() -> Unit)? )` This `AlertDialogContent` overload provides the content for an `AlertDialog` with 2 buttons to confirm or dismiss an action.
`Unit`	`@Composable AnimatedPage( pageIndex: Int, pagerState: PagerState, contentScrimColor: Color, content: @Composable () -> Unit )` Animates a page within a Pager with a scaling and scrim effect based on its position.
`Unit`	`@Composable @RequiresApi(value = 31) AnimatedText( text: String, fontRegistry: AnimatedTextFontRegistry, progressFraction: () -> Float, modifier: Modifier, contentAlignment: Alignment )` A composable that displays an animated text.
`Unit`	`@Composable AppCard( appName: @Composable RowScope.() -> Unit, title: @Composable RowScope.() -> Unit, modifier: Modifier, shape: Shape, colors: CardColors, border: BorderStroke?, contentPadding: PaddingValues, transformation: SurfaceTransformation?, appImage: (@Composable RowScope.() -> Unit)?, time: (@Composable RowScope.() -> Unit)?, content: @Composable ColumnScope.() -> Unit )` Opinionated Wear Material 3 `Card` that offers a specific 5 slot layout to show information about an application, e.g. a notification.
`Unit`	@Composable AppCard( onClick: () -> Unit, appName: @Composable RowScope.() -> Unit, title: @Composable RowScope.() -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shape: Shape, colors: CardColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, appImage: (@Composable RowScope.() -> Unit)?, time: (@Composable RowScope.() -> Unit)?, content: @Composable ColumnScope.() -> Unit ) Opinionated Wear Material 3 `Card` that offers a specific 5 slot layout to show information about an application, e.g. a notification.
`Unit`	`@Composable AppScaffold( modifier: Modifier, timeText: @Composable () -> Unit, containerColor: Color, contentColor: Color, content: @Composable BoxScope.() -> Unit )` `AppScaffold` is one of the Wear Material3 scaffold components.
`Unit`	`@Composable ArcProgressIndicator( modifier: Modifier, startAngle: Float, endAngle: Float, angularDirection: AngularDirection, colors: ProgressIndicatorColors, strokeWidth: Dp, gapSize: Dp )` Indeterminate Material Design arc progress indicator.
`Unit`	`@Composable Button( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shape: Shape, colors: ButtonColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, content: @Composable RowScope.() -> Unit )` Base level Wear Material3 `Button` that offers a single slot to take any content.
`Unit`	@Composable Button( onClick: () -> Unit, containerPainter: Painter, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, disabledContainerPainter: Painter, shape: Shape, colors: ButtonColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, content: @Composable RowScope.() -> Unit ) Base level Wear Material3 `Button` that offers parameters for container image backgrounds, with a single slot to take any content.
`Unit`	@Composable Button( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, secondaryLabel: (@Composable RowScope.() -> Unit)?, icon: (@Composable BoxScope.() -> Unit)?, enabled: Boolean, shape: Shape, colors: ButtonColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, label: @Composable RowScope.() -> Unit ) Wear Material3 `Button` that offers three slots and a specific layout for an icon, label and secondaryLabel.
`Unit`	@Composable Button( onClick: () -> Unit, containerPainter: Painter, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, secondaryLabel: (@Composable RowScope.() -> Unit)?, icon: (@Composable BoxScope.() -> Unit)?, enabled: Boolean, disabledContainerPainter: Painter, shape: Shape, colors: ButtonColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, label: @Composable RowScope.() -> Unit ) Wear Material3 `Button` that offers parameters for container image backgrounds, with three slots and a specific layout for an icon, label and secondaryLabel.
`Unit`	`@Composable ButtonGroup( modifier: Modifier, spacing: Dp, expansionWidth: Dp, contentPadding: PaddingValues, verticalAlignment: Alignment.Vertical, content: @Composable ButtonGroupScope.() -> Unit )` Layout component to implement an expressive group of buttons in a row, that react to touch by growing the touched button, (while the neighbor(s) shrink to accommodate and keep the group width constant).
`Unit`	`@Composable Card( modifier: Modifier, shape: Shape, colors: CardColors, border: BorderStroke?, contentPadding: PaddingValues, transformation: SurfaceTransformation?, content: @Composable ColumnScope.() -> Unit )` Base level Wear Material 3 `Card` that offers a single slot to take any content.
`Unit`	`@Composable Card( containerPainter: Painter, modifier: Modifier, shape: Shape, colors: CardColors, border: BorderStroke?, contentPadding: PaddingValues, transformation: SurfaceTransformation?, content: @Composable ColumnScope.() -> Unit )` Wear Material 3 `Card` that takes a container painter for drawing a background image, and offers a single slot to take any content.
`Unit`	`@Composable Card( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shape: Shape, colors: CardColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, content: @Composable ColumnScope.() -> Unit )` Base level Wear Material 3 `Card` that offers a single slot to take any content.
`Unit`	`@Composable Card( onClick: () -> Unit, containerPainter: Painter, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shape: Shape, colors: CardColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, content: @Composable ColumnScope.() -> Unit )` Wear Material 3 `Card` that takes a container painter for drawing a background image, and offers a single slot to take any content.
`Unit`	@Composable CheckboxButton( checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier, enabled: Boolean, shape: Shape, colors: CheckboxButtonColors, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, icon: (@Composable BoxScope.() -> Unit)?, secondaryLabel: (@Composable RowScope.() -> Unit)?, label: @Composable RowScope.() -> Unit ) The Wear Material `CheckboxButton` offers three slots and a specific layout for an icon, a label, and a secondaryLabel.
`Unit`	`@Composable ChildButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shape: Shape, colors: ButtonColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, content: @Composable RowScope.() -> Unit )` Base level Wear Material3 `ChildButton` that offers a single slot to take any content.
`Unit`	@Composable ChildButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, secondaryLabel: (@Composable RowScope.() -> Unit)?, icon: (@Composable BoxScope.() -> Unit)?, enabled: Boolean, shape: Shape, colors: ButtonColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, label: @Composable RowScope.() -> Unit ) Wear Material3 `ChildButton` that offers three slots and a specific layout for an icon, label and secondaryLabel.
`Unit`	`@Composable CircularProgressIndicator( modifier: Modifier, colors: ProgressIndicatorColors, strokeWidth: Dp, gapSize: Dp )` Indeterminate Material Design circular progress indicator.
`Unit`	`@Composable CircularProgressIndicator( progress: () -> Float, modifier: Modifier, enabled: Boolean, allowProgressOverflow: Boolean, startAngle: Float, endAngle: Float, colors: ProgressIndicatorColors, strokeWidth: Dp, gapSize: Dp )` Material Design circular progress indicator.
`Unit`	@Composable CompactButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, icon: (@Composable BoxScope.() -> Unit)?, enabled: Boolean, shape: Shape, colors: ButtonColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, label: (@Composable RowScope.() -> Unit)? ) A Wear Material3 `CompactButton` that offers two slots and a specific layout for an icon and label.
`Unit`	`@Composable ConfirmationDialog( visible: Boolean, onDismissRequest: () -> Unit, curvedText: (CurvedScope.() -> Unit)?, modifier: Modifier, colors: ConfirmationDialogColors, properties: DialogProperties, durationMillis: Long, content: @Composable () -> Unit )` Shows a transient `ConfirmationDialog` with an icon and optional very short `curvedText`.
`Unit`	`@Composable ConfirmationDialog( visible: Boolean, onDismissRequest: () -> Unit, text: (@Composable ColumnScope.() -> Unit)?, modifier: Modifier, colors: ConfirmationDialogColors, properties: DialogProperties, durationMillis: Long, content: @Composable () -> Unit )` Shows a transient `ConfirmationDialog` with an icon and optional short `text`.
`Unit`	`@Composable ConfirmationDialogContent( curvedText: (CurvedScope.() -> Unit)?, modifier: Modifier, colors: ConfirmationDialogColors, content: @Composable () -> Unit )` This overload of `ConfirmationDialogContent` provides the content for a `ConfirmationDialog` with an icon and optional very short `curvedText`.
`Unit`	`@Composable ConfirmationDialogContent( text: (@Composable ColumnScope.() -> Unit)?, modifier: Modifier, colors: ConfirmationDialogColors, content: @Composable () -> Unit )` This overload of `ConfirmationDialogContent` provides the content for a `ConfirmationDialog` with with an icon and optional short `text`.
`Unit`	`@RequiresApi(value = 26) @Composable DatePicker( initialDate: LocalDate, onDatePicked: (LocalDate) -> Unit, modifier: Modifier, minValidDate: LocalDate?, maxValidDate: LocalDate?, datePickerType: DatePickerType, colors: DatePickerColors )` Full screen `DatePicker` with day, month, year.
`Unit`	`@Composable Dialog( visible: Boolean, onDismissRequest: () -> Unit, modifier: Modifier, properties: DialogProperties, content: @Composable () -> Unit )` A base dialog component used by `AlertDialog` and `ConfirmationDialog` variations.
`Unit`	`@Composable EdgeButton( onClick: () -> Unit, modifier: Modifier, buttonSize: EdgeButtonSize, enabled: Boolean, colors: ButtonColors, border: BorderStroke?, interactionSource: MutableInteractionSource?, content: @Composable RowScope.() -> Unit )` Wear Material3 `EdgeButton` that offers a single slot to take any content.
`Unit`	@Composable FadingExpandingLabel( text: String, modifier: Modifier, color: Color, fontSize: TextUnit, fontStyle: FontStyle?, fontWeight: FontWeight?, fontFamily: FontFamily?, letterSpacing: TextUnit, textDecoration: TextDecoration?, textAlign: TextAlign?, lineHeight: TextUnit, softWrap: Boolean, maxLines: Int, minLines: Int, textStyle: TextStyle, animationSpec: FiniteAnimationSpec<Float> ) Animates label text for which the number of lines can vary, changing the size of the container component.
`Unit`	`@Composable FailureConfirmationDialog( visible: Boolean, onDismissRequest: () -> Unit, curvedText: (CurvedScope.() -> Unit)?, modifier: Modifier, colors: ConfirmationDialogColors, properties: DialogProperties, durationMillis: Long, content: @Composable () -> Unit )` Shows a `FailureConfirmationDialog` with a failure icon and an optional short curved text.
`Unit`	`@Composable FailureConfirmationDialogContent( curvedText: (CurvedScope.() -> Unit)?, modifier: Modifier, colors: ConfirmationDialogColors, content: @Composable () -> Unit )` `FailureConfirmationDialogContent` provides the content for a failure confirmation dialog with icon and an optional short curved text.
`Unit`	`@Composable FilledIconButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shapes: IconButtonShapes, colors: IconButtonColors, border: BorderStroke?, interactionSource: MutableInteractionSource?, content: @Composable BoxScope.() -> Unit )` Wear Material `FilledIconButton` is a circular, icon-only button with a colored background and a contrasting content color.
`Unit`	`@Composable FilledTonalButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shape: Shape, colors: ButtonColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, content: @Composable RowScope.() -> Unit )` Base level Wear Material3 `FilledTonalButton` that offers a single slot to take any content.
`Unit`	@Composable FilledTonalButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, secondaryLabel: (@Composable RowScope.() -> Unit)?, icon: (@Composable BoxScope.() -> Unit)?, enabled: Boolean, shape: Shape, colors: ButtonColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, label: @Composable RowScope.() -> Unit ) Wear Material3 `FilledTonalButton` that offers three slots and a specific layout for an icon, label and secondaryLabel.
`Unit`	`@Composable FilledTonalIconButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shapes: IconButtonShapes, colors: IconButtonColors, border: BorderStroke?, interactionSource: MutableInteractionSource?, content: @Composable BoxScope.() -> Unit )` Wear Material `FilledTonalIconButton` is a circular, icon-only button with a muted, colored background and a contrasting icon color.
`Unit`	`@Composable HorizontalPageIndicator( pagerState: PagerState, modifier: Modifier, selectedColor: Color, unselectedColor: Color, backgroundColor: Color )` Horizontal page indicator for use with `HorizontalPager`, representing the currently active page and the approximate number of pages.
`Unit`	`@Composable HorizontalPagerScaffold( pagerState: PagerState, modifier: Modifier, pageIndicator: (@Composable BoxScope.() -> Unit)?, pageIndicatorAnimationSpec: AnimationSpec<Float>?, content: @Composable () -> Unit )` `HorizontalPagerScaffold` is one of the Wear Material3 scaffold components.
`Unit`	`@Composable Icon( bitmap: ImageBitmap, contentDescription: String?, modifier: Modifier, tint: Color )` Icon component that draws `bitmap` using `tint`, defaulting to `LocalContentColor`.
`Unit`	`@Composable Icon( imageVector: ImageVector, contentDescription: String?, modifier: Modifier, tint: Color )` Icon component that draws `imageVector` using `tint`, defaulting to `LocalContentColor`.
`Unit`	`@Composable Icon( painter: Painter, contentDescription: String?, modifier: Modifier, tint: Color )` Icon component that draws a `painter` using `tint`, defaulting to `LocalContentColor`.
`Unit`	`@Composable IconButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shapes: IconButtonShapes, colors: IconButtonColors, border: BorderStroke?, interactionSource: MutableInteractionSource?, content: @Composable BoxScope.() -> Unit )` Wear Material `IconButton` is a circular, icon-only button with transparent background and no border.
`Unit`	`@Composable IconToggleButton( checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier, enabled: Boolean, colors: IconToggleButtonColors, interactionSource: MutableInteractionSource?, shapes: IconToggleButtonShapes, border: BorderStroke?, content: @Composable BoxScope.() -> Unit )` Wear Material `IconToggleButton` is a filled icon toggle button which switches between primary colors and tonal colors depending on `checked` value, and offers a single slot for icon or image.
`Unit`	`@Composable LevelIndicator( value: () -> Float, modifier: Modifier, enabled: Boolean, colors: LevelIndicatorColors, strokeWidth: Dp, sweepAngle: @FloatRange(from = 0.0, to = 360.0) Float, reverseDirection: Boolean )` Creates a `LevelIndicator` for screens that that control a setting such as volume with either rotating side button, rotating bezel.
`Unit`	`@Composable LinearProgressIndicator( progress: () -> Float, modifier: Modifier, colors: ProgressIndicatorColors, strokeWidth: Dp, enabled: Boolean )` Material Design linear progress indicator.
`Unit`	`@Composable ListHeader( modifier: Modifier, backgroundColor: Color, contentColor: Color, contentPadding: PaddingValues, transformation: SurfaceTransformation?, content: @Composable RowScope.() -> Unit )` A slot based composable for creating a list header item.
`Unit`	`@Composable ListSubHeader( modifier: Modifier, backgroundColor: Color, contentColor: Color, contentPadding: PaddingValues, transformation: SurfaceTransformation?, icon: (@Composable BoxScope.() -> Unit)?, label: @Composable RowScope.() -> Unit )` A two slot based composable for creating a list sub-header item.
`Unit`	`@Composable MaterialTheme( colorScheme: ColorScheme, typography: Typography, shapes: Shapes, motionScheme: MotionScheme, content: @Composable () -> Unit )` MaterialTheme defines the styling principles from the Wear Material3 design specification which extends the Material design specification.
`Unit`	`@Composable OpenOnPhoneDialog( visible: Boolean, onDismissRequest: () -> Unit, curvedText: (CurvedScope.() -> Unit)?, modifier: Modifier, colors: OpenOnPhoneDialogColors, properties: DialogProperties, durationMillis: Long, content: @Composable () -> Unit )` A full-screen dialog that displays an animated icon with a curved text at the bottom.
`Unit`	`@Composable OpenOnPhoneDialogContent( curvedText: (CurvedScope.() -> Unit)?, durationMillis: Long, modifier: Modifier, colors: OpenOnPhoneDialogColors, content: @Composable () -> Unit )` This composable provides the content for an `OpenOnPhoneDialog` that displays an animated icon with curved text at the bottom.
`Unit`	`@Composable OutlinedButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shape: Shape, colors: ButtonColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, content: @Composable RowScope.() -> Unit )` Base level Wear Material3 `OutlinedButton` that offers a single slot to take any content.
`Unit`	@Composable OutlinedButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, secondaryLabel: (@Composable RowScope.() -> Unit)?, icon: (@Composable BoxScope.() -> Unit)?, enabled: Boolean, shape: Shape, colors: ButtonColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, label: @Composable RowScope.() -> Unit ) Wear Material3 `OutlinedButton` that offers three slots and a specific layout for an icon, label and secondaryLabel.
`Unit`	`@Composable OutlinedCard( modifier: Modifier, shape: Shape, colors: CardColors, border: BorderStroke, contentPadding: PaddingValues, transformation: SurfaceTransformation?, content: @Composable ColumnScope.() -> Unit )` Outlined Wear Material 3 `Card` that offers a single slot to take any content.
`Unit`	`@Composable OutlinedCard( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shape: Shape, colors: CardColors, border: BorderStroke, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, content: @Composable ColumnScope.() -> Unit )` Outlined Wear Material 3 `Card` that offers a single slot to take any content.
`Unit`	`@Composable OutlinedIconButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shapes: IconButtonShapes, colors: IconButtonColors, border: BorderStroke?, interactionSource: MutableInteractionSource?, content: @Composable BoxScope.() -> Unit )` Wear Material `OutlinedIconButton` is a circular, icon-only button with a transparent background, contrasting icon color and border.
`Unit`	@Composable Picker( state: PickerState, contentDescription: (() -> String)?, modifier: Modifier, readOnly: Boolean, readOnlyLabel: (@Composable BoxScope.() -> Unit)?, onSelected: () -> Unit, verticalSpacing: Dp, gradientRatio: @FloatRange(from = 0.0, to = 0.5) Float, gradientColor: Color, userScrollEnabled: Boolean, rotaryScrollableBehavior: RotaryScrollableBehavior?, option: @Composable PickerScope.(index: Int) -> Unit ) A scrollable list of items to pick from.
`Unit`	`@Composable PickerGroup( modifier: Modifier, selectedPickerState: PickerState?, autoCenter: Boolean, propagateMinConstraints: Boolean, content: @Composable PickerGroupScope.() -> Unit )` A group of `Picker`s to build components where multiple pickers are required to be combined together.
`Unit`	`@Composable ProvideTextStyle(value: TextStyle, content: @Composable () -> 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.
`Unit`	@Composable RadioButton( selected: Boolean, onSelect: () -> Unit, modifier: Modifier, enabled: Boolean, shape: Shape, colors: RadioButtonColors, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, icon: (@Composable BoxScope.() -> Unit)?, secondaryLabel: (@Composable RowScope.() -> Unit)?, label: @Composable RowScope.() -> Unit ) The Wear Material `RadioButton` offers slots and a specific layout for an icon, a label and a secondaryLabel.
`Unit`	`@Composable ScreenScaffold( modifier: Modifier, scrollInfoProvider: ScrollInfoProvider?, contentPadding: PaddingValues, timeText: (@Composable () -> Unit)?, scrollIndicator: (@Composable BoxScope.() -> Unit)?, overscrollEffect: OverscrollEffect?, content: @Composable BoxScope.(PaddingValues) -> Unit )` `ScreenScaffold` is one of the Wear Material3 scaffold components.
`Unit`	`@Composable ScreenScaffold( scrollState: LazyListState, modifier: Modifier, contentPadding: PaddingValues, timeText: (@Composable () -> Unit)?, scrollIndicator: (@Composable BoxScope.() -> Unit)?, overscrollEffect: OverscrollEffect?, content: @Composable BoxScope.(PaddingValues) -> Unit )` `ScreenScaffold` is one of the Wear Material3 scaffold components.
`Unit`	`@Composable ScreenScaffold( scrollState: ScalingLazyListState, modifier: Modifier, contentPadding: PaddingValues, timeText: (@Composable () -> Unit)?, scrollIndicator: (@Composable BoxScope.() -> Unit)?, overscrollEffect: OverscrollEffect?, content: @Composable BoxScope.(PaddingValues) -> Unit )` `ScreenScaffold` is one of the Wear Material3 scaffold components.
`Unit`	`@Composable ScreenScaffold( scrollState: ScrollState, modifier: Modifier, contentPadding: PaddingValues, timeText: (@Composable () -> Unit)?, scrollIndicator: (@Composable BoxScope.() -> Unit)?, overscrollEffect: OverscrollEffect?, content: @Composable BoxScope.(PaddingValues) -> Unit )` `ScreenScaffold` is one of the Wear Material3 scaffold components.
`Unit`	`@Composable ScreenScaffold( scrollState: TransformingLazyColumnState, modifier: Modifier, contentPadding: PaddingValues, timeText: (@Composable () -> Unit)?, scrollIndicator: (@Composable BoxScope.() -> Unit)?, overscrollEffect: OverscrollEffect?, content: @Composable BoxScope.(PaddingValues) -> Unit )` `ScreenScaffold` is one of the Wear Material3 scaffold components.
`Unit`	`@Composable ScreenScaffold( scrollInfoProvider: ScrollInfoProvider, edgeButton: @Composable BoxScope.() -> Unit, modifier: Modifier, contentPadding: PaddingValues, timeText: (@Composable () -> Unit)?, scrollIndicator: (@Composable BoxScope.() -> Unit)?, edgeButtonSpacing: Dp, overscrollEffect: OverscrollEffect?, content: @Composable BoxScope.(PaddingValues) -> Unit )` `ScreenScaffold` is one of the Wear Material3 scaffold components.
`Unit`	`@Composable ScreenScaffold( scrollState: LazyListState, edgeButton: @Composable BoxScope.() -> Unit, modifier: Modifier, contentPadding: PaddingValues, timeText: (@Composable () -> Unit)?, scrollIndicator: (@Composable BoxScope.() -> Unit)?, overscrollEffect: OverscrollEffect?, edgeButtonSpacing: Dp, content: @Composable BoxScope.(PaddingValues) -> Unit )` `ScreenScaffold` is one of the Wear Material3 scaffold components.
`Unit`	`@Composable ScreenScaffold( scrollState: ScalingLazyListState, edgeButton: @Composable BoxScope.() -> Unit, modifier: Modifier, contentPadding: PaddingValues, timeText: (@Composable () -> Unit)?, scrollIndicator: (@Composable BoxScope.() -> Unit)?, edgeButtonSpacing: Dp, overscrollEffect: OverscrollEffect?, content: @Composable BoxScope.(PaddingValues) -> Unit )` `ScreenScaffold` is one of the Wear Material3 scaffold components.
`Unit`	`@Composable ScreenScaffold( scrollState: TransformingLazyColumnState, edgeButton: @Composable BoxScope.() -> Unit, modifier: Modifier, contentPadding: PaddingValues, timeText: (@Composable () -> Unit)?, scrollIndicator: (@Composable BoxScope.() -> Unit)?, edgeButtonSpacing: Dp, overscrollEffect: OverscrollEffect?, content: @Composable BoxScope.(PaddingValues) -> Unit )` `ScreenScaffold` is one of the Wear Material3 scaffold components.
`Unit`	`@Composable ScrollIndicator( state: LazyListState, modifier: Modifier, colors: ScrollIndicatorColors, reverseDirection: Boolean, positionAnimationSpec: AnimationSpec<Float> )` A composable that displays a visual indicator of scrolling progress within a scrollable container.
`Unit`	`@Composable ScrollIndicator( state: ScalingLazyListState, modifier: Modifier, colors: ScrollIndicatorColors, reverseDirection: Boolean, positionAnimationSpec: AnimationSpec<Float> )` A composable that displays a visual indicator of scrolling progress within a scrollable container.
`Unit`	`@Composable ScrollIndicator( state: ScrollState, modifier: Modifier, colors: ScrollIndicatorColors, reverseDirection: Boolean, positionAnimationSpec: AnimationSpec<Float> )` A composable that displays a visual indicator of scrolling progress within a scrollable container.
`Unit`	`@Composable ScrollIndicator( state: TransformingLazyColumnState, modifier: Modifier, colors: ScrollIndicatorColors, reverseDirection: Boolean, positionAnimationSpec: AnimationSpec<Float> )` A composable that displays a visual indicator of scrolling progress within a scrollable container.
`Unit`	`@Composable SegmentedCircularProgressIndicator( segmentCount: @IntRange(from = 1) Int, segmentValue: (segmentIndex: Int) -> Boolean, modifier: Modifier, startAngle: Float, endAngle: Float, colors: ProgressIndicatorColors, strokeWidth: Dp, gapSize: Dp, enabled: Boolean )` Material Design segmented circular progress indicator.
`Unit`	`@Composable SegmentedCircularProgressIndicator( segmentCount: @IntRange(from = 1) Int, progress: () -> Float, modifier: Modifier, allowProgressOverflow: Boolean, startAngle: Float, endAngle: Float, colors: ProgressIndicatorColors, strokeWidth: Dp, gapSize: Dp, enabled: Boolean )` Material Design segmented circular progress indicator.
`Unit`	`@Composable Slider( value: Int, onValueChange: (Int) -> Unit, valueProgression: IntProgression, modifier: Modifier, decreaseIcon: @Composable () -> Unit, increaseIcon: @Composable () -> Unit, enabled: Boolean, segmented: Boolean, shape: Shape, colors: SliderColors )` `Slider` allows users to make a selection from a range of values.
`Unit`	`@Composable Slider( value: Float, onValueChange: (Float) -> Unit, steps: Int, modifier: Modifier, decreaseIcon: @Composable () -> Unit, increaseIcon: @Composable () -> Unit, enabled: Boolean, valueRange: ClosedFloatingPointRange<Float>, segmented: Boolean, shape: Shape, colors: SliderColors )` `Slider` allows users to make a selection from a range of values.
`Unit`	@Composable SplitCheckboxButton( checked: Boolean, onCheckedChange: (Boolean) -> Unit, toggleContentDescription: String?, onContainerClick: () -> Unit, modifier: Modifier, enabled: Boolean, shape: Shape, colors: SplitCheckboxButtonColors, toggleInteractionSource: MutableInteractionSource?, containerInteractionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, containerClickLabel: String?, contentPadding: PaddingValues, secondaryLabel: (@Composable RowScope.() -> Unit)?, label: @Composable RowScope.() -> Unit ) The Wear Material `SplitCheckboxButton` offers slots and a specific layout for a label and secondaryLabel.
`Unit`	@Composable SplitRadioButton( selected: Boolean, onSelectionClick: () -> Unit, selectionContentDescription: String?, onContainerClick: () -> Unit, modifier: Modifier, enabled: Boolean, shape: Shape, colors: SplitRadioButtonColors, selectionInteractionSource: MutableInteractionSource?, containerInteractionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, containerClickLabel: String?, contentPadding: PaddingValues, secondaryLabel: (@Composable RowScope.() -> Unit)?, label: @Composable RowScope.() -> Unit ) The Wear Material `SplitRadioButton` offers two slots and a specific layout for a label and secondaryLabel.
`Unit`	@Composable SplitSwitchButton( checked: Boolean, onCheckedChange: (Boolean) -> Unit, toggleContentDescription: String?, onContainerClick: () -> Unit, modifier: Modifier, enabled: Boolean, shape: Shape, colors: SplitSwitchButtonColors, toggleInteractionSource: MutableInteractionSource?, containerInteractionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, containerClickLabel: String?, contentPadding: PaddingValues, secondaryLabel: (@Composable RowScope.() -> Unit)?, label: @Composable RowScope.() -> Unit ) The Wear Material `SplitSwitchButton` offers slots and a specific layout for a label and secondary label.
`Unit`	`@Composable Stepper( value: Int, onValueChange: (Int) -> Unit, valueProgression: IntProgression, decreaseIcon: @Composable () -> Unit, increaseIcon: @Composable () -> Unit, modifier: Modifier, enabled: Boolean, colors: StepperColors, content: @Composable BoxScope.() -> Unit )` `Stepper` allows users to make a selection from a range of values.
`Unit`	`@Composable Stepper( value: Float, onValueChange: (Float) -> Unit, steps: Int, decreaseIcon: @Composable () -> Unit, increaseIcon: @Composable () -> Unit, modifier: Modifier, enabled: Boolean, valueRange: ClosedFloatingPointRange<Float>, colors: StepperColors, content: @Composable BoxScope.() -> Unit )` `Stepper` allows users to make a selection from a range of values.
`Unit`	`@Composable StepperLevelIndicator( value: () -> Float, modifier: Modifier, valueRange: ClosedFloatingPointRange<Float>, enabled: Boolean, colors: LevelIndicatorColors, strokeWidth: Dp, sweepAngle: @FloatRange(from = 0.0, to = 360.0) Float, reverseDirection: Boolean )` Creates a `StepperLevelIndicator` for screens that that control a setting, such as volume, with a `Stepper`.
`Unit`	`@Composable StepperLevelIndicator( value: () -> Int, valueProgression: IntProgression, modifier: Modifier, enabled: Boolean, colors: LevelIndicatorColors, strokeWidth: Dp, sweepAngle: @FloatRange(from = 0.0, to = 360.0) Float, reverseDirection: Boolean )` Creates a `StepperLevelIndicator` for screens that that control a setting, such as volume, with a `Stepper`.
`Unit`	`@Composable SuccessConfirmationDialog( visible: Boolean, onDismissRequest: () -> Unit, curvedText: (CurvedScope.() -> Unit)?, modifier: Modifier, colors: ConfirmationDialogColors, properties: DialogProperties, durationMillis: Long, content: @Composable () -> Unit )` Shows a `SuccessConfirmationDialog` dialog with a success icon and optional short curved text.
`Unit`	`@Composable SuccessConfirmationDialogContent( curvedText: (CurvedScope.() -> Unit)?, modifier: Modifier, colors: ConfirmationDialogColors, content: @Composable () -> Unit )` `SuccessConfirmationDialogContent` provides the content for a success confirmation dialog with a success icon and optional short curved text.
`Unit`	`@Composable SwipeToDismissBox( state: SwipeToDismissBoxState, modifier: Modifier, backgroundScrimColor: Color, contentScrimColor: Color, backgroundKey: Any, contentKey: Any, userSwipeEnabled: Boolean, content: @Composable BoxScope.(isBackground: Boolean) -> Unit )` Wear Material 3 `SwipeToDismissBox` that handles the swipe-to-dismiss gesture.
`Unit`	`@Composable SwipeToDismissBox( onDismissed: () -> Unit, modifier: Modifier, state: SwipeToDismissBoxState, backgroundScrimColor: Color, contentScrimColor: Color, backgroundKey: Any, contentKey: Any, userSwipeEnabled: Boolean, content: @Composable BoxScope.(isBackground: Boolean) -> Unit )` Wear Material 3 `SwipeToDismissBox` that handles the swipe-to-dismiss gesture.
`Unit`	@Composable SwipeToReveal( primaryAction: @Composable SwipeToRevealScope.() -> Unit, onSwipePrimaryAction: () -> Unit, modifier: Modifier, secondaryAction: (@Composable SwipeToRevealScope.() -> Unit)?, undoPrimaryAction: (@Composable SwipeToRevealScope.() -> Unit)?, undoSecondaryAction: (@Composable SwipeToRevealScope.() -> Unit)?, revealState: RevealState, revealDirection: RevealDirection, hasPartiallyRevealedState: Boolean, gestureInclusion: GestureInclusion, content: @Composable () -> Unit ) `SwipeToReveal` Material composable.
`Unit`	@Composable SwitchButton( checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier, enabled: Boolean, shape: Shape, colors: SwitchButtonColors, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, icon: (@Composable BoxScope.() -> Unit)?, secondaryLabel: (@Composable RowScope.() -> Unit)?, label: @Composable RowScope.() -> Unit ) The Wear Material `SwitchButton` offers three slots and a specific layout for an icon, a label, and a secondaryLabel.
`Unit`	@Composable Text( text: String, modifier: Modifier, color: Color, fontSize: TextUnit, fontStyle: FontStyle?, fontWeight: FontWeight?, fontFamily: FontFamily?, letterSpacing: TextUnit, textDecoration: TextDecoration?, textAlign: TextAlign?, lineHeight: TextUnit, overflow: TextOverflow, softWrap: Boolean, maxLines: Int, minLines: Int, onTextLayout: (TextLayoutResult) -> Unit, style: TextStyle ) High level element that displays text and provides semantics / accessibility information.
`Unit`	@Composable Text( text: AnnotatedString, modifier: Modifier, color: Color, fontSize: TextUnit, fontStyle: FontStyle?, fontWeight: FontWeight?, fontFamily: FontFamily?, letterSpacing: TextUnit, textDecoration: TextDecoration?, textAlign: TextAlign?, lineHeight: TextUnit, overflow: TextOverflow, softWrap: Boolean, maxLines: Int, minLines: Int, inlineContent: Map<String, InlineTextContent>, onTextLayout: (TextLayoutResult) -> Unit, style: TextStyle ) High level element that displays text and provides semantics / accessibility information.
`Unit`	`@Composable TextButton( onClick: () -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, enabled: Boolean, shapes: TextButtonShapes, colors: TextButtonColors, border: BorderStroke?, interactionSource: MutableInteractionSource?, content: @Composable BoxScope.() -> Unit )` Wear Material `TextButton` is a circular, text-only button with transparent background and no border.
`Unit`	`@Composable TextToggleButton( checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier, enabled: Boolean, colors: TextToggleButtonColors, interactionSource: MutableInteractionSource?, shapes: TextToggleButtonShapes, border: BorderStroke?, content: @Composable BoxScope.() -> Unit )` Wear Material `TextToggleButton` is a filled text toggle button which switches between primary colors and tonal colors depending on `checked` value, and offers a single slot for text.
`Unit`	`@RequiresApi(value = 26) @Composable TimePicker( initialTime: LocalTime, onTimePicked: (LocalTime) -> Unit, modifier: Modifier, timePickerType: TimePickerType, colors: TimePickerColors, initialSelection: TimePickerSelection )` A full screen TimePicker with configurable columns that allows users to select a time.
`Unit`	`@Composable TimeText( modifier: Modifier, curvedModifier: CurvedModifier, maxSweepAngle: Float, backgroundColor: Color, timeSource: TimeSource, contentPadding: PaddingValues, content: CurvedScope.(String) -> Unit )` Layout to show the current time and a label, they will be drawn in a curve, following the top edge of the screen.
`Unit`	`@Composable TitleCard( title: @Composable RowScope.() -> Unit, modifier: Modifier, time: (@Composable () -> Unit)?, subtitle: (@Composable ColumnScope.() -> Unit)?, shape: Shape, colors: CardColors, border: BorderStroke?, contentPadding: PaddingValues, transformation: SurfaceTransformation?, content: (@Composable () -> Unit)? )` Opinionated Wear Material 3 `Card` that offers a specific layout to show interactive information about an application, e.g. a message.
`Unit`	`@Composable TitleCard( containerPainter: Painter, title: @Composable RowScope.() -> Unit, modifier: Modifier, time: (@Composable () -> Unit)?, subtitle: (@Composable ColumnScope.() -> Unit)?, shape: Shape, colors: CardColors, border: BorderStroke?, contentPadding: PaddingValues, transformation: SurfaceTransformation?, content: (@Composable () -> Unit)? )` This `TitleCard` overload supports an image container background and provides an opinionated Wear Material 3 `Card` with a specific layout to show interactive information about an application, similar to `TitleCard`.
`Unit`	@Composable TitleCard( onClick: () -> Unit, title: @Composable RowScope.() -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, time: (@Composable () -> Unit)?, subtitle: (@Composable ColumnScope.() -> Unit)?, enabled: Boolean, shape: Shape, colors: CardColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, content: (@Composable () -> Unit)? ) Opinionated Wear Material 3 `Card` that offers a specific layout to show interactive information about an application, e.g. a message.
`Unit`	@Composable TitleCard( onClick: () -> Unit, containerPainter: Painter, title: @Composable RowScope.() -> Unit, modifier: Modifier, onLongClick: (() -> Unit)?, onLongClickLabel: String?, time: (@Composable () -> Unit)?, subtitle: (@Composable ColumnScope.() -> Unit)?, enabled: Boolean, shape: Shape, colors: CardColors, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, transformation: SurfaceTransformation?, content: (@Composable () -> Unit)? ) This `TitleCard` overload supports an image container background and provides an opinionated Wear Material 3 `Card` with a specific layout to show interactive information about an application, similar to `TitleCard`.
`Unit`	`@Composable VerticalPageIndicator( pagerState: PagerState, modifier: Modifier, selectedColor: Color, unselectedColor: Color, backgroundColor: Color )` Vertical page indicator for use with `VerticalPager`, representing the currently active page and the approximate number of pages.
`Unit`	`@Composable VerticalPagerScaffold( pagerState: PagerState, modifier: Modifier, pageIndicator: (@Composable BoxScope.() -> Unit)?, pageIndicatorAnimationSpec: AnimationSpec<Float>?, content: @Composable () -> Unit )` `VerticalPagerScaffold` is one of the Wear Material3 scaffold components.
`Color`	`@Composable contentColorFor(backgroundColor: Color)` The Material color system contains pairs of colors that are typically used for the background and content color inside a component.
`ColorScheme?`	`dynamicColorScheme(context: Context)` Creates a dynamic color scheme.
`AnimatedTextFontRegistry`	`@Composable @RequiresApi(value = 31) rememberAnimatedTextFontRegistry( startFontVariationSettings: FontVariation.Settings, endFontVariationSettings: FontVariation.Settings, textStyle: TextStyle, startFontSize: TextUnit, endFontSize: TextUnit )` Generates an `AnimatedTextFontRegistry` to use within composition.
`PickerState`	`@Composable rememberPickerState( initialNumberOfOptions: @IntRange(from = 1) Int, initiallySelectedIndex: @IntRange(from = 0) Int, shouldRepeatOptions: Boolean )` Creates a `PickerState` that is remembered across compositions.
`PlaceholderState`	`@Composable rememberPlaceholderState(isVisible: Boolean)` Creates a `PlaceholderState` that is remembered across compositions.
`RevealState`	`@Composable rememberRevealState(initialValue: RevealValue)` Create and `remember` a `RevealState`.
`IndicationNodeFactory`	`ripple(bounded: Boolean, radius: Dp, color: Color)` Creates a Ripple using the provided values and values inferred from the theme.
`IndicationNodeFactory`	`ripple(color: ColorProducer, bounded: Boolean, radius: Dp)` Creates a Ripple using the provided values and values inferred from the theme.

Extension functions summary

`SurfaceTransformation`	`TransformingLazyColumnItemScope.SurfaceTransformation( spec: TransformationSpec )` Exposes `androidx.wear.compose.material3.lazy.TransformationSpec` as `SurfaceTransformation` to be used with Material components.
`Unit`	`CurvedScope.confirmationDialogCurvedText( text: String, style: CurvedTextStyle )` A customized variation of `androidx.wear.compose.material3.curvedText` that displays text along a curved path.
`Color`	`ColorScheme.contentColorFor(backgroundColor: Color)` The Material color system contains pairs of colors that are typically used for the background and content color inside a component.
`Unit`	CurvedScope.curvedText( text: String, modifier: CurvedModifier, maxSweepAngle: Float, background: Color, color: Color, fontSize: TextUnit, fontFamily: FontFamily?, fontWeight: FontWeight?, fontStyle: FontStyle?, fontSynthesis: FontSynthesis?, letterSpacing: TextUnit, letterSpacingCounterClockwise: TextUnit, style: CurvedTextStyle?, angularDirection: CurvedDirection.Angular?, overflow: TextOverflow ) CurvedText is a component allowing developers to easily write curved text following the curvature a circle (usually at the edge of a circular screen).
`Unit`	`DrawScope.drawCircularProgressIndicator( progress: Float, colors: ProgressIndicatorColors, strokeWidth: Dp, enabled: Boolean, allowProgressOverflow: Boolean, startAngle: Float, endAngle: Float, gapSize: Dp )` Draw a simple non-animating circular progress indicator.
`Modifier`	`Modifier.minimumInteractiveComponentSize()` Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller.
`Unit`	`CurvedScope.openOnPhoneDialogCurvedText( text: String, style: CurvedTextStyle )` A customized variation of `androidx.wear.compose.material3.curvedText` that displays text along a curved path.
`Modifier`	`@Composable Modifier.placeholder( placeholderState: PlaceholderState, shape: Shape, color: Color )` Modifier.placeholder draws a skeleton shape over a component, for situations when no provisional content (such as cached data) is available.
`Modifier`	`@Composable Modifier.placeholderShimmer( placeholderState: PlaceholderState, shape: Shape, color: Color )` Modifier.placeholderShimmer draws a periodic shimmer over content, indicating to the user that contents are loading or potentially out of date.
`Modifier`	`Modifier.rangeSemantics( value: Float, enabled: Boolean, onValueChange: (Float) -> Unit, valueRange: ClosedFloatingPointRange<Float>, steps: Int )` Modifier to add semantics signifying progress of the Stepper/Slider.
`Modifier`	`Modifier.scrollAway( scrollInfoProvider: ScrollInfoProvider, screenStage: () -> ScreenStage )` Scroll an item vertically in/out of view based on scroll state provided by a scrolling list.
`Unit`	`CurvedScope.timeTextCurvedText(time: String, style: CurvedTextStyle?)` Default curved text to use in a `TimeText`, for displaying the time
`Unit`	`CurvedScope.timeTextSeparator( curvedTextStyle: CurvedTextStyle?, contentArcPadding: ArcPaddingValues )` A default implementation of Separator, to be shown between any text/composable and the time.
`Modifier`	`Modifier.touchTargetAwareSize(size: Dp)` Modifier to set both the size and recommended touch target for `IconButton` and TextButton.

Top-level properties summary

`ProvidableCompositionLocal<Color>`	`LocalContentColor` CompositionLocal containing the preferred content color for a given position in the hierarchy.
`ProvidableCompositionLocal<TextConfiguration>`	`LocalTextConfiguration` CompositionLocal containing the preferred `TextConfiguration` that will be used by `Text` components by default consisting of text alignment, overflow specification and max lines.
`ProvidableCompositionLocal<TextStyle>`	`LocalTextStyle` CompositionLocal containing the preferred `TextStyle` that will be used by `Text` components by default.

Top-level functions

AlertDialog

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun AlertDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    icon: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: PaddingValues = if (icon != null) {
            AlertDialogDefaults.contentWithIconPadding()
        } else {
            AlertDialogDefaults.contentPadding()
        },
    properties: DialogProperties = DialogProperties(),
    content: (ScalingLazyListScope.() -> Unit)? = null
): Unit

Dialogs provide important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task. The dialog is scrollable by default if the content exceeds the viewport height.

This overload doesn't have any dedicated slots for buttons. It has a content slot so that the caller has flexibility in how to seek user input. In most cases, we recommend using other AlertDialog variations with 2 confirm/dismiss buttons or a single confirmation button.

Where user input is not required, such as displaying a transient success or failure message, use ConfirmationDialog, SuccessConfirmationDialog or FailureConfirmationDialog instead.

Parameters
`visible: Boolean`	A boolean indicating whether the dialog should be displayed.
`onDismissRequest: () -> Unit`	A lambda function to be called when the dialog is dismissed by swiping to the right or by other dismiss action. Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting `visible` to false.
`title: @Composable () -> Unit`	A slot for displaying the title of the dialog. Title should contain a summary of the dialog's purpose or content and should not exceed 3 lines of text. By default, `TextOverflow.Ellipsis` will be applied when text exceeds 3 lines.
`modifier: Modifier = Modifier`	Modifier to be applied to the dialog content.
`icon: (@Composable () -> Unit)? = null`	Optional slot for an icon to be shown at the top of the dialog.
`text: (@Composable () -> Unit)? = null`	Optional slot for displaying the message of the dialog below the title. Should contain additional text that presents further details about the dialog's purpose if the title is insufficient.
`verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement`	The vertical arrangement of the dialog's children. There is a default padding between icon, title, and text, which will be added to the spacing specified in this `verticalArrangement` parameter.
`contentPadding: PaddingValues = if (icon != null) { AlertDialogDefaults.contentWithIconPadding() } else { AlertDialogDefaults.contentPadding() }`	The padding to apply around the entire dialog's contents. It is recommended to use the defaults, which adjust to reduce the top padding when an icon is present.
`properties: DialogProperties = DialogProperties()`	An optional `DialogProperties` object for configuring the dialog's behavior.
`content: (ScalingLazyListScope.() -> Unit)? = null`	A slot for additional content, displayed within a scrollable `ScalingLazyColumn`. Any buttons added in this slot that are intended to dismiss the dialog must remove the dialog from the composition hierarchy e.g. by setting `visible` to false.

AlertDialog

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun AlertDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    edgeButton: @Composable BoxScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    icon: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: PaddingValues = if (icon != null) {
            AlertDialogDefaults.contentWithIconPadding()
        } else {
            AlertDialogDefaults.contentPadding()
        },
    properties: DialogProperties = DialogProperties(),
    content: (ScalingLazyListScope.() -> Unit)? = null
): Unit

This overload has a single slot for a confirm EdgeButton at the bottom of the dialog. It should be used when the user will be presented with a single acknowledgement.

Where user input is not required, such as displaying a transient success or failure message, use ConfirmationDialog, SuccessConfirmationDialog or FailureConfirmationDialog instead.

Example of an AlertDialog with an icon, title, text and bottom EdgeButton:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.AccountCircle
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.material3.AlertDialog
import androidx.wear.compose.material3.AlertDialogDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text

var showDialog by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showDialog = true },
        label = { Text("Show Dialog") },
    )
}

AlertDialog(
    visible = showDialog,
    onDismissRequest = { showDialog = false },
    icon = {
        Icon(
            Icons.Rounded.AccountCircle,
            modifier = Modifier.size(32.dp),
            contentDescription = null,
            tint = MaterialTheme.colorScheme.primary,
        )
    },
    title = { Text("Mobile network is not currently available") },
    edgeButton = {
        AlertDialogDefaults.EdgeButton(
            onClick = {
                // Perform confirm action here
                showDialog = false
            }
        )
    },
)

Example of an AlertDialog with content groups and a bottom EdgeButton:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.AlertDialog
import androidx.wear.compose.material3.AlertDialogDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.SwitchButton
import androidx.wear.compose.material3.Text

var showDialog by remember { mutableStateOf(false) }
var weatherEnabled by remember { mutableStateOf(false) }
var calendarEnabled by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showDialog = true },
        label = { Text("Show Dialog") },
    )
}
AlertDialog(
    visible = showDialog,
    onDismissRequest = { showDialog = false },
    title = { Text("Share your location") },
    text = { Text(" The following apps have asked you to share your location") },
    edgeButton = {
        AlertDialogDefaults.EdgeButton(
            onClick = {
                // Perform confirm action here
                showDialog = false
            }
        ) {
            Text("Share once")
        }
    },
) {
    item {
        SwitchButton(
            modifier = Modifier.fillMaxWidth(),
            checked = weatherEnabled,
            onCheckedChange = { weatherEnabled = it },
            label = { Text("Weather") },
        )
    }
    item {
        SwitchButton(
            modifier = Modifier.fillMaxWidth(),
            checked = calendarEnabled,
            onCheckedChange = { calendarEnabled = it },
            label = { Text("Calendar") },
        )
    }
    item { AlertDialogDefaults.GroupSeparator() }
    item {
        FilledTonalButton(
            modifier = Modifier.fillMaxWidth(),
            onClick = {},
            label = { Text(modifier = Modifier.fillMaxWidth(), text = "Never share") },
        )
    }
    item {
        FilledTonalButton(
            modifier = Modifier.fillMaxWidth(),
            onClick = {},
            label = { Text(modifier = Modifier.fillMaxWidth(), text = "Share always") },
        )
    }
}

Parameters
`visible: Boolean`	A boolean indicating whether the dialog should be displayed.
`onDismissRequest: () -> Unit`	A lambda function to be called when the dialog is dismissed by swiping to the right or by other dismiss action. Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting `visible` to false.
`edgeButton: @Composable BoxScope.() -> Unit`	Slot for an `EdgeButton` indicating positive sentiment. Clicking the button must remove the dialog from the composition hierarchy e.g. by setting `visible` to false. It's recommended to use `AlertDialogDefaults.EdgeButton` in this slot with onClick callback. Note that when using an `EdgeButton` which is not Medium size, the contentPadding parameters should be specified.
`title: @Composable () -> Unit`	A slot for displaying the title of the dialog. Title should contain a summary of the dialog's purpose or content and should not exceed 3 lines of text.By default, `TextOverflow.Ellipsis` will be applied when text exceeds 3 lines.
`modifier: Modifier = Modifier`	Modifier to be applied to the dialog content.
`icon: (@Composable () -> Unit)? = null`	Optional slot for an icon to be shown at the top of the dialog.
`text: (@Composable () -> Unit)? = null`	Optional slot for displaying the message of the dialog below the title. Should contain additional text that presents further details about the dialog's purpose if the title is insufficient.
`verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement`	The vertical arrangement of the dialog's children. There is a default padding between icon, title, and text, which will be added to the spacing specified in this `verticalArrangement` parameter.
`contentPadding: PaddingValues = if (icon != null) { AlertDialogDefaults.contentWithIconPadding() } else { AlertDialogDefaults.contentPadding() }`	The padding to apply around the entire dialog's contents. Bottom padding will be ignored and default spacing for the `EdgeButton` will be used. It is recommended to use the defaults, which adjust to reduce the top padding when an icon is present.
`properties: DialogProperties = DialogProperties()`	An optional `DialogProperties` object for configuring the dialog's behavior.
`content: (ScalingLazyListScope.() -> Unit)? = null`	A slot for additional content, displayed within a scrollable `ScalingLazyColumn`. Any buttons added in this slot that are intended to dismiss the dialog must remove the dialog from the composition hierarchy e.g. by setting `visible` to false.

AlertDialog

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun AlertDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    confirmButton: @Composable RowScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: @Composable RowScope.() -> Unit = {
        AlertDialogDefaults.DismissButton(onDismissRequest)
    },
    icon: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: PaddingValues = if (icon != null) {
            AlertDialogDefaults.confirmDismissWithIconContentPadding()
        } else {
            AlertDialogDefaults.confirmDismissContentPadding()
        },
    properties: DialogProperties = DialogProperties(),
    content: (ScalingLazyListScope.() -> Unit)? = null
): Unit

AlertDialogs provide important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task. The AlertDialog is scrollable by default if the content exceeds the viewport height.

This overload has 2 IconButtons for confirmation and cancellation, placed horizontally at the bottom of the dialog. It should be used when the user will be presented with a binary decision, to either confirm or dismiss an action.

Where user input is not required, such as displaying a transient success or failure message, use ConfirmationDialog, SuccessConfirmationDialog or FailureConfirmationDialog instead.

Example of an AlertDialog with an icon, title and two buttons to confirm and dismiss:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.AccountCircle
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.material3.AlertDialog
import androidx.wear.compose.material3.AlertDialogDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text

var showDialog by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showDialog = true },
        label = { Text("Show Dialog") },
    )
}
AlertDialog(
    visible = showDialog,
    onDismissRequest = { showDialog = false },
    icon = {
        Icon(
            Icons.Rounded.AccountCircle,
            modifier = Modifier.size(32.dp),
            contentDescription = null,
            tint = MaterialTheme.colorScheme.primary,
        )
    },
    title = { Text("Enable Battery Saver Mode?") },
    text = { Text("Your battery is low. Turn on battery saver.") },
    confirmButton = {
        AlertDialogDefaults.ConfirmButton(
            onClick = {
                // Perform confirm action here
                showDialog = false
            }
        )
    },
    dismissButton = {
        AlertDialogDefaults.DismissButton(
            onClick = {
                // Perform dismiss action here
                showDialog = false
            }
        )
    },
)

Parameters
`visible: Boolean`	A boolean indicating whether the dialog should be displayed.
`onDismissRequest: () -> Unit`	A lambda function to be called when the dialog is dismissed by swiping right (typically also called by the `dismissButton`). Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting `visible` to false.
`confirmButton: @Composable RowScope.() -> Unit`	A slot for a `Button` indicating positive sentiment. Clicking the button must remove the dialog from the composition hierarchy e.g. by setting `visible` to false. It's recommended to use `AlertDialogDefaults.ConfirmButton` in this slot with onClick callback.
`title: @Composable () -> Unit`	A slot for displaying the title of the dialog. Title should contain a summary of the dialog's purpose or content and should not exceed 3 lines of text. By default, `TextOverflow.Ellipsis` will be applied when text exceeds 3 lines.
`modifier: Modifier = Modifier`	Modifier to be applied to the dialog content.
`dismissButton: @Composable RowScope.() -> Unit = { AlertDialogDefaults.DismissButton(onDismissRequest) }`	A slot for a `Button` indicating negative sentiment. Clicking the button must remove the dialog from the composition hierarchy e.g. by setting `visible` to false. It's recommended to use `AlertDialogDefaults.DismissButton` in this slot with onClick callback.
`icon: (@Composable () -> Unit)? = null`	Optional slot for an icon to be shown at the top of the dialog.
`text: (@Composable () -> Unit)? = null`	Optional slot for displaying the message of the dialog below the title. Should contain additional text that presents further details about the dialog's purpose if the title is insufficient.
`verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement`	The vertical arrangement of the dialog's children. There is a default padding between icon, title, and text, which will be added to the spacing specified in this `verticalArrangement` parameter.
`contentPadding: PaddingValues = if (icon != null) { AlertDialogDefaults.confirmDismissWithIconContentPadding() } else { AlertDialogDefaults.confirmDismissContentPadding() }`	The padding to apply around the entire dialog's contents. It is recommended to use the defaults, which adjust to reduce the top padding when an icon is present.
`properties: DialogProperties = DialogProperties()`	An optional `DialogProperties` object for configuring the dialog's behavior.
`content: (ScalingLazyListScope.() -> Unit)? = null`	A slot for additional content, displayed within a scrollable `ScalingLazyColumn`.

AlertDialogContent

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun AlertDialogContent(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    icon: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: PaddingValues = if (icon != null) {
            AlertDialogDefaults.contentWithIconPadding()
        } else {
            AlertDialogDefaults.contentPadding()
        },
    content: (ScalingLazyListScope.() -> Unit)? = null
): Unit

This AlertDialogContent overload provides the content for an AlertDialog without any dedicated slots for buttons. Prefer using AlertDialog directly, which provides built-in animations and a streamlined API. This composable may be used to provide the content for an alert dialog if custom animations are required.

Parameters
`title: @Composable () -> Unit`	A slot for displaying the title of the dialog. Title should contain a summary of the dialog's purpose or content and should not exceed 3 lines of text. By default, `TextOverflow.Ellipsis` will be applied when text exceeds 3 lines.
`modifier: Modifier = Modifier`	Modifier to be applied to the dialog content.
`icon: (@Composable () -> Unit)? = null`	Optional slot for an icon to be shown at the top of the dialog.
`text: (@Composable () -> Unit)? = null`	Optional slot for displaying the message of the dialog below the title. Should contain additional text that presents further details about the dialog's purpose if the title is insufficient.
`verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement`	The vertical arrangement of the dialog's children. There is a default padding between icon, title, and text, which will be added to the spacing specified in this `verticalArrangement` parameter.
`contentPadding: PaddingValues = if (icon != null) { AlertDialogDefaults.contentWithIconPadding() } else { AlertDialogDefaults.contentPadding() }`	The padding to apply around the entire dialog's contents. It is recommended to use the defaults, which adjust to reduce the top padding when an icon is present.
`content: (ScalingLazyListScope.() -> Unit)? = null`	A slot for additional content, displayed within a scrollable `ScalingLazyColumn`.

AlertDialogContent

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun AlertDialogContent(
    edgeButton: @Composable BoxScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    icon: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: PaddingValues = if (icon != null) {
            AlertDialogDefaults.contentWithIconPadding()
        } else {
            AlertDialogDefaults.contentPadding()
        },
    content: (ScalingLazyListScope.() -> Unit)? = null
): Unit

This AlertDialogContent overload provides the content for an AlertDialog with a single EdgeButton to confirm an action. Prefer using AlertDialog directly, which provides built-in animations and a streamlined API. This composable may be used to provide the content for an alert dialog if custom animations are required.

Parameters
`edgeButton: @Composable BoxScope.() -> Unit`	Slot for an `EdgeButton` indicating positive sentiment. Clicking the button must remove the dialog from the composition hierarchy. It's recommended to use `AlertDialogDefaults.EdgeButton` in this slot with onClick callback. Note that when using an `EdgeButton` which is not Medium size, the contentPadding parameters should be specified.
`title: @Composable () -> Unit`	A slot for displaying the title of the dialog. Title should contain a summary of the dialog's purpose or content and should not exceed 3 lines of text. By default, `TextOverflow.Ellipsis` will be applied when text exceeds 3 lines.
`modifier: Modifier = Modifier`	Modifier to be applied to the dialog content.
`icon: (@Composable () -> Unit)? = null`	Optional slot for an icon to be shown at the top of the dialog.
`text: (@Composable () -> Unit)? = null`	Optional slot for displaying the message of the dialog below the title. Should contain additional text that presents further details about the dialog's purpose if the title is insufficient.
`verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement`	The vertical arrangement of the dialog's children. There is a default padding between icon, title, and text, which will be added to the spacing specified in this `verticalArrangement` parameter.
`contentPadding: PaddingValues = if (icon != null) { AlertDialogDefaults.contentWithIconPadding() } else { AlertDialogDefaults.contentPadding() }`	The padding to apply around the entire dialog's contents. Bottom padding will be ignored and default spacing for the `EdgeButton` will be used. It is recommended to use the defaults, which adjust to reduce the top padding when an icon is present.
`content: (ScalingLazyListScope.() -> Unit)? = null`	A slot for additional content, displayed within a scrollable `ScalingLazyColumn`.

AlertDialogContent

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun AlertDialogContent(
    confirmButton: @Composable RowScope.() -> Unit,
    title: @Composable () -> Unit,
    dismissButton: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    icon: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
    contentPadding: PaddingValues = if (icon != null) {
            AlertDialogDefaults.confirmDismissWithIconContentPadding()
        } else {
            AlertDialogDefaults.confirmDismissContentPadding()
        },
    content: (ScalingLazyListScope.() -> Unit)? = null
): Unit

This AlertDialogContent overload provides the content for an AlertDialog with 2 buttons to confirm or dismiss an action. Prefer using AlertDialog directly, which provides built-in animations and a streamlined API. This composable may be used to provide the content for an alert dialog if custom animations are required.

Parameters
`confirmButton: @Composable RowScope.() -> Unit`	A slot for a `Button` indicating positive sentiment. Clicking the button must remove the dialog from the composition hierarchy. It's recommended to use `AlertDialogDefaults.ConfirmButton` in this slot with onClick callback.
`title: @Composable () -> Unit`	A slot for displaying the title of the dialog. Title should contain a summary of the dialog's purpose or content and should not exceed 3 lines of text. By default, `TextOverflow.Ellipsis` will be applied when text exceeds 3 lines.
`dismissButton: @Composable RowScope.() -> Unit`	A slot for a `Button` indicating negative sentiment. Clicking the button must remove the dialog from the composition hierarchy. It's recommended to use `AlertDialogDefaults.DismissButton` in this slot with onClick callback.
`modifier: Modifier = Modifier`	Modifier to be applied to the dialog content.
`icon: (@Composable () -> Unit)? = null`	Optional slot for an icon to be shown at the top of the dialog.
`text: (@Composable () -> Unit)? = null`	Optional slot for displaying the message of the dialog below the title. Should contain additional text that presents further details about the dialog's purpose if the title is insufficient.
`verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement`	The vertical arrangement of the dialog's children. There is a default padding between icon, title, and text, which will be added to the spacing specified in this `verticalArrangement` parameter.
`contentPadding: PaddingValues = if (icon != null) { AlertDialogDefaults.confirmDismissWithIconContentPadding() } else { AlertDialogDefaults.confirmDismissContentPadding() }`	The padding to apply around the entire dialog's contents. It is recommended to use the defaults, which adjust to reduce the top padding when an icon is present.
`content: (ScalingLazyListScope.() -> Unit)? = null`	A slot for additional content, displayed within a scrollable `ScalingLazyColumn`.

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun AnimatedPage(
    pageIndex: Int,
    pagerState: PagerState,
    contentScrimColor: Color = MaterialTheme.colorScheme.background,
    content: @Composable () -> Unit
): Unit

Animates a page within a Pager with a scaling and scrim effect based on its position.

This composable applies a scaling animation and a scrim overlay to the page content, creating a visual cue for page transitions. The animation is responsive to the page's position within the Pager and adapts to the device's reduce motion settings and layout direction.

Parameters
`pageIndex: Int`	The index of the page being animated.
`pagerState: PagerState`	The `PagerState` of the Pager.
`contentScrimColor: Color = MaterialTheme.colorScheme.background`	The color of the scrim overlay applied during page transitions. Defaults to the background color of the `MaterialTheme`. Set this to transparent to have no scrim applied during page transitions.
`content: @Composable () -> Unit`	The composable content of the page.

AnimatedText

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
@RequiresApi(value = 31)
fun AnimatedText(
    text: String,
    fontRegistry: AnimatedTextFontRegistry,
    progressFraction: () -> Float,
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.Center
): Unit

A composable that displays an animated text.

AnimatedText can be used to animate a text along font variation axes and size. It requires an AnimatedTextFontRegistry to improve performance.

AnimatedTextFontRegistry can be generated using rememberAnimatedTextFontRegistry method, which requires start and end font variation axes, and start and end font sizes for the animation.

Start of the animation is when the animatable is at 0f and end of the animation is when the animatable is at 1f. Current animation progress is provided by the progressFraction function. This should be between 0f and 1f, but might go beyond in some cases such as overshooting spring animations.

Example of a one-shot animation with AnimatedText

import androidx.compose.animation.core.Animatable
import androidx.compose.foundation.clickable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontVariation
import androidx.compose.ui.unit.sp
import androidx.wear.compose.material3.AnimatedText
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rememberAnimatedTextFontRegistry

val scope = rememberCoroutineScope()
val animatable = remember { Animatable(0f) }
val animate = {
    scope.launch {
        // Animate from 0 to 1 and then back to 0.
        animatable.animateTo(1f)
        animatable.animateTo(0f)
    }
}
val animatedTextFontRegistry =
    rememberAnimatedTextFontRegistry(
        // Variation axes at the start of the animation, width 10, weight 200
        startFontVariationSettings =
            FontVariation.Settings(FontVariation.width(10f), FontVariation.weight(200)),
        // Variation axes at the end of the animation, width 100, weight 500
        endFontVariationSettings =
            FontVariation.Settings(FontVariation.width(100f), FontVariation.weight(500)),
        startFontSize = 30.sp,
        endFontSize = 40.sp,
    )
AnimatedText(
    text = "Hello!",
    fontRegistry = animatedTextFontRegistry,
    // Content alignment anchors the animation at the vertical center, expanding horizontally
    contentAlignment = Alignment.CenterStart,
    progressFraction = { animatable.value },
    modifier = Modifier.clickable(onClick = { animate() }),
)
LaunchedEffect(Unit) { animate() }

Example of an animation in response to a button press with AnimatedText

import androidx.compose.animation.core.Animatable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.font.FontVariation
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.wear.compose.material3.AnimatedText
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rememberAnimatedTextFontRegistry

val scope = rememberCoroutineScope()
val animatedTextFontRegistry =
    rememberAnimatedTextFontRegistry(
        // Variation axes at the start of the animation, width 10, weight 200
        startFontVariationSettings =
            FontVariation.Settings(FontVariation.width(10f), FontVariation.weight(200)),
        // Variation axes at the end of the animation, width 100, weight 500
        endFontVariationSettings =
            FontVariation.Settings(FontVariation.width(100f), FontVariation.weight(500)),
        startFontSize = 30.sp,
        endFontSize = 30.sp,
    )
val number = remember { mutableIntStateOf(0) }
val textAnimatable = remember { Animatable(0f) }
Row(verticalAlignment = Alignment.CenterVertically) {
    Button(
        modifier = Modifier.padding(horizontal = 16.dp),
        onClick = {
            number.value -= 1
            scope.launch {
                textAnimatable.animateTo(1f)
                textAnimatable.animateTo(0f)
            }
        },
        label = {
            Text(modifier = Modifier.semantics { contentDescription = "Decrease" }, text = "-")
        },
    )
    AnimatedText(
        text = "${number.value}",
        fontRegistry = animatedTextFontRegistry,
        progressFraction = { textAnimatable.value },
    )
    Button(
        modifier = Modifier.padding(horizontal = 16.dp),
        onClick = {
            number.value += 1
            scope.launch {
                textAnimatable.animateTo(1f)
                textAnimatable.animateTo(0f)
            }
        },
        label = {
            Text(modifier = Modifier.semantics { contentDescription = "Increase" }, text = "+")
        },
    )
}

Example showing how AnimatedTextFontRegistry can be reused and shared between two AnimatedText composables

import androidx.compose.animation.core.Animatable
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.text.font.FontVariation
import androidx.compose.ui.unit.sp
import androidx.wear.compose.material3.AnimatedText
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rememberAnimatedTextFontRegistry

val animatedTextFontRegistry =
    rememberAnimatedTextFontRegistry(
        // Variation axes at the start of the animation, width 50, weight 300
        startFontVariationSettings =
            FontVariation.Settings(FontVariation.width(50f), FontVariation.weight(300)),
        // Variation axes at the end of the animation are the same as the start axes
        endFontVariationSettings =
            FontVariation.Settings(FontVariation.width(50f), FontVariation.weight(300)),
        startFontSize = 15.sp,
        endFontSize = 25.sp,
    )
val firstAnimatable = remember { Animatable(0f) }
val secondAnimatable = remember { Animatable(0f) }
Column(horizontalAlignment = Alignment.CenterHorizontally) {
    AnimatedText(
        text = "Top Text",
        fontRegistry = animatedTextFontRegistry,
        progressFraction = { firstAnimatable.value },
    )
    AnimatedText(
        text = "Bottom Text",
        fontRegistry = animatedTextFontRegistry,
        progressFraction = { secondAnimatable.value },
    )
}
LaunchedEffect(Unit) {
    firstAnimatable.animateTo(1f)
    firstAnimatable.animateTo(0f)
    secondAnimatable.animateTo(1f)
    secondAnimatable.animateTo(0f)
}

Parameters
`text: String`	The text to be displayed.
`fontRegistry: AnimatedTextFontRegistry`	The font registry to be used to animate the text.
`progressFraction: () -> Float`	A provider for the current state of the animation. Provided value should be between 0f and 1f, but might go beyond in some cases such as overshooting spring animations.
`modifier: Modifier = Modifier`	Modifier to be applied to the composable.
`contentAlignment: Alignment = Alignment.Center`	Alignment within the bounds of the Canvas.

AppCard

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun AppCard(
    appName: @Composable RowScope.() -> Unit,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    transformation: SurfaceTransformation? = null,
    appImage: (@Composable RowScope.() -> Unit)? = null,
    time: (@Composable RowScope.() -> Unit)? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Opinionated Wear Material 3 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.

This AppCard does not handle input events - see the other AppCard overloads if you want a clickable AppCard.

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 a non-clickable AppCard:

import androidx.wear.compose.material3.AppCard
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text

AppCard(
    appName = { Text("App name") },
    title = { Text("Card title") },
    time = { Text("Now") },
) {
    Text("Non clickable card content")
}

For more information, see the Cards guide.

Parameters
`appName: @Composable RowScope.() -> Unit`	A slot for displaying the application name, expected to be a single line of start aligned text of `Typography.labelSmall`
`title: @Composable RowScope.() -> Unit`	A slot for displaying the title of the card, expected to be one or two lines of start aligned text of `Typography.titleMedium`
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.cardColors()`	`CardColors` that will be used to resolve the colors used for this card. See `CardDefaults.cardColors`.
`border: BorderStroke? = null`	A BorderStroke object which is used for drawing outlines.
`contentPadding: PaddingValues = CardDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`appImage: (@Composable RowScope.() -> Unit)? = null`	A slot for a small (`CardDefaults.AppImageSize`x`CardDefaults.AppImageSize` ) `Image` associated with the application.
`time: (@Composable RowScope.() -> Unit)? = null`	A slot for displaying the time relevant to the contents of the card, expected to be a short piece of end aligned text of `Typography.labelSmall`.
`content: @Composable ColumnScope.() -> Unit`	The main slot for a content of this card

AppCard

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun AppCard(
    onClick: () -> Unit,
    appName: @Composable RowScope.() -> Unit,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    appImage: (@Composable RowScope.() -> Unit)? = null,
    time: (@Composable RowScope.() -> Unit)? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

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 onClick:

import androidx.wear.compose.material3.AppCard
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text

AppCard(
    onClick = { /* Do something */ },
    appName = { Text("App name") },
    title = { Text("Card title") },
    time = { Text("Now") },
) {
    Text("Card content")
}

Example of an AppCard with icon:

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.compose.ui.semantics.contentDescription
import androidx.wear.compose.material3.AppCard
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text

AppCard(
    onClick = { /* Do something */ },
    appName = { Text("App name") },
    appImage = {
        Icon(
            painter = painterResource(id = android.R.drawable.star_big_off),
            contentDescription = "Star icon",
            modifier =
                Modifier.size(CardDefaults.AppImageSize)
                    .wrapContentSize(align = Alignment.Center),
            tint = MaterialTheme.colorScheme.primary,
        )
    },
    title = { Text("Card title") },
    time = { Text("Now") },
) {
    Text("Card content")
}

Example of an AppCard with image content:

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
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.platform.LocalConfiguration
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.AppCard
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text

val configuration = LocalConfiguration.current
// Add padding to the end of the image in order to maintain the correct proportions
// between the image and the card.
val imageEndPaddingDp = (0.15f * configuration.screenWidthDp).dp
AppCard(
    onClick = { /* Do something */ },
    appName = { Text("App name") },
    appImage = {
        Icon(
            painter = painterResource(id = android.R.drawable.star_big_off),
            contentDescription = "Star icon",
            modifier =
                Modifier.size(CardDefaults.AppImageSize)
                    .wrapContentSize(align = Alignment.Center),
            tint = MaterialTheme.colorScheme.primary,
        )
    },
    title = { Text("With image") },
    time = { Text("Now") },
) {
    Spacer(modifier = Modifier.height(4.dp))
    Row(modifier = Modifier.fillMaxWidth()) {
        Image(
            modifier =
                Modifier.weight(1f).aspectRatio(16f / 9f).clip(RoundedCornerShape(16.dp)),
            painter = painterResource(id = R.drawable.card_content_image),
            contentScale = ContentScale.Crop,
            contentDescription = null,
        )
        Spacer(modifier = Modifier.width(imageEndPaddingDp))
    }
}

Example of an outlined AppCard:

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.contentDescription
import androidx.wear.compose.material3.AppCard
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

AppCard(
    onClick = { /* Do something */ },
    appName = { Text("App name") },
    appImage = {
        Icon(
            Icons.Filled.Favorite,
            contentDescription = "Favorite icon",
            modifier = Modifier.size(CardDefaults.AppImageSize),
        )
    },
    title = { Text("App card") },
    time = { Text("Now") },
    colors = CardDefaults.outlinedCardColors(),
    border = CardDefaults.outlinedCardBorder(),
) {
    Text("Card content")
}

For more information, see the Cards guide.

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the card
`appName: @Composable RowScope.() -> Unit`	A slot for displaying the application name, expected to be a single line of start aligned text of `Typography.labelSmall`
`title: @Composable RowScope.() -> Unit`	A slot for displaying the title of the card, expected to be one or two lines of start aligned text of `Typography.titleMedium`
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`onLongClick: (() -> Unit)? = null`	Called when this card is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable.
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.cardColors()`	`CardColors` that will be used to resolve the colors used for this card in different states. See `CardDefaults.cardColors`.
`border: BorderStroke? = null`	A BorderStroke object which is used for drawing outlines.
`contentPadding: PaddingValues = CardDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`appImage: (@Composable RowScope.() -> Unit)? = null`	A slot for a small (`CardDefaults.AppImageSize`x`CardDefaults.AppImageSize` ) `Image` associated with the application.
`time: (@Composable RowScope.() -> Unit)? = null`	A slot for displaying the time relevant to the contents of the card, expected to be a short piece of end aligned text of `Typography.labelSmall`.
`content: @Composable ColumnScope.() -> Unit`	The main slot for a content of this card

AppScaffold

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun AppScaffold(
    modifier: Modifier = Modifier,
    timeText: @Composable () -> Unit = { TimeText() },
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    content: @Composable BoxScope.() -> Unit
): Unit

AppScaffold is one of the Wear Material3 scaffold components.

The scaffold components AppScaffold and ScreenScaffold lay out the structure of a screen and coordinate transitions of the ScrollIndicator and TimeText components.

AppScaffold allows static screen elements such as TimeText to remain visible during in-app transitions such as swipe-to-dismiss. It provides a slot for the main application content, which will usually be supplied by a navigation component such as SwipeDismissableNavHost.

Example of using AppScaffold and ScreenScaffold:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
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.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold {
    // Define the navigation hierarchy within the AppScaffold,
    // such as using SwipeDismissableNavHost.
    // For this sample, we will define a single screen inline.
    val listState = rememberScalingLazyListState()

    // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
        contentPadding ->
        ScalingLazyColumn(
            state = listState,
            contentPadding = contentPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}

Parameters
`modifier: Modifier = Modifier`	The modifier for the top level of the scaffold.
`timeText: @Composable () -> Unit = { TimeText() }`	The default time (and potentially status message) to display at the top middle of the screen in this app. When `AppScaffold` is used in combination with `ScreenScaffold`, the time text will be scrolled away and shown/hidden according to the scroll state of the screen.
`containerColor: Color = MaterialTheme.colorScheme.background`	The container color of the app drawn behind the `content`, i.e. the color of the background behind the content.
`contentColor: Color = contentColorFor(containerColor)`	The content color for the application `content`.
`content: @Composable BoxScope.() -> Unit`	The main content for this application.

ArcProgressIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun ArcProgressIndicator(
    modifier: Modifier = Modifier,
    startAngle: Float = ArcProgressIndicatorDefaults.IndeterminateStartAngle,
    endAngle: Float = ArcProgressIndicatorDefaults.IndeterminateEndAngle,
    angularDirection: AngularDirection = AngularDirection.CounterClockwise,
    colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors(),
    strokeWidth: Dp = ArcProgressIndicatorDefaults.IndeterminateStrokeWidth,
    gapSize: Dp = ArcProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)
): Unit

Indeterminate Material Design arc progress indicator.

Indeterminate progress indicator expresses an unspecified wait time and animates indefinitely. This overload provides a variation over the usual circular spinner by allowing the start and end angles to be specified.

Example of indeterminate arc progress indicator:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ArcProgressIndicator
import androidx.wear.compose.material3.ArcProgressIndicatorDefaults
import androidx.wear.compose.material3.ProgressIndicatorDefaults

Box(modifier = Modifier.fillMaxSize()) {
    ArcProgressIndicator(
        modifier =
            Modifier.align(Alignment.Center)
                .size(ArcProgressIndicatorDefaults.recommendedIndeterminateDiameter)
    )
}

Parameters
`modifier: Modifier = Modifier`	Modifier to be applied to the ArcProgressIndicator.
`startAngle: Float = ArcProgressIndicatorDefaults.IndeterminateStartAngle`	the start angle of this progress indicator arc (specified in degrees). It is recommended to use `ArcProgressIndicatorDefaults.IndeterminateStartAngle`. Measured clockwise from the three o'clock position.
`endAngle: Float = ArcProgressIndicatorDefaults.IndeterminateEndAngle`	the end angle of this progress indicator arc (specified in degrees). It is recommended to use `ArcProgressIndicatorDefaults.IndeterminateEndAngle`. Measured clockwise from the three o'clock position.
`angularDirection: AngularDirection = AngularDirection.CounterClockwise`	Determines whether the animation is in the clockwise or counter-clockwise direction.
`colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors()`	`ProgressIndicatorColors` that will be used to resolve the indicator and track color for this progress indicator.
`strokeWidth: Dp = ArcProgressIndicatorDefaults.IndeterminateStrokeWidth`	The stroke width for the progress indicator. The recommended value is `ArcProgressIndicatorDefaults.IndeterminateStrokeWidth`.
`gapSize: Dp = ArcProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)`	The size (in Dp) of the gap between the ends of the progress indicator and the track. The stroke end caps are not included in this distance.

Button

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Base level Wear Material3 Button that offers a single slot to take any content. Used as the container for more opinionated Button components that take specific content such as icons and labels.

The Button is stadium-shaped by default and its standard height is designed to take 2 lines of text of Typography.labelMedium style. With localisation and/or large font sizes, the text can extend to a maximum of 3 lines in which case, the Button height adjusts to accommodate the contents.

Button takes the ButtonDefaults.buttonColors color scheme by default, with colored background, contrasting content color and no border. This is a high-emphasis button for the primary, most important or most common action on a screen.

Other recommended buttons with ButtonColors for different levels of emphasis are: FilledTonalButton which defaults to ButtonDefaults.filledTonalButtonColors, OutlinedButton which defaults to ButtonDefaults.outlinedButtonColors and ChildButton which defaults to ButtonDefaults.childButtonColors. For a background image, see the overload of Button with a containerPainter parameter.

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

Example of a Button:

import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Text

Button(onClick = { /* Do something */ }, label = { Text("Simple Button") }, modifier = modifier)

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`modifier: Modifier = Modifier`	Modifier to be applied to the button
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable
`shape: Shape = ButtonDefaults.shape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
`colors: ButtonColors = ButtonDefaults.buttonColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.buttonColors`.
`border: BorderStroke? = null`	Optional `BorderStroke` that will be used to resolve the border for this button in different states.
`contentPadding: PaddingValues = ButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`content: @Composable RowScope.() -> Unit`	Slot for composable body content displayed on the Button

Button

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun Button(
    onClick: () -> Unit,
    containerPainter: Painter,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    disabledContainerPainter: Painter = ButtonDefaults.disabledContainerPainter(containerPainter),
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonWithContainerPainterColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Base level Wear Material3 Button that offers parameters for container image backgrounds, with a single slot to take any content.

An Image background is a means to reinforce the meaning of information in a Button. Buttons should have a content color that contrasts with the background image and scrim.

This Button takes containerPainter for the image background to be drawn when the button is enabled and disabledContainerPainter for the image background when the button is disabled (The ButtonColors containerColor and disabledContainerColor properties are ignored). It is recommended to use ButtonDefaults.containerPainter to create the painters so that a scrim is drawn on top of the container image, ensuring that any content above the background is legible.

The Button is Stadium-shaped by default and has a max height designed to take no more than two lines of text of Typography.labelMedium style. With localisation and/or large font sizes, the text can extend to a maximum of 3 lines in which case, the Button height adjusts to accommodate the contents.

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

Example of a Button with an image background:

import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

Button(
    onClick = { /* Do something */ },
    containerPainter =
        ButtonDefaults.containerPainter(
            image = painterResource(id = R.drawable.backgroundimage)
        ),
    enabled = enabled,
    label = { Text("Button") },
    secondaryLabel = { Text("Secondary label") },
    icon = {
        Icon(
            painter = painterResource(R.drawable.ic_favorite_rounded),
            contentDescription = "Favorite icon",
        )
    },
    modifier = modifier,
)

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`containerPainter: Painter`	The `Painter` to use to draw the container image of the `Button`, such as returned by `ButtonDefaults.containerPainter`.
`modifier: Modifier = Modifier`	Modifier to be applied to the button
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable
`disabledContainerPainter: Painter = ButtonDefaults.disabledContainerPainter(containerPainter)`	`Painter` to use to draw the container of the `Button` when not enabled, such as returned by `ButtonDefaults.containerPainter` with alpha = `ButtonDefaults.DisabledContainerAlpha`.
`shape: Shape = ButtonDefaults.shape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
`colors: ButtonColors = ButtonDefaults.buttonWithContainerPainterColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states (the containerColor and disabledContainerColor are overridden by containerPainter and disabledContainerPainter respectively). See `ButtonDefaults.buttonWithContainerPainterColors`.
`border: BorderStroke? = null`	Optional `BorderStroke` that will be used to resolve the border for this button in different states.
`contentPadding: PaddingValues = ButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`content: @Composable RowScope.() -> Unit`	Slot for composable body content displayed on the Button

Button

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    label: @Composable RowScope.() -> Unit
): Unit

Wear Material3 Button 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 Button is stadium-shaped by default and its standard height is designed to take 2 lines of text of Typography.labelMedium style - either a two-line label or both a single line label and a secondary label. With localisation and/or large font sizes, the Button height adjusts to accommodate the contents. The label and secondary label should be consistently aligned.

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.

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

Example of a Button with an icon and secondary label:

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

Button(
    onClick = { /* Do something */ },
    label = { Text("Button") },
    secondaryLabel = { Text("Secondary label") },
    icon = {
        Icon(
            painter = painterResource(R.drawable.ic_favorite_rounded),
            contentDescription = "Favorite icon",
            modifier = Modifier.size(ButtonDefaults.IconSize),
        )
    },
    modifier = modifier,
)

Example of a Button with a large icon and adjusted content padding:

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

// When customising the icon size, it is recommended to also specify
// the associated content padding
Button(
    onClick = { /* Do something */ },
    enabled = enabled,
    label = { Text("Button") },
    secondaryLabel = { Text("Secondary label") },
    icon = {
        Icon(
            painter = painterResource(R.drawable.ic_favorite_rounded),
            contentDescription = "Favorite icon",
            modifier = Modifier.size(ButtonDefaults.LargeIconSize),
        )
    },
    contentPadding = ButtonDefaults.ButtonWithLargeIconContentPadding,
    modifier = modifier,
)

Example of a Button with an extra large icon and adjusted content padding:

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

// When customising the icon size, it is recommended to also specify
// the associated content padding
Button(
    onClick = { /* Do something */ },
    enabled = enabled,
    label = { Text("Button") },
    secondaryLabel = { Text("Secondary label") },
    icon = {
        Icon(
            painter = painterResource(R.drawable.ic_favorite_rounded),
            contentDescription = "Favorite icon",
            modifier = Modifier.size(ButtonDefaults.ExtraLargeIconSize),
        )
    },
    contentPadding = ButtonDefaults.ButtonWithExtraLargeIconContentPadding,
    modifier = modifier,
)

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`modifier: Modifier = Modifier`	Modifier to be applied to the button
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`secondaryLabel: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's secondary label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not. label and secondaryLabel contents should be consistently aligned.
`icon: (@Composable BoxScope.() -> Unit)? = null`	A slot for providing the button's icon. The contents are expected to be a horizontally and vertically aligned icon of size `ButtonDefaults.IconSize` or `ButtonDefaults.LargeIconSize`.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable
`shape: Shape = ButtonDefaults.shape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
`colors: ButtonColors = ButtonDefaults.buttonColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.buttonColors`. Defaults to `ButtonDefaults.buttonColors`
`border: BorderStroke? = null`	Optional `BorderStroke` that will be used to resolve the button border in different states.
`contentPadding: PaddingValues = ButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`label: @Composable RowScope.() -> Unit`	A slot for providing the button's main label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not.

Button

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun Button(
    onClick: () -> Unit,
    containerPainter: Painter,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    enabled: Boolean = true,
    disabledContainerPainter: Painter = ButtonDefaults.disabledContainerPainter(containerPainter),
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonWithContainerPainterColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    label: @Composable RowScope.() -> Unit
): Unit

Wear Material3 Button that offers parameters for container image backgrounds, with 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.

An image background is a means to reinforce the meaning of information in a Button. Buttons should have a content color that contrasts with the background image and scrim.

This Button takes containerPainter for the container image background to be drawn when the button is enabled and disabledContainerPainter for the image background when the button is disabled (the ButtonColors containerColor and disabledContainerColor properties are ignored). It is recommended to use ButtonDefaults.containerPainter to create the painters so that a scrim is drawn on top of the container image, ensuring that any content above the background is legible.

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

Example of a Button with an image background, an icon and a secondary label:

import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

Button(
    onClick = { /* Do something */ },
    containerPainter =
        ButtonDefaults.containerPainter(
            image = painterResource(id = R.drawable.backgroundimage)
        ),
    enabled = enabled,
    label = { Text("Button") },
    secondaryLabel = { Text("Secondary label") },
    icon = {
        Icon(
            painter = painterResource(R.drawable.ic_favorite_rounded),
            contentDescription = "Favorite icon",
        )
    },
    modifier = modifier,
)

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`containerPainter: Painter`	The `Painter` to use to draw the container image of the `Button`, such as returned by `ButtonDefaults.containerPainter`.
`modifier: Modifier = Modifier`	Modifier to be applied to the button
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`secondaryLabel: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's secondary label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not. label and secondaryLabel contents should be consistently aligned.
`icon: (@Composable BoxScope.() -> Unit)? = null`	A slot for providing the button's icon. The contents are expected to be a horizontally and vertically aligned icon of size `ButtonDefaults.IconSize` or `ButtonDefaults.LargeIconSize`.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable
`disabledContainerPainter: Painter = ButtonDefaults.disabledContainerPainter(containerPainter)`	`Painter` to use to draw the container of the `Button` when not enabled, such as returned by `ButtonDefaults.disabledContainerPainter`.
`shape: Shape = ButtonDefaults.shape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
`colors: ButtonColors = ButtonDefaults.buttonWithContainerPainterColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states (the containerColor and disabledContainerColor are overridden by containerPainter and disabledContainerPainter respectively). See `ButtonDefaults.buttonWithContainerPainterColors`.
`border: BorderStroke? = null`	Optional `BorderStroke` that will be used to resolve the button border in different states.
`contentPadding: PaddingValues = ButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`label: @Composable RowScope.() -> Unit`	A slot for providing the button's main label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not.

ButtonGroup

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun ButtonGroup(
    modifier: Modifier = Modifier,
    spacing: Dp = ButtonGroupDefaults.Spacing,
    expansionWidth: Dp = ButtonGroupDefaults.ExpansionWidth,
    contentPadding: PaddingValues = ButtonGroupDefaults.fullWidthPaddings(),
    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
    content: @Composable ButtonGroupScope.() -> Unit
): Unit

Layout component to implement an expressive group of buttons in a row, that react to touch by growing the touched button, (while the neighbor(s) shrink to accommodate and keep the group width constant).

Example of a ButtonGroup:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonGroup
import androidx.wear.compose.material3.Text

val interactionSource1 = remember { MutableInteractionSource() }
val interactionSource2 = remember { MutableInteractionSource() }

Box(contentAlignment = Alignment.Center) {
    ButtonGroup(Modifier.fillMaxWidth()) {
        Button(
            onClick = {},
            modifier = Modifier.animateWidth(interactionSource1),
            interactionSource = interactionSource1,
        ) {
            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) { Text("L") }
        }
        Button(
            onClick = {},
            modifier = Modifier.animateWidth(interactionSource2),
            interactionSource = interactionSource2,
        ) {
            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) { Text("R") }
        }
    }
}

Example of 3 buttons, the middle one bigger ButtonGroup:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.unit.LayoutDirection
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonGroup
import androidx.wear.compose.material3.Text

val interactionSource1 = remember { MutableInteractionSource() }
val interactionSource2 = remember { MutableInteractionSource() }
val interactionSource3 = remember { MutableInteractionSource() }

var rtl by remember { mutableStateOf(false) }
Box(Modifier.fillMaxSize()) {
    CompositionLocalProvider(
        LocalLayoutDirection provides if (rtl) LayoutDirection.Rtl else LayoutDirection.Ltr
    ) {
        ButtonGroup(Modifier.fillMaxWidth().align(Alignment.Center)) {
            Button(
                onClick = {},
                modifier = Modifier.animateWidth(interactionSource1),
                interactionSource = interactionSource1,
            ) {
                Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) { Text("A") }
            }
            Button(
                onClick = {},
                modifier = Modifier.weight(1.5f).animateWidth(interactionSource2),
                interactionSource = interactionSource2,
            ) {
                Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) { Text("B") }
            }
            Button(
                onClick = {},
                modifier = Modifier.animateWidth(interactionSource3),
                interactionSource = interactionSource3,
            ) {
                Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) { Text("C") }
            }
        }
    }
    Button(modifier = Modifier.align(Alignment.BottomCenter), onClick = { rtl = !rtl }) {
        Text(if (rtl) "RTL" else "LTR")
    }
}

Parameters
`modifier: Modifier = Modifier`	Modifier to be applied to the button group
`spacing: Dp = ButtonGroupDefaults.Spacing`	the amount of spacing between buttons
`expansionWidth: Dp = ButtonGroupDefaults.ExpansionWidth`	how much buttons grow when pressed
`contentPadding: PaddingValues = ButtonGroupDefaults.fullWidthPaddings()`	The spacing values to apply internally between the container and the content
`verticalAlignment: Alignment.Vertical = Alignment.CenterVertically`	the vertical alignment of the button group's children.
`content: @Composable ButtonGroupScope.() -> Unit`	the content and properties of each button. The Ux guidance is to use no more than 3 buttons within a ButtonGroup. Note that this content is on the `ButtonGroupScope`, to provide access to 3 new modifiers to configure the buttons.

Card

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    transformation: SurfaceTransformation? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

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

This Card does not handle input events - see the other Card overloads if you want a clickable Card.

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 with rounded corners by default.

Example of a non-clickable Card:

import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text

Card { Text("Non Clickable Card") }

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

Parameters
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.cardColors()`	`CardColors` that will be used to resolve the colors used for this card. See `CardDefaults.cardColors`.
`border: BorderStroke? = null`	A BorderStroke object which is used for drawing outlines.
`contentPadding: PaddingValues = CardDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`content: @Composable ColumnScope.() -> Unit`	The main slot for a content of this card

Card

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun Card(
    containerPainter: Painter,
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardWithContainerPainterColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.CardWithContainerPainterContentPadding,
    transformation: SurfaceTransformation? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Wear Material 3 Card that takes a container painter for drawing a background image, and offers a single slot to take any content.

This Card does not handle input events - see the other Card overloads if you want a clickable Card.

An image background is a means to reinforce the meaning of information in a Card. Cards should have a content color that contrasts with the background image and scrim. This Card takes containerPainter for the container image background to be drawn (the CardColors containerColor property is ignored). It is recommended to use CardDefaults.containerPainter to create the painter so that a scrim is drawn on top of the container image, ensuring that any content above the background is legible.

The Card is Rectangle-shaped with rounded corners by default.

Example of a non-clickable Card with an image background:

import androidx.compose.foundation.background
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Text

Card(
    containerPainter =
        CardDefaults.containerPainter(image = painterResource(id = R.drawable.backgroundimage))
) {
    Text("Non clickable image card")
}

Parameters
`containerPainter: Painter`	The `Painter` to use to draw the container image of the `Card`, such as returned by `CardDefaults.containerPainter`.
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.cardWithContainerPainterColors()`	`CardColors` that will be used to resolve the colors used for this card (the containerColor is overridden by containerPainter). See `CardDefaults.cardWithContainerPainterColors`.
`border: BorderStroke? = null`	A BorderStroke object which is used for drawing outlines.
`contentPadding: PaddingValues = CardDefaults.CardWithContainerPainterContentPadding`	The spacing values to apply internally between the container and the content
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`content: @Composable ColumnScope.() -> Unit`	The main slot for a content of this card

Card

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Base level Wear Material 3 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 with rounded corners by default.

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

Example of a Card with onClick:

import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text

Card(onClick = { /* Do something */ }) { Text("Card") }

Example of Card with onLongClick:

import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text

Card(
    onClick = { /* Do something */ },
    onLongClick = onLongClickHandler,
    onLongClickLabel = "Long click",
) {
    Text("Card with long click")
}

Card does not constrain the height of its contents by default. Where necessary to do that, use Modifier.height(IntrinsicSize.Min) as shown in this example:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text

Card(
    onClick = { /* Do something */ },
    // Constrains the card to fill background up to the intrinsic height.
    modifier = Modifier.height(IntrinsicSize.Min),
) {
    Text("Card", modifier = Modifier.fillMaxHeight().background(Color.Red))
}

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

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the card
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`onLongClick: (() -> Unit)? = null`	Called when this card is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable.
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.cardColors()`	`CardColors` that will be used to resolve the colors used for this card in different states. See `CardDefaults.cardColors`.
`border: BorderStroke? = null`	A BorderStroke object which is used for drawing outlines.
`contentPadding: PaddingValues = CardDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`content: @Composable ColumnScope.() -> Unit`	The main slot for a content of this card

Card

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun Card(
    onClick: () -> Unit,
    containerPainter: Painter,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardWithContainerPainterColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.CardWithContainerPainterContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Wear Material 3 Card that takes a container painter for drawing a background image, and offers a single slot to take any content.

The Card is Rectangle-shaped with rounded corners by default.

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

Example of a Card with an image background:

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Text

Card(
    onClick = { /* Do something */ },
    containerPainter =
        CardDefaults.containerPainter(image = painterResource(id = R.drawable.backgroundimage)),
) {
    Text("Image card")
}

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the card
`containerPainter: Painter`	The `Painter` to use to draw the container image of the `Card`, such as returned by `CardDefaults.containerPainter`.
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`onLongClick: (() -> Unit)? = null`	Called when this card is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable.
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.cardWithContainerPainterColors()`	`CardColors` that will be used to resolve the colors used for this card in different states (the containerColor is overridden by containerPainter). See `CardDefaults.cardWithContainerPainterColors`.
`border: BorderStroke? = null`	A BorderStroke object which is used for drawing outlines.
`contentPadding: PaddingValues = CardDefaults.CardWithContainerPainterContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`content: @Composable ColumnScope.() -> Unit`	The main slot for a content of this card

CheckboxButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun CheckboxButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CheckboxButtonDefaults.checkboxButtonShape,
    colors: CheckboxButtonColors = CheckboxButtonDefaults.checkboxButtonColors(),
    contentPadding: PaddingValues = CheckboxButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit
): Unit

The Wear Material CheckboxButton offers three slots and a specific layout for an icon, a label, and a secondaryLabel. The icon and secondaryLabel are optional. The items are laid out in a row with the optional icon at the start and a column containing the two label slots in the middle.

The CheckboxButton is Stadium shaped. The label should take no more than 3 lines of text. The secondary label should take no more than 2 lines of text. With localisation and/or large font sizes, the CheckboxButton height adjusts to accommodate the contents. The label and secondary label are start aligned by default.

Samples: Example of a CheckboxButton:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.CheckboxButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

var checked by remember { mutableStateOf(true) }
CheckboxButton(
    label = { Text("Checkbox Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
    secondaryLabel = {
        Text("With secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
    },
    checked = checked,
    onCheckedChange = { checked = it },
    icon = { Icon(Icons.Filled.Favorite, contentDescription = "Favorite icon") },
    enabled = true,
)

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

The recommended set of CheckboxButton colors can be obtained from CheckboxButtonDefaults, e.g. CheckboxButtonDefaults.checkboxButtonColors.

Parameters
`checked: Boolean`	Boolean flag indicating whether this button is currently checked.
`onCheckedChange: (Boolean) -> Unit`	Callback to be invoked when this button's checked status is changed.
`modifier: Modifier = Modifier`	Modifier to be applied to the `CheckboxButton`.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shape: Shape = CheckboxButtonDefaults.checkboxButtonShape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme.
`colors: CheckboxButtonColors = CheckboxButtonDefaults.checkboxButtonColors()`	`CheckboxButtonColors` that will be used to resolve the background and content color for this button in different states.
`contentPadding: PaddingValues = CheckboxButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button's "toggleable" tap area. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`icon: (@Composable BoxScope.() -> Unit)? = null`	An optional slot for providing an icon to indicate the purpose of the button. The contents are expected to be a horizontally and vertically center aligned icon of size 24.dp.
`secondaryLabel: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's secondary label. The contents are expected to be text which is "start" aligned and no more than 2 lines of text.
`label: @Composable RowScope.() -> Unit`	A slot for providing the button's main label. The contents are expected to be text which is "start" aligned and no more than 3 lines of text.

ChildButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ChildButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.childButtonColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Base level Wear Material3 ChildButton that offers a single slot to take any content. Used as the container for more opinionated ChildButton components that take specific content such as icons and labels.

The ChildButton is stadium-shaped by default and its standard height is designed to take 2 lines of text of Typography.labelMedium style. With localisation and/or large font sizes, the text can extend to a maximum of 3 lines in which case, the ChildButton height adjusts to accommodate the contents. The ChildButton can have an icon or image horizontally parallel to the two lines of text.

ChildButton takes the ButtonDefaults.childButtonColors color scheme by default, with a transparent background and no border. This is a low-emphasis button for optional or supplementary actions with the least amount of prominence.

Other recommended buttons with ButtonColors for different levels of emphasis are: Button which defaults to ButtonDefaults.buttonColors, FilledTonalButton which defaults to ButtonDefaults.filledTonalButtonColors, OutlinedButton which defaults to ButtonDefaults.outlinedButtonColors. For a background image, see the overload of Button with a containerPainter parameter.

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

Example of a ChildButton:

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.onClick
import androidx.compose.ui.text.style.TextAlign
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ChildButton
import androidx.wear.compose.material3.Text

ChildButton(
    onClick = { /* Do something */ },
    label = {
        Text("Child Button", textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth())
    },
    modifier = modifier,
)

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`modifier: Modifier = Modifier`	Modifier to be applied to the button
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable
`shape: Shape = ButtonDefaults.shape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
`colors: ButtonColors = ButtonDefaults.childButtonColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.childButtonColors`.
`border: BorderStroke? = null`	Optional `BorderStroke` that will be used to resolve the border for this button in different states.
`contentPadding: PaddingValues = ButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`content: @Composable RowScope.() -> Unit`	Slot for composable body content displayed on the ChildButton

ChildButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ChildButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.childButtonColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    label: @Composable RowScope.() -> Unit
): Unit

Wear Material3 ChildButton 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 ChildButton is stadium-shaped by default and its standard height is designed to take 2 lines of text of Typography.labelMedium style - either a two-line label or both a single line label and a secondary label. With localisation and/or large font sizes, the ChildButton height adjusts to accommodate the contents. The label and secondary label should be consistently aligned.

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.

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

Example of a ChildButton with an icon and secondary label:

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.ChildButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

ChildButton(
    onClick = { /* Do something */ },
    label = { Text("Child Button") },
    secondaryLabel = { Text("Secondary label") },
    icon = {
        Icon(
            painter = painterResource(R.drawable.ic_favorite_rounded),
            contentDescription = "Favorite icon",
            modifier = Modifier.size(ButtonDefaults.IconSize),
        )
    },
    modifier = modifier,
)

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`modifier: Modifier = Modifier`	Modifier to be applied to the button
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`secondaryLabel: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's secondary label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not. label and secondaryLabel contents should be consistently aligned.
`icon: (@Composable BoxScope.() -> Unit)? = null`	A slot for providing the button's icon. The contents are expected to be a horizontally and vertically aligned icon of size `ButtonDefaults.IconSize` or `ButtonDefaults.LargeIconSize`.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable
`shape: Shape = ButtonDefaults.shape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
`colors: ButtonColors = ButtonDefaults.childButtonColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.childButtonColors`.
`border: BorderStroke? = null`	Optional `BorderStroke` that will be used to resolve the button border in different states.
`contentPadding: PaddingValues = ButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`label: @Composable RowScope.() -> Unit`	A slot for providing the button's main label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not.

CircularProgressIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors(),
    strokeWidth: Dp = CircularProgressIndicatorDefaults.IndeterminateStrokeWidth,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)
): Unit

Indeterminate Material Design circular progress indicator.

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

Example of indeterminate circular progress indicator:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.CircularProgressIndicator

Box(modifier = Modifier.fillMaxSize()) {
    CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
}

Parameters
`modifier: Modifier = Modifier`	Modifier to be applied to the CircularProgressIndicator.
`colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors()`	`ProgressIndicatorColors` that will be used to resolve the indicator and track color for this progress indicator.
`strokeWidth: Dp = CircularProgressIndicatorDefaults.IndeterminateStrokeWidth`	The stroke width for the progress indicator. The recommended values is `CircularProgressIndicatorDefaults.IndeterminateStrokeWidth`.
`gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)`	The size (in Dp) of the gap between the ends of the progress indicator and the track. The stroke endcaps are not included in this distance.

CircularProgressIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun CircularProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    allowProgressOverflow: Boolean = false,
    startAngle: Float = CircularProgressIndicatorDefaults.StartAngle,
    endAngle: Float = startAngle,
    colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors(),
    strokeWidth: Dp = CircularProgressIndicatorDefaults.largeStrokeWidth,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)
): Unit

Material Design circular progress indicator. Progress changes are animated.

Example of a full screen CircularProgressIndicator. Note that the padding CircularProgressIndicatorDefaults.FullScreenPadding should be applied:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.ProgressIndicatorDefaults

Box(
    modifier =
        Modifier.background(MaterialTheme.colorScheme.background)
            .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
            .fillMaxSize()
) {
    CircularProgressIndicator(progress = { 0.25f }, startAngle = 120f, endAngle = 60f)
}

Example of progress showing overflow value (more than 1) by CircularProgressIndicator:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.ProgressIndicatorDefaults

Box(
    modifier =
        Modifier.background(MaterialTheme.colorScheme.background)
            .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
            .fillMaxSize()
) {
    CircularProgressIndicator(
        // Overflow value of 120%
        progress = { 1.2f },
        allowProgressOverflow = true,
        startAngle = 120f,
        endAngle = 60f,
    )
}

Example of progress indicator wrapping media control by CircularProgressIndicator:

import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton
import androidx.wear.compose.material3.IconButtonDefaults
import androidx.wear.compose.material3.MaterialTheme

var isPlaying by remember { mutableStateOf(false) }
val buttonPadding = 4.dp
val progressStrokeWidth = 4.dp
val progress = 0.75f

Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {
    // The CircularProgressIndicator should be around the IconButton, with an extra gap between
    // then of 'buttonPadding'. We multiply by 2 because the size includes progressStrokeWidth
    // at top and bottom and the buttonPadding at top and bottom.
    CircularProgressIndicator(
        modifier =
            Modifier.align(Alignment.Center)
                .size(
                    IconButtonDefaults.DefaultButtonSize +
                        progressStrokeWidth * 2 +
                        buttonPadding * 2
                ),
        progress = { progress },
        strokeWidth = progressStrokeWidth,
    )

    IconButton(
        modifier =
            Modifier.align(Alignment.Center)
                .semantics {
                    // Set custom progress semantics for accessibility.
                    contentDescription =
                        String.format(
                            "Play/pause button, track progress: %.0f%%",
                            progress * 100,
                        )
                }
                .clip(CircleShape)
                .background(MaterialTheme.colorScheme.surfaceContainerLow),
        onClick = { isPlaying = !isPlaying },
    ) {
        Icon(
            imageVector = if (isPlaying) Icons.Filled.Close else Icons.Filled.PlayArrow,
            contentDescription = null,
        )
    }
}

Example of a CircularProgressIndicator with small progress values:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.ProgressIndicatorDefaults

Box {
    CircularProgressIndicator(
        // Small progress values like 2% will be rounded up to at least the stroke width.
        progress = { 0.02f },
        modifier =
            Modifier.fillMaxSize().padding(CircularProgressIndicatorDefaults.FullScreenPadding),
        startAngle = 120f,
        endAngle = 60f,
        strokeWidth = 10.dp,
        colors =
            ProgressIndicatorDefaults.colors(
                indicatorColor = Color.Green,
                trackColor = Color.White,
            ),
    )
}

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

Parameters
`progress: () -> Float`	The progress of this progress indicator where 0.0 represents no progress and 1.0 represents completion. Progress changes will be animated.
`modifier: Modifier = Modifier`	Modifier to be applied to the CircularProgressIndicator.
`enabled: Boolean = true`	controls the enabled state. Although this component is not clickable, it can be contained within a clickable component. When enabled is `false`, this component will appear visually disabled.
`allowProgressOverflow: Boolean = false`	When progress overflow is allowed, values smaller than 0.0 will be coerced to 0, while values larger than 1.0 will be wrapped around and shown as overflow with a different track color `ProgressIndicatorColors.overflowTrackBrush`. For example values 1.2, 2.2 etc will be shown as 20% progress with the overflow color. When progress overflow is not allowed, progress values will be coerced into the range 0..1.
`startAngle: Float = CircularProgressIndicatorDefaults.StartAngle`	The starting position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. Default is 270 degrees `CircularProgressIndicatorDefaults.StartAngle` (top of the screen).
`endAngle: Float = startAngle`	The ending position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. By default equal to `startAngle`.
`colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors()`	`ProgressIndicatorColors` that will be used to resolve the indicator and track color for this progress indicator in different states.
`strokeWidth: Dp = CircularProgressIndicatorDefaults.largeStrokeWidth`	The stroke width for the progress indicator. The recommended values are `CircularProgressIndicatorDefaults.largeStrokeWidth` and `CircularProgressIndicatorDefaults.smallStrokeWidth`.
`gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)`	The size (in Dp) of the gap between the ends of the progress indicator and the track. The stroke endcaps are not included in this distance.

CompactButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun CompactButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.compactButtonShape,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.CompactButtonContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    label: (@Composable RowScope.() -> Unit)? = null
): Unit

A Wear Material3 CompactButton 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 CompactButton is Stadium shaped and has a max height designed to take no more than one line of text and/or one icon. The default max height is ButtonDefaults.CompactButtonHeight. This includes a visible button height of 32.dp and 8.dp of padding above and below the button in order to meet accessibility guidelines that request a minimum of 48.dp height and width of tappable area.

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

The items are laid out as follows.

If a label is provided then the button will be laid out with the optional icon at the start of a row followed by the label with a default max height of ButtonDefaults.CompactButtonHeight.
If only an icon is provided it will be laid out vertically and horizontally centered with a default height of ButtonDefaults.CompactButtonHeight and the default width of ButtonDefaults.IconOnlyCompactButtonWidth

If neither icon nor label is provided then the button will displayed like an icon only button but with no contents or background color.

CompactButton takes the ButtonDefaults.buttonColors color scheme by default, with colored background, contrasting content color and no border. This is a high-emphasis button for the primary, most important or most common action on a screen.

Other recommended ButtonColors for different levels of emphasis are: ButtonDefaults.filledTonalButtonColors, ButtonDefaults.outlinedButtonColors and ButtonDefaults.childButtonColors. Buttons can also take an image background using ButtonDefaults.buttonWithContainerPainterColors.

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

Example of a CompactButton with an icon and a label

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.onClick
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.CompactButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

CompactButton(
    onClick = { /* Do something */ },
    icon = {
        Icon(
            painter = painterResource(R.drawable.ic_favorite_rounded),
            contentDescription = "Favorite icon",
            modifier = Modifier.size(ButtonDefaults.ExtraSmallIconSize),
        )
    },
    modifier = modifier,
) {
    Text("Compact Button", maxLines = 1, overflow = TextOverflow.Ellipsis)
}

Example of a CompactButton with an icon and label and with ButtonDefaults.filledTonalButtonColors

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.onClick
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.CompactButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

CompactButton(
    onClick = { /* Do something */ },
    icon = {
        Icon(
            painter = painterResource(R.drawable.ic_favorite_rounded),
            contentDescription = "Favorite icon",
            modifier = Modifier.size(ButtonDefaults.ExtraSmallIconSize),
        )
    },
    colors = ButtonDefaults.filledTonalButtonColors(),
    modifier = modifier,
) {
    Text("Filled Tonal Compact Button", maxLines = 1, overflow = TextOverflow.Ellipsis)
}

Example of a CompactButton with an icon and label and with ButtonDefaults.outlinedButtonBorder and ButtonDefaults.outlinedButtonColors. The example includes a Text that expands and collapses when the CompactButton is clicked.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.material.icons.filled.KeyboardArrowUp
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.onClick
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.CompactButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    var expanded by remember { mutableStateOf(false) }
    if (expanded) {
        Text("A multiline string showing two lines")
    } else {
        Text("One line text")
    }
    Spacer(Modifier.height(ButtonDefaults.IconSpacing))
    CompactButton(
        onClick = { expanded = !expanded },
        colors = ButtonDefaults.outlinedButtonColors(),
        border = ButtonDefaults.outlinedButtonBorder(enabled = true),
        modifier = modifier,
    ) {
        if (expanded) {
            Text("Show Less", maxLines = 1, overflow = TextOverflow.Ellipsis)
        } else {
            Text("Show More", maxLines = 1, overflow = TextOverflow.Ellipsis)
        }
        Spacer(Modifier.width(ButtonDefaults.IconSpacing))
        if (expanded) {
            Icon(
                Icons.Filled.KeyboardArrowUp,
                contentDescription = "Collapse",
                modifier = Modifier.size(ButtonDefaults.ExtraSmallIconSize),
            )
        } else {
            Icon(
                Icons.Filled.KeyboardArrowDown,
                contentDescription = "Expand",
                modifier = Modifier.size(ButtonDefaults.ExtraSmallIconSize),
            )
        }
    }
}

Example of a CompactButton with onLongClick:

import androidx.compose.ui.semantics.onClick
import androidx.compose.ui.semantics.semantics
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.CompactButton
import androidx.wear.compose.material3.Text

CompactButton(
    onClick = onClickHandler,
    onLongClick = onLongClickHandler,
    onLongClickLabel = "Long click",
    label = { Text("Long clickable") },
    modifier =
        modifier.semantics {
            // Also override the 'click label' to say 'Double tap to press' instead of
            // the usual 'Double tap to activate'.
            onClick("press") { false }
        },
)

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`modifier: Modifier = Modifier`	Modifier to be applied to the button
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`icon: (@Composable BoxScope.() -> Unit)? = null`	A slot for providing the button's icon. The contents are expected to be a horizontally and vertically aligned icon of size `ButtonDefaults.ExtraSmallIconSize` when used with a label or `ButtonDefaults.SmallIconSize` when used as the only content in the button.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shape: Shape = ButtonDefaults.compactButtonShape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
`colors: ButtonColors = ButtonDefaults.buttonColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.buttonColors`.
`border: BorderStroke? = null`	Optional `BorderStroke` that will be used to resolve the border for this button in different states.
`contentPadding: PaddingValues = ButtonDefaults.CompactButtonContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`label: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's main label. The contents are expected to be a single line of text which is "start" aligned if there is an icon preset and "center" aligned if not.

ConfirmationDialog

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ConfirmationDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    curvedText: (CurvedScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors(),
    properties: DialogProperties = DialogProperties(),
    durationMillis: Long = ConfirmationDialogDefaults.DurationMillis,
    content: @Composable () -> Unit
): Unit

Shows a transient ConfirmationDialog with an icon and optional very short curvedText. The length of the curved text should be very short and should not exceed 1-2 words. If a longer text is required, then the alternative ConfirmationDialog overload with slot for linear text should be used instead.

The ConfirmationDialog shows a message to the user for durationMillis. After a specified timeout, the onDismissRequest callback will be invoked, where it's up to the caller to handle the dismissal. To hide the confirmation dialog, the visible parameter should be set to false.

Where user input is required, such as choosing to ok or cancel an action, use AlertDialog instead of ConfirmationDialog.

Example of a ConfirmationDialog with an icon and a curved text content:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ConfirmationDialog
import androidx.wear.compose.material3.ConfirmationDialogDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.confirmationDialogCurvedText
import androidx.wear.compose.material3.samples.icons.FavoriteIcon

var showConfirmation by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showConfirmation = true },
        label = { Text("Show Confirmation") },
    )
}

// Has an icon and a short curved text content, which will be displayed along the bottom edge of
// the screen.
val curvedTextStyle = ConfirmationDialogDefaults.curvedTextStyle
ConfirmationDialog(
    visible = showConfirmation,
    onDismissRequest = { showConfirmation = false },
    curvedText = { confirmationDialogCurvedText("Confirmed", curvedTextStyle) },
) {
    FavoriteIcon(ConfirmationDialogDefaults.IconSize)
}

Parameters
`visible: Boolean`	A boolean indicating whether the confirmation dialog should be displayed.
`onDismissRequest: () -> Unit`	A lambda function to be called when the dialog is dismissed - either by swiping right or when the `durationMillis` has passed. Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting `visible` to false.
`curvedText: (CurvedScope.() -> Unit)?`	A slot for displaying curved text content which will be shown along the bottom edge of the dialog. We recommend using `confirmationDialogCurvedText` for this parameter, which will give the default sweep angle and padding.
`modifier: Modifier = Modifier`	Modifier to be applied to the confirmation content.
`colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors()`	A `ConfirmationDialogColors` object for customizing the colors used in this `ConfirmationDialog`.
`properties: DialogProperties = DialogProperties()`	An optional `DialogProperties` object for configuring the dialog's behavior.
`durationMillis: Long = ConfirmationDialogDefaults.DurationMillis`	The duration in milliseconds for which the dialog is displayed. This value will be adjusted by the accessibility manager according to the content displayed.
`content: @Composable () -> Unit`	A slot for displaying an icon inside the confirmation dialog. It's recommended to set its size to `ConfirmationDialogDefaults.IconSize`

ConfirmationDialog

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ConfirmationDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    text: (@Composable ColumnScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors(),
    properties: DialogProperties = DialogProperties(),
    durationMillis: Long = ConfirmationDialogDefaults.DurationMillis,
    content: @Composable () -> Unit
): Unit

Shows a transient ConfirmationDialog with an icon and optional short text. The length of the text should not exceed 3 lines. If the text is very short and fits into 1-2 words, consider using the alternative ConfirmationDialog overload with the curvedText parameter instead.

The confirmation dialog will show a message to the user for durationMillis. After a specified timeout, the onDismissRequest callback will be invoked, where it's up to the caller to handle the dismissal. To hide the confirmation dialog, visible parameter should be set to false.

Where user input is required, such as choosing to ok or cancel an action, use AlertDialog instead of ConfirmationDialog.

Example of a ConfirmationDialog with an icon and a text which fits into 3 lines:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.Send
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ConfirmationDialog
import androidx.wear.compose.material3.ConfirmationDialogDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

var showConfirmation by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showConfirmation = true },
        label = { Text("Show Confirmation") },
    )
}

// Has an icon and a text content. Text will be displayed in the center of the screen below the
// icon.
ConfirmationDialog(
    visible = showConfirmation,
    onDismissRequest = { showConfirmation = false },
    text = { Text(text = "Your message has been sent") },
) {
    Icon(
        imageVector = Icons.AutoMirrored.Filled.Send,
        contentDescription = null,
        modifier = Modifier.size(ConfirmationDialogDefaults.SmallIconSize),
    )
}

Parameters
`visible: Boolean`	A boolean indicating whether the confirmation dialog should be displayed.
`onDismissRequest: () -> Unit`	A lambda function to be called when the dialog is dismissed - either by swiping right or when the `durationMillis` has passed. Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting `visible` to false.
`text: (@Composable ColumnScope.() -> Unit)?`	A slot for displaying text below the icon. It should not exceed 3 lines.
`modifier: Modifier = Modifier`	Modifier to be applied to the confirmation content.
`colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors()`	A `ConfirmationDialogColors` object for customizing the colors used in this `ConfirmationDialog`.
`properties: DialogProperties = DialogProperties()`	An optional `DialogProperties` object for configuring the dialog's behavior.
`durationMillis: Long = ConfirmationDialogDefaults.DurationMillis`	The duration in milliseconds for which the dialog is displayed. This value will be adjusted by the accessibility manager according to the content displayed.
`content: @Composable () -> Unit`	A slot for displaying an icon inside the confirmation dialog, which can be animated. It's recommended to set its size to `ConfirmationDialogDefaults.SmallIconSize`

ConfirmationDialogContent

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ConfirmationDialogContent(
    curvedText: (CurvedScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors(),
    content: @Composable () -> Unit
): Unit

This overload of ConfirmationDialogContent provides the content for a ConfirmationDialog with an icon and optional very short curvedText. The length of the curved text should be very short and should not exceed 1-2 words. If a longer text is required, then the alternative ConfirmationDialog overload with slot for linear text should be used instead.

Prefer using ConfirmationDialog directly, which provides built-in animations when showing/hiding the dialog. This composable may be used to provide the content for a confirmation dialog if custom show/hide animations are required.

Example of a ConfirmationDialog with an icon and a curved text content:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ConfirmationDialog
import androidx.wear.compose.material3.ConfirmationDialogDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.confirmationDialogCurvedText
import androidx.wear.compose.material3.samples.icons.FavoriteIcon

var showConfirmation by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showConfirmation = true },
        label = { Text("Show Confirmation") },
    )
}

// Has an icon and a short curved text content, which will be displayed along the bottom edge of
// the screen.
val curvedTextStyle = ConfirmationDialogDefaults.curvedTextStyle
ConfirmationDialog(
    visible = showConfirmation,
    onDismissRequest = { showConfirmation = false },
    curvedText = { confirmationDialogCurvedText("Confirmed", curvedTextStyle) },
) {
    FavoriteIcon(ConfirmationDialogDefaults.IconSize)
}

Parameters
`curvedText: (CurvedScope.() -> Unit)?`	A slot for displaying curved text content which will be shown along the bottom edge of the dialog. We recommend using `confirmationDialogCurvedText` for this parameter, which will give the default sweep angle and padding.
`modifier: Modifier = Modifier`	Modifier to be applied to the confirmation content.
`colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors()`	A `ConfirmationDialogColors` object for customizing the colors used in this `ConfirmationDialog`.
`content: @Composable () -> Unit`	A slot for displaying an icon inside the confirmation dialog. It's recommended to set its size to `ConfirmationDialogDefaults.IconSize`

ConfirmationDialogContent

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ConfirmationDialogContent(
    text: (@Composable ColumnScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors(),
    content: @Composable () -> Unit
): Unit

This overload of ConfirmationDialogContent provides the content for a ConfirmationDialog with with an icon and optional short text. The length of the text should not exceed 3 lines. If the text is very short and fits into 1-2 words, consider using the alternative ConfirmationDialog overload with the curvedText parameter instead.

Example of a ConfirmationDialog with an icon and a text which fits into 3 lines:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.Send
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ConfirmationDialog
import androidx.wear.compose.material3.ConfirmationDialogDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

var showConfirmation by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showConfirmation = true },
        label = { Text("Show Confirmation") },
    )
}

// Has an icon and a text content. Text will be displayed in the center of the screen below the
// icon.
ConfirmationDialog(
    visible = showConfirmation,
    onDismissRequest = { showConfirmation = false },
    text = { Text(text = "Your message has been sent") },
) {
    Icon(
        imageVector = Icons.AutoMirrored.Filled.Send,
        contentDescription = null,
        modifier = Modifier.size(ConfirmationDialogDefaults.SmallIconSize),
    )
}

Parameters
`text: (@Composable ColumnScope.() -> Unit)?`	A slot for displaying text below the icon. It should not exceed 3 lines.
`modifier: Modifier = Modifier`	Modifier to be applied to the confirmation content.
`colors: ConfirmationDialogColors = ConfirmationDialogDefaults.colors()`	A `ConfirmationDialogColors` object for customizing the colors used in this `ConfirmationDialog`.
`content: @Composable () -> Unit`	A slot for displaying an icon inside the confirmation dialog. It's recommended to set its size to `ConfirmationDialogDefaults.IconSize`

DatePicker

Artifact: androidx.wear.compose:compose-material3

View Source

@RequiresApi(value = 26)
@Composable
fun DatePicker(
    initialDate: LocalDate,
    onDatePicked: (LocalDate) -> Unit,
    modifier: Modifier = Modifier,
    minValidDate: LocalDate? = null,
    maxValidDate: LocalDate? = null,
    datePickerType: DatePickerType = DatePickerDefaults.datePickerType,
    colors: DatePickerColors = DatePickerDefaults.datePickerColors()
): Unit

Full screen DatePicker with day, month, year.

This component is designed to take most/all of the screen and utilizes large fonts.

Example of a DatePicker:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.DatePicker
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

var showDatePicker by remember { mutableStateOf(true) }
var datePickerDate by remember { mutableStateOf(LocalDate.now()) }
val formatter =
    DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
        .withLocale(LocalConfiguration.current.locales[0])
if (showDatePicker) {
    DatePicker(
        initialDate = datePickerDate, // Initialize with last picked date on reopen
        onDatePicked = {
            datePickerDate = it
            showDatePicker = false
        },
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Button(
            onClick = { showDatePicker = true },
            label = { Text("Selected Date") },
            secondaryLabel = { Text(datePickerDate.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}

Example of a DatePicker shows the picker options in year-month-day order:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.DatePicker
import androidx.wear.compose.material3.DatePickerType
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

var showDatePicker by remember { mutableStateOf(true) }
var datePickerDate by remember { mutableStateOf(LocalDate.now()) }

val formatter =
    DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
        .withLocale(LocalConfiguration.current.locales[0])

if (showDatePicker) {
    DatePicker(
        initialDate = datePickerDate, // Initialize with last picked date on reopen
        onDatePicked = {
            datePickerDate = it
            showDatePicker = false
        },
        datePickerType = DatePickerType.YearMonthDay,
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Button(
            onClick = { showDatePicker = true },
            label = { Text("Selected Date") },
            secondaryLabel = { Text(datePickerDate.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}

Example of a DatePicker with a minValidDate:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.DatePicker
import androidx.wear.compose.material3.DatePickerType
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

val currentDate = LocalDate.now()
var showDatePicker by remember { mutableStateOf(true) }
var datePickerDate by remember { mutableStateOf(LocalDate.now()) }
val formatter =
    DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)
        .withLocale(LocalConfiguration.current.locales[0])
if (showDatePicker) {
    DatePicker(
        initialDate = datePickerDate, // Initialize with last picked date on reopen
        onDatePicked = {
            datePickerDate = it
            showDatePicker = false
        },
        datePickerType = DatePickerType.YearMonthDay,
        minValidDate = currentDate,
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Button(
            onClick = { showDatePicker = true },
            label = { Text("Selected Date") },
            secondaryLabel = { Text(datePickerDate.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}

Parameters
`initialDate: LocalDate`	The initial value to be displayed in the DatePicker.
`onDatePicked: (LocalDate) -> Unit`	The callback that is called when the user confirms the date selection. It provides the selected date as `LocalDate`
`modifier: Modifier = Modifier`	Modifier to be applied to the `Box` containing the UI elements.
`minValidDate: LocalDate? = null`	Optional minimum date that can be selected in the DatePicker (inclusive).
`maxValidDate: LocalDate? = null`	Optional maximum date that can be selected in the DatePicker (inclusive).
`datePickerType: DatePickerType = DatePickerDefaults.datePickerType`	The different `DatePickerType` supported by this `DatePicker`.
`colors: DatePickerColors = DatePickerDefaults.datePickerColors()`	`DatePickerColors` to be applied to the DatePicker.

Dialog

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun Dialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    properties: DialogProperties = DialogProperties(),
    content: @Composable () -> Unit
): Unit

A base dialog component used by AlertDialog and ConfirmationDialog variations. This dialog provides a full-screen experience with custom entry/exit animations.

Dialogs provide important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task.

The caller should consider whether timeText or scrollIndicator are needed on this dialog, in this case they should provide that in their content by using ScreenScaffold (with suitable scrollState if that's required).

Parameters
`visible: Boolean`	A boolean value that determines whether the dialog should be displayed.
`onDismissRequest: () -> Unit`	A lambda function to be called when the dialog is dismissed by swiping right. Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting `visible` to false.
`modifier: Modifier = Modifier`	Modifier to be applied to the dialog content.
`properties: DialogProperties = DialogProperties()`	An optional `DialogProperties` object for configuring the dialog's behavior.
`content: @Composable () -> Unit`	A composable function that defines the content of the dialog.

EdgeButton

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun EdgeButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    buttonSize: EdgeButtonSize = EdgeButtonSize.Small,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Wear Material3 EdgeButton that offers a single slot to take any content.

The EdgeButton has a special shape designed for the bottom of the screen, as it almost follows the screen's curvature, so it should be allowed to take the full width and touch the bottom of the screen. It has 4 standard sizes, taking 1 line of text for the extra small, 2 for small and medium, and 3 for the large. See the standard values on ButtonDefaults, and specify it using the buttonSize parameter. Optionally, a single icon can be used instead of the text.

This button represents the most important action on the screen, and must take the whole width of the screen as well as being anchored to the screen bottom.

EdgeButton takes the ButtonDefaults.buttonColors color scheme by default, with colored background, contrasting content color and no border. This is a high-emphasis button for the primary, most important or most common action on a screen. Other possible colors for different levels of emphasis are: FilledTonalButton which defaults to ButtonDefaults.filledTonalButtonColors and OutlinedButton which defaults to ButtonDefaults.outlinedButtonColors

EdgeButton is not intended to be used with an image background.

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

Example of an EdgeButton:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
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.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.EdgeButtonSize
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TextButton
import androidx.wear.compose.material3.TextButtonDefaults

val sizes =
    listOf(
        EdgeButtonSize.ExtraSmall,
        EdgeButtonSize.Small,
        EdgeButtonSize.Medium,
        EdgeButtonSize.Large,
    )
val sizeNames = listOf("XS", "S", "M", "L")
var size by remember { mutableIntStateOf(0) }

Box(Modifier.fillMaxSize()) {
    Column(
        Modifier.align(Alignment.TopCenter).fillMaxSize().padding(top = 0.dp),
        verticalArrangement = Arrangement.spacedBy(0.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Column(modifier = Modifier.weight(1f)) {
            Row { Spacer(modifier = Modifier.height(16.dp)) }
            Row {
                Text("Sizes", modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Center)
            }
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.Center,
            ) {
                repeat(sizeNames.size) {
                    TextButton(
                        onClick = { size = it },
                        modifier = Modifier.size(TextButtonDefaults.SmallButtonSize),
                    ) {
                        Text(sizeNames[it])
                    }
                }
            }
        }
        EdgeButton(onClick = { /* Do something */ }, buttonSize = sizes[size]) {
            Icon(
                Icons.Filled.Check,
                contentDescription = "Check icon",
                modifier = Modifier.size(ButtonDefaults.IconSize),
            )
        }
    }
}

For a sample integrating with ScalingLazyColumn, see:

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.filled.Check
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.EdgeButtonSize
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.RadioButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.samples.icons.CheckIcon

val state = rememberScalingLazyListState()
val horizontalPadding = LocalConfiguration.current.screenWidthDp.dp * 0.052f
val verticalPadding = LocalConfiguration.current.screenHeightDp.dp * 0.16f
val colors =
    listOf(
        "Filled" to ButtonDefaults.buttonColors(),
        "Filled Variant" to ButtonDefaults.filledVariantButtonColors(),
        "Filled Tonal" to ButtonDefaults.filledTonalButtonColors(),
        "Outlined" to ButtonDefaults.outlinedButtonColors(),
        "Disabled" to ButtonDefaults.buttonColors(),
    )
var selectedColor by remember { mutableIntStateOf(0) }
val types = listOf("Icon only" to 0, "Text only" to 1)
var selectedType by remember { mutableIntStateOf(0) }

ScreenScaffold(
    scrollState = state,
    contentPadding = PaddingValues(horizontal = horizontalPadding, vertical = verticalPadding),
    edgeButton = {
        EdgeButton(
            modifier =
                Modifier.scrollable(
                    state,
                    orientation = Orientation.Vertical,
                    reverseDirection = true,
                    // An overscroll effect should be applied to the EdgeButton for proper
                    // scrolling behavior.
                    overscrollEffect = rememberOverscrollEffect(),
                ),
            onClick = {},
            buttonSize = EdgeButtonSize.Medium,
            colors = colors[selectedColor].second,
            border =
                if (colors[selectedColor].first == "Outlined")
                    ButtonDefaults.outlinedButtonBorder(true)
                else null,
            enabled = colors[selectedColor].first != "Disabled",
        ) {
            if (selectedType == 0) {
                // Remove extra spacing around the icon so it integrates better into the scroll.
                CheckIcon(Modifier.size(21.dp).wrapContentSize(unbounded = true).size(32.dp))
            } else {
                Text("Ok")
            }
        }
    },
) { contentPadding ->
    ScalingLazyColumn(
        state = state,
        modifier = Modifier.fillMaxSize().selectableGroup(),
        autoCentering = null,
        contentPadding = contentPadding,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { Text("Color") }
        items(colors.size) { ix ->
            RadioButton(
                label = { Text(colors[ix].first) },
                selected = selectedColor == ix,
                onSelect = { selectedColor = ix },
                modifier = Modifier.fillMaxWidth(),
            )
        }
        item { Text("Type") }
        items(types.size) { ix ->
            RadioButton(
                label = { Text(types[ix].first) },
                selected = selectedType == ix,
                onSelect = { selectedType = ix },
                modifier = Modifier.fillMaxWidth(),
            )
        }
    }
}

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`modifier: Modifier = Modifier`	Modifier to be applied to the button. When animating the button to appear/ disappear from the screen, a Modifier.height can be used to change the height of the component, but that won't change the space available for the content (though it may be scaled)
`buttonSize: EdgeButtonSize = EdgeButtonSize.Small`	Defines the size of the button. See `EdgeButtonSize`.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable
`colors: ButtonColors = ButtonDefaults.buttonColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.buttonColors`.
`border: BorderStroke? = null`	Optional `BorderStroke` that will be used to resolve the border for this button in different states.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable RowScope.() -> Unit`	Slot for composable body content displayed on the Button. Either an Icon or Text. Note that when using an Icon is recommended to remove any extra spacing the icon may have, either processing the image or using something like the list sample.

FadingExpandingLabel

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun FadingExpandingLabel(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = LocalTextConfiguration.current.textAlign,
    lineHeight: TextUnit = TextUnit.Unspecified,
    softWrap: Boolean = true,
    maxLines: Int = LocalTextConfiguration.current.maxLines,
    minLines: Int = 1,
    textStyle: TextStyle = LocalTextStyle.current,
    animationSpec: FiniteAnimationSpec<Float> = FadingExpandingLabelDefaults.animationSpec
): Unit

Animates label text for which the number of lines can vary, changing the size of the container component.

Displays the given string in a Text, with an animation that fades text in line by line when new lines of text are added or removed. This is intended to be be used for labels in a Button or Card, where we want the container to expand to fit the contents when the lines of the text change.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.FadingExpandingLabel

var text by remember { mutableStateOf("Text Text Text Text") }
var lines by remember { mutableIntStateOf(1) }

Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Button(
        onClick = {
            lines = lines % 3 + 1
            text = (1..lines).joinToString(separator = " ") { "Text Text Text Text" }
        },
        modifier = Modifier.fillMaxWidth(),
        label = { FadingExpandingLabel(text = text, textAlign = TextAlign.Left) },
    )
}

Parameters
`text: String`	Text string that will be shown.
`modifier: Modifier = Modifier`	Modifier to be applied to the animated text.
`color: Color = Color.Unspecified`	`Color` to apply to the text. If `Color.Unspecified`, and `textStyle` has no color set,this will be `LocalContentColor`.
`fontSize: TextUnit = TextUnit.Unspecified`	The size of glyphs to use when painting the text. See `TextStyle.fontSize`.
`fontStyle: FontStyle? = null`	The typeface variant to use when drawing the letters (e.g., italic). See `TextStyle.fontStyle`.
`fontWeight: FontWeight? = null`	The typeface thickness to use when painting the text (e.g., `FontWeight.Bold`).
`fontFamily: FontFamily? = null`	The font family to be used when rendering the text. See `TextStyle.fontFamily`.
`letterSpacing: TextUnit = TextUnit.Unspecified`	The amount of space to add between each letter. See `TextStyle.letterSpacing`.
`textDecoration: TextDecoration? = null`	The decorations to paint on the text (e.g., an underline). See `TextStyle.textDecoration`.
`textAlign: TextAlign? = LocalTextConfiguration.current.textAlign`	The alignment of the text within the lines of the paragraph. See `TextStyle.textAlign`.
`lineHeight: TextUnit = TextUnit.Unspecified`	Line height for the Paragraph in `TextUnit` unit, e.g. SP or EM. See `TextStyle.lineHeight`.
`softWrap: Boolean = true`	Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If `softWrap` is false, TextAlign may have unexpected effects.
`maxLines: Int = LocalTextConfiguration.current.maxLines`	An optional maximum number of lines for the text to span, wrapping if necessary. If it is not null, then it must be greater than zero.
`minLines: Int = 1`	The minimum height in terms of minimum number of visible lines. It is required that 1 <= `minLines`<= `maxLines`.
`textStyle: TextStyle = LocalTextStyle.current`	`TextStyle` for the animated text.
`animationSpec: FiniteAnimationSpec<Float> = FadingExpandingLabelDefaults.animationSpec`	Animation spec for the text fade animation.

FailureConfirmationDialog

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun FailureConfirmationDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    curvedText: (CurvedScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.failureColors(),
    properties: DialogProperties = DialogProperties(),
    durationMillis: Long = ConfirmationDialogDefaults.DurationMillis,
    content: @Composable () -> Unit = { ConfirmationDialogDefaults.ConnectionFailureIcon() }
): Unit

Shows a FailureConfirmationDialog with a failure icon and an optional short curved text. This variation of confirmation dialog indicates an unsuccessful operation or action.

Where user input is required, such as choosing to ok or cancel an action, use AlertDialog instead of FailureConfirmationDialog.

Example of FailureConfirmationDialog usage with default icon:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ConfirmationDialog
import androidx.wear.compose.material3.ConfirmationDialogDefaults
import androidx.wear.compose.material3.FailureConfirmationDialog
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.confirmationDialogCurvedText

var showConfirmation by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showConfirmation = true },
        label = { Text("Show Confirmation") },
    )
}

val text = "Failure"
val style = ConfirmationDialogDefaults.curvedTextStyle
FailureConfirmationDialog(
    visible = showConfirmation,
    onDismissRequest = { showConfirmation = false },
    curvedText = { confirmationDialogCurvedText(text, style) },
)

Example of FailureConfirmationDialog with the variant failure icon for a generic error.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ConfirmationDialog
import androidx.wear.compose.material3.ConfirmationDialogDefaults
import androidx.wear.compose.material3.FailureConfirmationDialog
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.confirmationDialogCurvedText

var showConfirmation by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showConfirmation = true },
        label = { Text("Show Confirmation") },
    )
}

val text = "Failure"
val style = ConfirmationDialogDefaults.curvedTextStyle
FailureConfirmationDialog(
    visible = showConfirmation,
    onDismissRequest = { showConfirmation = false },
    curvedText = { confirmationDialogCurvedText(text, style) },
    content = { ConfirmationDialogDefaults.GenericFailureIcon() },
)

Parameters
`visible: Boolean`	A boolean indicating whether the confirmation dialog should be displayed.
`onDismissRequest: () -> Unit`	A lambda function to be called when the dialog is dismissed - either by swiping right or when the `durationMillis` has passed. Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting `visible` to false.
`curvedText: (CurvedScope.() -> Unit)?`	A slot for displaying curved text content which will be shown along the bottom edge of the dialog. We recommend using `confirmationDialogCurvedText` for this parameter, which will give the default sweep angle and padding.
`modifier: Modifier = Modifier`	Modifier to be applied to the confirmation content.
`colors: ConfirmationDialogColors = ConfirmationDialogDefaults.failureColors()`	A `ConfirmationDialogColors` object for customizing the colors used in this `FailureConfirmationDialog`.
`properties: DialogProperties = DialogProperties()`	An optional `DialogProperties` object for configuring the dialog's behavior.
`durationMillis: Long = ConfirmationDialogDefaults.DurationMillis`	The duration in milliseconds for which the dialog is displayed. This value will be adjusted by the accessibility manager according to the content displayed.
`content: @Composable () -> Unit = { ConfirmationDialogDefaults.ConnectionFailureIcon() }`	A slot for displaying an icon inside the confirmation dialog, which can be animated. The default value is `ConfirmationDialogDefaults.ConnectionFailureIcon`, which shows a broken connection to the phone icon. Alternatively, provide `ConfirmationDialogDefaults.GenericFailureIcon` for a generic error icon.

FailureConfirmationDialogContent

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun FailureConfirmationDialogContent(
    curvedText: (CurvedScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.failureColors(),
    content: @Composable () -> Unit = { ConfirmationDialogDefaults.ConnectionFailureIcon() }
): Unit

FailureConfirmationDialogContent provides the content for a failure confirmation dialog with icon and an optional short curved text. This variation of confirmation dialog indicates an unsuccessful operation or action.

Prefer using FailureConfirmationDialog directly, which provides built-in animations when showing/hiding the dialog. This composable may be used to provide the content for a confirmation dialog if custom show/hide animations are required.

Where user input is required, such as choosing to ok or cancel an action, use AlertDialog instead of FailureConfirmationDialog.

Parameters
`curvedText: (CurvedScope.() -> Unit)?`	A slot for displaying curved text content which will be shown along the bottom edge of the dialog. We recommend using `confirmationDialogCurvedText` for this parameter, which will give the default sweep angle and padding.
`modifier: Modifier = Modifier`	Modifier to be applied to the confirmation content.
`colors: ConfirmationDialogColors = ConfirmationDialogDefaults.failureColors()`	A `ConfirmationDialogColors` object for customizing the colors used in this `FailureConfirmationDialog`. will be adjusted by the accessibility manager according to the content displayed.
`content: @Composable () -> Unit = { ConfirmationDialogDefaults.ConnectionFailureIcon() }`	A slot for displaying an icon inside the confirmation dialog, which can be animated. The default value is `ConfirmationDialogDefaults.ConnectionFailureIcon`, which shows a broken connection to the phone icon. Alternatively, provide `ConfirmationDialogDefaults.GenericFailureIcon` for a generic error icon.

FilledIconButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun FilledIconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shapes: IconButtonShapes = IconButtonDefaults.shapes(),
    colors: IconButtonColors = IconButtonDefaults.filledIconButtonColors(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material FilledIconButton is a circular, icon-only button with a colored background and a contrasting content color. It offers a single slot to take an icon or image.

Set the size of the FilledIconButton with Modifier.touchTargetAwareSize to ensure that the recommended minimum touch target size is available.

Use IconButtonDefaults.iconSizeFor to determine the icon size for a given IconButton size, or refer to icon sizes IconButtonDefaults.SmallIconSize, IconButtonDefaults.DefaultIconSize, IconButtonDefaults.LargeIconSize directly.

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

Example of FilledIconButton:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.wear.compose.material3.FilledIconButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton

FilledIconButton(onClick = { /* Do something */ }) {
    Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button.
`modifier: Modifier = Modifier`	Modifier to be applied to the button.
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shapes: IconButtonShapes = IconButtonDefaults.shapes()`	Defines the shape for this button. Defaults to a static shape based on `IconButtonDefaults.shape`, but animated versions are available through `IconButtonDefaults.animatedShapes`.
`colors: IconButtonColors = IconButtonDefaults.filledIconButtonColors()`	`IconButtonColors` that will be used to resolve the container and content color for this icon button in different states.
`border: BorderStroke? = null`	Optional `BorderStroke` for the icon button border.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable BoxScope.() -> Unit`	The content displayed on the icon button, expected to be icon or image.

FilledTonalButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun FilledTonalButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.filledTonalButtonColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Base level Wear Material3 FilledTonalButton that offers a single slot to take any content. Used as the container for more opinionated FilledTonalButton components that take specific content such as icons and labels.

The FilledTonalButton is Stadium-shaped by default and has a max height designed to take no more than two lines of text of Typography.labelMedium style. With localisation and/or large font sizes, the text can extend to a maximum of 3 lines in which case, the FilledTonalButton height adjusts to accommodate the contents. The FilledTonalButton can have an icon or image horizontally parallel to the two lines of text.

FilledTonalButton takes the ButtonDefaults.filledTonalButtonColors color scheme by default, with muted background, contrasting content color and no border. This is a medium-emphasis button for important actions that don't distract from other onscreen elements, such as final or unblocking actions in a flow with less emphasis than Button.

Other recommended buttons with ButtonColors for different levels of emphasis are: Button which defaults to ButtonDefaults.buttonColors, OutlinedButton which defaults to ButtonDefaults.outlinedButtonColors and ChildButton which defaults to ButtonDefaults.childButtonColors. For a background image, see the overload of Button with a containerPainter parameter.

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

Example of a FilledTonalButton:

import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Text

FilledTonalButton(
    onClick = { /* Do something */ },
    label = { Text("Filled Tonal Button") },
    modifier = modifier,
)

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`modifier: Modifier = Modifier`	Modifier to be applied to the button
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable
`shape: Shape = ButtonDefaults.shape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
`colors: ButtonColors = ButtonDefaults.filledTonalButtonColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.filledTonalButtonColors`.
`border: BorderStroke? = null`	Optional `BorderStroke` that will be used to resolve the border for this button in different states.
`contentPadding: PaddingValues = ButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`content: @Composable RowScope.() -> Unit`	Slot for composable body content displayed on the Button

FilledTonalButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun FilledTonalButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.filledTonalButtonColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    label: @Composable RowScope.() -> Unit
): Unit

Wear Material3 FilledTonalButton 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 FilledTonalButton is stadium-shaped by default and its standard height is designed to take 2 lines of text of Typography.labelMedium style - either a two-line label or both a single line label and a secondary label. With localisation and/or large font sizes, the FilledTonalButton height adjusts to accommodate the contents. The label and secondary label should be consistently aligned.

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.

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

Example of a FilledTonalButton with an icon and secondary label:

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

FilledTonalButton(
    onClick = { /* Do something */ },
    label = { Text("Filled Tonal Button") },
    secondaryLabel = { Text("Secondary label") },
    icon = {
        Icon(
            painter = painterResource(R.drawable.ic_favorite_rounded),
            contentDescription = "Favorite icon",
            modifier = Modifier.size(ButtonDefaults.IconSize),
        )
    },
    modifier = modifier,
)

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`modifier: Modifier = Modifier`	Modifier to be applied to the button
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`secondaryLabel: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's secondary label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not. label and secondaryLabel contents should be consistently aligned.
`icon: (@Composable BoxScope.() -> Unit)? = null`	A slot for providing the button's icon. The contents are expected to be a horizontally and vertically aligned icon of size `ButtonDefaults.IconSize` or `ButtonDefaults.LargeIconSize`.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable
`shape: Shape = ButtonDefaults.shape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
`colors: ButtonColors = ButtonDefaults.filledTonalButtonColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.filledTonalButtonColors`.
`border: BorderStroke? = null`	Optional `BorderStroke` that will be used to resolve the button border in different states.
`contentPadding: PaddingValues = ButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`label: @Composable RowScope.() -> Unit`	A slot for providing the button's main label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not.

FilledTonalIconButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun FilledTonalIconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shapes: IconButtonShapes = IconButtonDefaults.shapes(),
    colors: IconButtonColors = IconButtonDefaults.filledTonalIconButtonColors(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material FilledTonalIconButton is a circular, icon-only button with a muted, colored background and a contrasting icon color. It offers a single slot to take an icon or image.

Set the size of the FilledTonalIconButton with Modifier.touchTargetAwareSize to ensure that the recommended minimum touch target size is available.

Use IconButtonDefaults.iconSizeFor to determine the icon size for a given IconButtonDefaults size, or refer to icon sizes IconButtonDefaults.SmallIconSize, IconButtonDefaults.DefaultIconSize, IconButtonDefaults.LargeButtonSize directly.

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

Example of FilledTonalIconButton:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.wear.compose.material3.FilledTonalIconButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton

FilledTonalIconButton(onClick = { /* Do something */ }) {
    Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button.
`modifier: Modifier = Modifier`	Modifier to be applied to the button.
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shapes: IconButtonShapes = IconButtonDefaults.shapes()`	Defines the shape for this button. Defaults to a static shape based on `IconButtonDefaults.shape`, but animated versions are available through `IconButtonDefaults.animatedShapes`.
`colors: IconButtonColors = IconButtonDefaults.filledTonalIconButtonColors()`	`IconButtonColors` that will be used to resolve the background and icon color for this button in different states.
`border: BorderStroke? = null`	Optional `BorderStroke` for the icon button border.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable BoxScope.() -> Unit`	The content displayed on the icon button, expected to be icon or image.

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun HorizontalPageIndicator(
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    selectedColor: Color = PageIndicatorDefaults.selectedColor,
    unselectedColor: Color = PageIndicatorDefaults.unselectedColor,
    backgroundColor: Color = PageIndicatorDefaults.backgroundColor
): Unit

Horizontal page indicator for use with HorizontalPager, representing the currently active page and the approximate number of pages. Pages are indicated as a Circle shape. The indicator shows up to six pages individually - if there are more than six pages, HorizontalPageIndicator shows a smaller indicator to the left and/or right to indicate that more pages are available.

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 - current page could be 6, 7 or 8 out of 10, as there are more potential pages on the left and on the right.

o O O O X O - current page is 9 out of 10, as there no more items on the right

To comply with Wear Material Design guidelines, this composable should be aligned to the bottom center of the screen using Alignment.BottomCenter, such as by setting modifier = Modifier.align(Alignment.BottomCenter). If HorizontalPageIndicator is used through HorizontalPagerScaffold, then alignment is implicitly set by HorizontalPagerScaffold.

Example usage with HorizontalPager:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.HorizontalPageIndicator
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.Text

val pageCount = 9
val pagerState = rememberPagerState { pageCount }

Box {
    HorizontalPagerScaffold(
        pagerState = pagerState,
        pageIndicator = { HorizontalPageIndicator(pagerState = pagerState) },
    ) {
        HorizontalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(state = pagerState),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Page #$page")
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(text = "Swipe left and right")
                    if (page == 0) {
                        Spacer(modifier = Modifier.height(8.dp))
                        Button(onClick = navigateBack) { Text("Exit") }
                    }
                }
            }
        }
    }
}

Parameters
`pagerState: PagerState`	State of the `HorizontalPager` used to control this indicator
`modifier: Modifier = Modifier`	Modifier to be applied to the `HorizontalPageIndicator`
`selectedColor: Color = PageIndicatorDefaults.selectedColor`	The color which will be used for a selected indicator item.
`unselectedColor: Color = PageIndicatorDefaults.unselectedColor`	The color which will be used for an unselected indicator item.
`backgroundColor: Color = PageIndicatorDefaults.backgroundColor`	The color which will be used for an indicator background.

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun HorizontalPagerScaffold(
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    pageIndicator: (@Composable BoxScope.() -> Unit)? = { HorizontalPageIndicator(pagerState) },
    pageIndicatorAnimationSpec: AnimationSpec<Float>? = null,
    content: @Composable () -> Unit
): Unit

HorizontalPagerScaffold is one of the Wear Material3 scaffold components.

The scaffold components AppScaffold and HorizontalPagerScaffold lay out the structure of a Pager and coordinate transitions of the HorizontalPageIndicator and TimeText components.

HorizontalPagerScaffold displays the HorizontalPageIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and HorizontalPageIndicator according to whether the Pager is being paged, this is determined by the PagerState.

Example of using AppScaffold and HorizontalPagerScaffold:

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.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPagerScaffold(pagerState = pagerState) {
        HorizontalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(state = pagerState),
            rotaryScrollableBehavior = null,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe left and right")
                        if (page == 0) {
                            Spacer(modifier = Modifier.height(16.dp))
                            Button(onClick = navigateBack) { Text("Exit") }
                        }
                    }
                }
            }
        }
    }
}

Parameters
`pagerState: PagerState`	The state of the pager controlling the page content.
`modifier: Modifier = Modifier`	The modifier to be applied to the scaffold.
`pageIndicator: (@Composable BoxScope.() -> Unit)? = { HorizontalPageIndicator(pagerState) }`	A composable function that defines the page indicator to be displayed. By default, it uses a `HorizontalPageIndicator`.
`pageIndicatorAnimationSpec: AnimationSpec<Float>? = null`	An optional parameter to set whether the page indicator should fade out when paging has finished. This is useful for when the underlying page content conflicts with the page indicator. By default this is null, so the page indicator will be visible at all times, setting this to `PagerScaffoldDefaults.FadeOutAnimationSpec` ensures the indicator only shows during paging, and fades out when the Pager is idle.
`content: @Composable () -> Unit`	A composable function where a HorizontalPager can be added.

Icon

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

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

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

Parameters
`bitmap: ImageBitmap`	`ImageBitmap` to draw inside this Icon
`contentDescription: String?`	Text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
`modifier: Modifier = Modifier`	Optional `Modifier` for this Icon
`tint: Color = LocalContentColor.current`	Tint to be applied to `bitmap`. If `Color.Unspecified` is provided, then no tint is applied

Icon

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

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

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

Parameters
`imageVector: ImageVector`	`ImageVector` to draw inside this Icon
`contentDescription: String?`	Text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
`modifier: Modifier = Modifier`	Optional `Modifier` for this Icon
`tint: Color = LocalContentColor.current`	Tint to be applied to `imageVector`. If `Color.Unspecified` is provided, then no tint is applied

Icon

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

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

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

Parameters
`painter: Painter`	`Painter` to draw inside this Icon
`contentDescription: String?`	Text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
`modifier: Modifier = Modifier`	Optional `Modifier` for this Icon
`tint: Color = LocalContentColor.current`	Tint to be applied to `painter`. If `Color.Unspecified` is provided, then no tint is applied

IconButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shapes: IconButtonShapes = IconButtonDefaults.shapes(),
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material IconButton is a circular, icon-only button with transparent background and no border. It offers a single slot to take icon or image content.

Set the size of the IconButton with Modifier.touchTargetAwareSize to ensure that the recommended minimum touch target size is available.

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

Example of an IconButton:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton

IconButton(onClick = { /* Do something */ }) {
    Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}

Example of an IconButton with onLongClick:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton

IconButton(
    onClick = { /* Do something for onClick*/ },
    onLongClick = onLongClick,
    onLongClickLabel = "Long click",
) {
    Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}

Example of an IconButton with shape animation of rounded corners on press:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.wear.compose.material3.FilledIconButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton
import androidx.wear.compose.material3.IconButtonDefaults

FilledIconButton(
    onClick = { /* Do something */ },
    shapes = IconButtonDefaults.animatedShapes(),
    colors = colors,
) {
    Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}

Example of an IconButton with image content:

import androidx.compose.foundation.Image
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.layout.ContentScale
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton
import androidx.wear.compose.material3.IconButtonDefaults

IconButton(onClick = { /* Do something */ }, shapes = shapes, enabled = enabled) {
    Image(
        painter = painter,
        contentDescription = null,
        contentScale = ContentScale.Crop,
        modifier =
            if (enabled) Modifier else Modifier.alpha(IconButtonDefaults.DisabledImageOpacity),
    )
}

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button.
`modifier: Modifier = Modifier`	Modifier to be applied to the button.
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shapes: IconButtonShapes = IconButtonDefaults.shapes()`	Defines the shape for this button. Defaults to a static shape based on `IconButtonDefaults.shape`, but animated versions are available through `IconButtonDefaults.animatedShapes`.
`colors: IconButtonColors = IconButtonDefaults.iconButtonColors()`	`IconButtonColors` that will be used to resolve the background and icon color for this button in different states.
`border: BorderStroke? = null`	Optional `BorderStroke` for the icon button border.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable BoxScope.() -> Unit`	The content displayed on the icon button, expected to be icon or image.

IconToggleButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconToggleButtonColors = IconToggleButtonDefaults.colors(),
    interactionSource: MutableInteractionSource? = null,
    shapes: IconToggleButtonShapes = IconToggleButtonDefaults.shapes(),
    border: BorderStroke? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material IconToggleButton is a filled icon toggle button which switches between primary colors and tonal colors depending on checked value, and offers a single slot for icon or image.

Set the size of the IconToggleButton with Modifier.touchTargetAwareSize to ensure that the background padding will correctly reach the edge of the minimum touch target. The recommended icon toggle button sizes are IconToggleButtonDefaults.Size, IconToggleButtonDefaults.SmallSize, IconToggleButtonDefaults.LargeSize and IconToggleButtonDefaults.ExtraLargeSize.

Use IconToggleButtonDefaults.iconSizeFor to determine the icon size for a given IconToggleButton size, or refer to icon sizes, IconToggleButtonDefaults.DefaultIconSize, IconToggleButtonDefaults.LargeIconSize, IconToggleButtonDefaults.ExtraLargeIconSize directly.

IconToggleButton can be enabled or disabled. A disabled button will not respond to click events. When enabled, the checked and unchecked events are propagated by onCheckedChange.

A simple icon toggle button using the default colors, animated when pressed.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.width
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.material3.IconToggleButton
import androidx.wear.compose.material3.IconToggleButtonDefaults
import androidx.wear.compose.material3.samples.icons.WifiOffIcon
import androidx.wear.compose.material3.samples.icons.WifiOnIcon

var firstChecked by remember { mutableStateOf(true) }
var secondChecked by remember { mutableStateOf(false) }

Row(
    modifier = Modifier.fillMaxSize(),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
) {
    IconToggleButton(
        checked = firstChecked,
        onCheckedChange = { firstChecked = !firstChecked },
        shapes = IconToggleButtonDefaults.animatedShapes(),
    ) {
        if (firstChecked) {
            WifiOnIcon()
        } else {
            WifiOffIcon()
        }
    }

    Spacer(modifier = Modifier.width(5.dp))

    IconToggleButton(
        checked = secondChecked,
        onCheckedChange = { secondChecked = !secondChecked },
        shapes = IconToggleButtonDefaults.animatedShapes(),
    ) {
        if (secondChecked) {
            WifiOnIcon()
        } else {
            WifiOffIcon()
        }
    }
}

A simple icon toggle button using the default colors, animated when pressed, with different shapes and icons for the checked and unchecked states.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.width
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.material3.IconToggleButton
import androidx.wear.compose.material3.IconToggleButtonDefaults
import androidx.wear.compose.material3.samples.icons.WifiOffIcon
import androidx.wear.compose.material3.samples.icons.WifiOnIcon

var firstChecked by remember { mutableStateOf(true) }
var secondChecked by remember { mutableStateOf(false) }

Row(
    modifier = Modifier.fillMaxSize(),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
) {
    IconToggleButton(
        checked = firstChecked,
        onCheckedChange = { firstChecked = !firstChecked },
        shapes = IconToggleButtonDefaults.variantAnimatedShapes(),
    ) {
        if (firstChecked) {
            WifiOnIcon()
        } else {
            WifiOffIcon()
        }
    }

    Spacer(modifier = Modifier.width(5.dp))

    IconToggleButton(
        checked = secondChecked,
        onCheckedChange = { secondChecked = !secondChecked },
        shapes = IconToggleButtonDefaults.variantAnimatedShapes(),
    ) {
        if (secondChecked) {
            WifiOnIcon()
        } else {
            WifiOffIcon()
        }
    }
}

Parameters
`checked: Boolean`	Boolean flag indicating whether this toggle button is currently checked.
`onCheckedChange: (Boolean) -> Unit`	Callback to be invoked when this toggle button is clicked.
`modifier: Modifier = Modifier`	Modifier to be applied to the toggle button.
`enabled: Boolean = true`	Controls the enabled state of the toggle button. When `false`, this toggle button will not be clickable.
`colors: IconToggleButtonColors = IconToggleButtonDefaults.colors()`	`IconToggleButtonColors` that will be used to resolve the container and content color for this toggle button.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`shapes: IconToggleButtonShapes = IconToggleButtonDefaults.shapes()`	Defines the shape for this toggle button. Defaults to a static shape based on `IconToggleButtonDefaults.shape`, but animated versions are available through `IconToggleButtonDefaults.animatedShapes` and `IconToggleButtonDefaults.variantAnimatedShapes`.
`border: BorderStroke? = null`	Optional `BorderStroke` for the `IconToggleButton`.
`content: @Composable BoxScope.() -> Unit`	The content to be drawn inside the toggle button.

LevelIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun LevelIndicator(
    value: () -> Float,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: LevelIndicatorColors = LevelIndicatorDefaults.colors(),
    strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth,
    sweepAngle: @FloatRange(from = 0.0, to = 360.0) Float = LevelIndicatorDefaults.SweepAngle,
    reverseDirection: Boolean = false
): Unit

Creates a LevelIndicator for screens that that control a setting such as volume with either rotating side button, rotating bezel.

Example of LevelIndicator:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.mutableFloatStateOf
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.material3.IconButton
import androidx.wear.compose.material3.LevelIndicator
import androidx.wear.compose.material3.StepperDefaults
import androidx.wear.compose.material3.samples.icons.VolumeDownIcon
import androidx.wear.compose.material3.samples.icons.VolumeUpIcon

var value by remember { mutableFloatStateOf(0.5f) }
Box(modifier = Modifier.fillMaxSize()) {
    Column(
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize(),
    ) {
        IconButton(
            modifier = Modifier.padding(horizontal = 16.dp),
            enabled = value < 1f,
            onClick = { value += 0.1f },
        ) {
            VolumeUpIcon(StepperDefaults.IconSize)
        }
        IconButton(
            modifier = Modifier.padding(horizontal = 16.dp),
            enabled = value > 0f,
            onClick = { value -= 0.1f },
        ) {
            VolumeDownIcon(StepperDefaults.IconSize)
        }
    }
    LevelIndicator(value = { value }, modifier = Modifier.align(Alignment.CenterStart))
}

Parameters
`value: () -> Float`	Value of the indicator as a fraction in the range 0,1. Values outside of the range 0,1 will be coerced.
`modifier: Modifier = Modifier`	Modifier to be applied to the component
`enabled: Boolean = true`	Controls the enabled state of `LevelIndicator` - when false, disabled colors will be used.
`colors: LevelIndicatorColors = LevelIndicatorDefaults.colors()`	`LevelIndicatorColors` that will be used to resolve the indicator and track colors for this `LevelIndicator` in different states
`strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth`	The stroke width for the indicator and track strokes
`sweepAngle: @FloatRange(from = 0.0, to = 360.0) Float = LevelIndicatorDefaults.SweepAngle`	The angle covered by the curved LevelIndicator, in degrees
`reverseDirection: Boolean = false`	Reverses direction of PositionIndicator if true

LinearProgressIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun LinearProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors(),
    strokeWidth: Dp = LinearProgressIndicatorDefaults.StrokeWidthLarge,
    enabled: Boolean = true
): Unit

Material Design linear progress indicator.

The LinearProgressIndicator displays progress as a horizontal bar, consisting of two visual components:

Track: The background line representing the total range of progress.
Indicator: A colored line that fills the track, indicating the current progress value.

The indicator also includes a small dot at the end of the progress line. This dot serves as an accessibility feature to show the range of the indicator.

Progress updates will be animated. Small progress values that are larger than zero will be rounded up to at least the stroke width.

LinearProgressIndicator sample:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.ProgressBarRangeInfo
import androidx.compose.ui.semantics.progressBarRangeInfo
import androidx.compose.ui.semantics.semantics
import androidx.wear.compose.material3.LinearProgressIndicator
import androidx.wear.compose.material3.MaterialTheme

Box(
    modifier = Modifier.background(MaterialTheme.colorScheme.background).fillMaxSize(),
    contentAlignment = Alignment.Center,
) {
    LinearProgressIndicator(
        progress = progress,
        enabled = enabled,
        modifier =
            Modifier.semantics(mergeDescendants = true) {
                progressBarRangeInfo = ProgressBarRangeInfo(progress(), 0f..1f)
            },
    )
}

Parameters
`progress: () -> Float`	The progress of this progress indicator where 0.0 represents no progress and 1.0 represents completion. Values outside of this range are coerced into the range 0..1. Progress value changes will be animated.
`modifier: Modifier = Modifier`	Modifier to be applied to the `LinearProgressIndicator`.
`colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors()`	`ProgressIndicatorColors` that will be used to resolve the indicator and track colors for this progress indicator in different states.
`strokeWidth: Dp = LinearProgressIndicatorDefaults.StrokeWidthLarge`	The stroke width for the progress indicator. The minimum value is `LinearProgressIndicatorDefaults.StrokeWidthSmall` to ensure that the dot drawn at the end of the range can be distinguished.
`enabled: Boolean = true`	controls the enabled state. Although this component is not clickable, it can be contained within a clickable component. When enabled is `false`, this component will appear visually disabled.

ListHeader

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun ListHeader(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = ListHeaderDefaults.contentColor,
    contentPadding: PaddingValues = ListHeaderDefaults.ContentPadding,
    transformation: SurfaceTransformation? = null,
    content: @Composable RowScope.() -> Unit
): Unit

A slot based composable for creating a list header item. ListHeaders are typically expected to be a few words of text on a single line. The contents will be start and end padded.

ListHeader scales itself appropriately when used within the scope of a TransformingLazyColumn.

Example of a ListHeader:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
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.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.ListHeader
import androidx.wear.compose.material3.ListSubHeader
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

val scrollState = rememberScalingLazyListState()

ScreenScaffold(scrollState = scrollState, modifier = Modifier.background(Color.Black)) {
    contentPadding ->
    ScalingLazyColumn(
        state = scrollState,
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        contentPadding = contentPadding,
    ) {
        item { ListHeader { Text("Settings") } }
        item {
            ListSubHeader(
                icon = {
                    Icon(
                        painter = painterResource(R.drawable.ic_connectivity),
                        contentDescription = "Connectivity",
                    )
                },
                label = { Text("Connectivity") },
            )
        }
        item {
            Button(
                modifier = Modifier.fillMaxWidth(),
                onClick = {},
                icon = {
                    Icon(
                        painter = painterResource(R.drawable.ic_bluetooth),
                        contentDescription = "Bluetooth",
                        modifier = Modifier.size(ButtonDefaults.IconSize),
                    )
                },
            ) {
                Text("Bluetooth")
            }
        }
        item {
            Button(
                modifier = Modifier.fillMaxWidth(),
                onClick = {},
                icon = {
                    Icon(
                        painter = painterResource(R.drawable.ic_wifi),
                        contentDescription = "Wifi",
                        modifier = Modifier.size(ButtonDefaults.IconSize),
                    )
                },
            ) {
                Text("Wifi")
            }
        }
        item { ListSubHeader { Text("Display") } }
        item {
            Button(modifier = Modifier.fillMaxWidth(), onClick = {}) {
                Text("Change Watchface")
            }
        }
        item { Button(modifier = Modifier.fillMaxWidth(), onClick = {}) { Text("Brightness") } }
    }
}

Parameters
`modifier: Modifier = Modifier`	The modifier for the `ListHeader`.
`backgroundColor: Color = Color.Transparent`	The background color to apply - typically Color.Transparent
`contentColor: Color = ListHeaderDefaults.contentColor`	The color to apply to content.
`contentPadding: PaddingValues = ListHeaderDefaults.ContentPadding`	The spacing values to apply internally between the background and the content.
`transformation: SurfaceTransformation? = null`	Transformation to be used when header appears inside the container that needs to dynamically change its content separately from the background.
`content: @Composable RowScope.() -> Unit`	Slot for `ListHeader` content, expected to be a single line of text.

ListSubHeader

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun ListSubHeader(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = ListHeaderDefaults.subHeaderContentColor,
    contentPadding: PaddingValues = ListHeaderDefaults.SubHeaderContentPadding,
    transformation: SurfaceTransformation? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit
): Unit

A two slot based composable for creating a list sub-header item. ListSubHeaders offer slots for an icon and for a text label. The contents will be start and end padded.

ListSubHeader scales itself appropriately when used within the scope of a TransformingLazyColumn.

Example with use of ListSubHeader:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
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.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.ListHeader
import androidx.wear.compose.material3.ListSubHeader
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

val scrollState = rememberScalingLazyListState()

ScreenScaffold(scrollState = scrollState, modifier = Modifier.background(Color.Black)) {
    contentPadding ->
    ScalingLazyColumn(
        state = scrollState,
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        contentPadding = contentPadding,
    ) {
        item { ListHeader { Text("Settings") } }
        item {
            ListSubHeader(
                icon = {
                    Icon(
                        painter = painterResource(R.drawable.ic_connectivity),
                        contentDescription = "Connectivity",
                    )
                },
                label = { Text("Connectivity") },
            )
        }
        item {
            Button(
                modifier = Modifier.fillMaxWidth(),
                onClick = {},
                icon = {
                    Icon(
                        painter = painterResource(R.drawable.ic_bluetooth),
                        contentDescription = "Bluetooth",
                        modifier = Modifier.size(ButtonDefaults.IconSize),
                    )
                },
            ) {
                Text("Bluetooth")
            }
        }
        item {
            Button(
                modifier = Modifier.fillMaxWidth(),
                onClick = {},
                icon = {
                    Icon(
                        painter = painterResource(R.drawable.ic_wifi),
                        contentDescription = "Wifi",
                        modifier = Modifier.size(ButtonDefaults.IconSize),
                    )
                },
            ) {
                Text("Wifi")
            }
        }
        item { ListSubHeader { Text("Display") } }
        item {
            Button(modifier = Modifier.fillMaxWidth(), onClick = {}) {
                Text("Change Watchface")
            }
        }
        item { Button(modifier = Modifier.fillMaxWidth(), onClick = {}) { Text("Brightness") } }
    }
}

Parameters
`modifier: Modifier = Modifier`	The modifier for the `ListSubHeader`.
`backgroundColor: Color = Color.Transparent`	The background color to apply - typically Color.Transparent
`contentColor: Color = ListHeaderDefaults.subHeaderContentColor`	The color to apply to content.
`contentPadding: PaddingValues = ListHeaderDefaults.SubHeaderContentPadding`	The spacing values to apply internally between the background and the content.
`transformation: SurfaceTransformation? = null`	Transformer to be used when header appears inside the container that needs to dynamically change its content separately from the background.
`icon: (@Composable BoxScope.() -> Unit)? = null`	A slot for providing icon to the `ListSubHeader`.
`label: @Composable RowScope.() -> Unit`	A slot for providing label to the `ListSubHeader`.

MaterialTheme

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun MaterialTheme(
    colorScheme: ColorScheme = MaterialTheme.colorScheme,
    typography: Typography = MaterialTheme.typography,
    shapes: Shapes = MaterialTheme.shapes,
    motionScheme: MotionScheme = MaterialTheme.motionScheme,
    content: @Composable () -> Unit
): Unit

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

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

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.

Parameters
`colorScheme: ColorScheme = MaterialTheme.colorScheme`	A complete definition of the Wear Material Color theme for this hierarchy
`typography: Typography = MaterialTheme.typography`	A set of text styles to be used as this hierarchy's typography system
`shapes: Shapes = MaterialTheme.shapes`	A set of shapes to be used by the components in this hierarchy
`motionScheme: MotionScheme = MaterialTheme.motionScheme`	a set of motion specs used to animate content for this hierarchy.
`content: @Composable () -> Unit`	Slot for composable content displayed with this theme

OpenOnPhoneDialog

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun OpenOnPhoneDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    curvedText: (CurvedScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: OpenOnPhoneDialogColors = OpenOnPhoneDialogDefaults.colors(),
    properties: DialogProperties = DialogProperties(),
    durationMillis: Long = OpenOnPhoneDialogDefaults.DurationMillis,
    content: @Composable () -> Unit = { OpenOnPhoneDialogDefaults.Icon() }
): Unit

A full-screen dialog that displays an animated icon with a curved text at the bottom.

The dialog will be showing a message to the user for durationMillis. After a specified timeout, the onDismissRequest callback will be invoked, where it's up to the caller to handle the dismissal. To hide the dialog, visible parameter should be set to false.

This dialog is typically used to indicate that an action has been initiated and will continue on the user's phone. Once this dialog is displayed, it's developer responsibility to establish the connection between the watch and the phone.

Example of an OpenOnPhoneDialog usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.OpenOnPhoneDialog
import androidx.wear.compose.material3.OpenOnPhoneDialogDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.openOnPhoneDialogCurvedText

var showConfirmation by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showConfirmation = true },
        label = { Text("Open on phone") },
    )
}

val text = OpenOnPhoneDialogDefaults.text
val style = OpenOnPhoneDialogDefaults.curvedTextStyle
OpenOnPhoneDialog(
    visible = showConfirmation,
    onDismissRequest = { showConfirmation = false },
    curvedText = { openOnPhoneDialogCurvedText(text = text, style = style) },
)

Parameters
`visible: Boolean`	A boolean indicating whether the dialog should be displayed.
`onDismissRequest: () -> Unit`	A lambda function to be called when the dialog is dismissed - either by swiping right or when the `durationMillis` has passed. Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting `visible` to false.
`curvedText: (CurvedScope.() -> Unit)?`	A slot for displaying curved text content which will be shown along the bottom edge of the dialog. We recommend using `openOnPhoneDialogCurvedText` for this parameter, which will give the default sweep angle and padding, and `OpenOnPhoneDialogDefaults.curvedTextStyle` as the style.
`modifier: Modifier = Modifier`	Modifier to be applied to the dialog content.
`colors: OpenOnPhoneDialogColors = OpenOnPhoneDialogDefaults.colors()`	`OpenOnPhoneDialogColors` that will be used to resolve the colors used for this `OpenOnPhoneDialog`.
`properties: DialogProperties = DialogProperties()`	An optional `DialogProperties` object for configuring the dialog's behavior.
`durationMillis: Long = OpenOnPhoneDialogDefaults.DurationMillis`	The duration in milliseconds for which the dialog is displayed. This value will be adjusted by the accessibility manager according to the content displayed.
`content: @Composable () -> Unit = { OpenOnPhoneDialogDefaults.Icon() }`	A slot for displaying an icon inside the open on phone dialog, which can be animated. Defaults to `OpenOnPhoneDialogDefaults.Icon`.

OpenOnPhoneDialogContent

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun OpenOnPhoneDialogContent(
    curvedText: (CurvedScope.() -> Unit)?,
    durationMillis: Long,
    modifier: Modifier = Modifier,
    colors: OpenOnPhoneDialogColors = OpenOnPhoneDialogDefaults.colors(),
    content: @Composable () -> Unit
): Unit

This composable provides the content for an OpenOnPhoneDialog that displays an animated icon with curved text at the bottom.

Prefer using OpenOnPhoneDialog directly, which provides built-in animations when showing/hiding the dialog. This composable may be used to provide the content for an openOnPhone dialog if custom show/hide animations are required.

Example of an OpenOnPhoneDialog usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.OpenOnPhoneDialog
import androidx.wear.compose.material3.OpenOnPhoneDialogDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.openOnPhoneDialogCurvedText

var showConfirmation by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showConfirmation = true },
        label = { Text("Open on phone") },
    )
}

val text = OpenOnPhoneDialogDefaults.text
val style = OpenOnPhoneDialogDefaults.curvedTextStyle
OpenOnPhoneDialog(
    visible = showConfirmation,
    onDismissRequest = { showConfirmation = false },
    curvedText = { openOnPhoneDialogCurvedText(text = text, style = style) },
)

Parameters
`curvedText: (CurvedScope.() -> Unit)?`	A slot for displaying curved text content which will be shown along the bottom edge of the dialog. We recommend using `openOnPhoneDialogCurvedText` for this parameter, which will give the default sweep angle and padding, and `OpenOnPhoneDialogDefaults.curvedTextStyle` as the style.
`durationMillis: Long`	The duration in milliseconds for which the progress indicator inside of this content is animated. This value should be previously adjusted by the accessibility manager according to the content displayed. See `OpenOnPhoneDialog` implementation for more details.
`modifier: Modifier = Modifier`	Modifier to be applied to the openOnPhone content.
`colors: OpenOnPhoneDialogColors = OpenOnPhoneDialogDefaults.colors()`	`OpenOnPhoneDialogColors` that will be used to resolve the colors used for this `OpenOnPhoneDialog`.
`content: @Composable () -> Unit`	A slot for displaying an icon inside the open on phone dialog, which can be animated. Defaults to `OpenOnPhoneDialogDefaults.Icon`.

OutlinedButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Base level Wear Material3 OutlinedButton that offers a single slot to take any content. Used as the container for more opinionated OutlinedButton components that take specific content such as icons and labels.

The OutlinedButton is Stadium-shaped by default and has a max height designed to take no more than two lines of text of Typography.labelMedium style. With localisation and/or large font sizes, the text can extend to a maximum of 3 lines in which case, the OutlinedButton height adjusts to accommodate the contents. The OutlinedButton can have an icon or image horizontally parallel to the two lines of text.

OutlinedButton takes the ButtonDefaults.outlinedButtonColors color scheme by default, with a transparent background and a thin border. This is a medium-emphasis button for important, non-primary actions that need attention.

Other recommended buttons with ButtonColors for different levels of emphasis are: Button which defaults to ButtonDefaults.buttonColors, FilledTonalButton which defaults to ButtonDefaults.filledTonalButtonColors, ChildButton which defaults to ButtonDefaults.childButtonColors. For a background image, see the overload of Button with a containerPainter parameter.

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

Example of an OutlinedButton:

import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.OutlinedButton
import androidx.wear.compose.material3.Text

OutlinedButton(
    onClick = { /* Do something */ },
    label = { Text("Outlined Button") },
    modifier = modifier,
)

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`modifier: Modifier = Modifier`	Modifier to be applied to the button
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable
`shape: Shape = ButtonDefaults.shape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
`colors: ButtonColors = ButtonDefaults.outlinedButtonColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.outlinedButtonColors`.
`border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled)`	Optional `BorderStroke` that will be used to resolve the border for this button in different states. See `ButtonDefaults.outlinedButtonBorder`.
`contentPadding: PaddingValues = ButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`content: @Composable RowScope.() -> Unit`	Slot for composable body content displayed on the OutlinedButton

OutlinedButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    label: @Composable RowScope.() -> Unit
): Unit

Wear Material3 OutlinedButton 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 OutlinedButton is stadium-shaped by default and its standard height is designed to take 2 lines of text of Typography.labelMedium style - either a two-line label or both a single line label and a secondary label. With localisation and/or large font sizes, the OutlinedButton height adjusts to accommodate the contents. The label and secondary label should be consistently aligned.

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.

Other recommended buttons with ButtonColors for different levels of emphasis are: Button which defaults to ButtonDefaults.buttonColors, FilledTonalButton which defaults to ButtonDefaults.filledTonalButtonColors, ChildButton which defaults to ButtonDefaults.childButtonColors. For a background image, see the overload of Button with a containerPainter parameter.

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

Example of an OutlinedButton with an icon and secondary label:

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.OutlinedButton
import androidx.wear.compose.material3.Text

OutlinedButton(
    onClick = { /* Do something */ },
    label = { Text("Outlined Button") },
    secondaryLabel = { Text("Secondary label") },
    icon = {
        Icon(
            painter = painterResource(R.drawable.ic_favorite_rounded),
            contentDescription = "Favorite icon",
            modifier = Modifier.size(ButtonDefaults.IconSize),
        )
    },
    modifier = modifier,
)

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button
`modifier: Modifier = Modifier`	Modifier to be applied to the button
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`secondaryLabel: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's secondary label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not. label and secondaryLabel contents should be consistently aligned.
`icon: (@Composable BoxScope.() -> Unit)? = null`	A slot for providing the button's icon. The contents are expected to be a horizontally and vertically aligned icon of size `ButtonDefaults.IconSize` or `ButtonDefaults.LargeIconSize`.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable
`shape: Shape = ButtonDefaults.shape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
`colors: ButtonColors = ButtonDefaults.outlinedButtonColors()`	`ButtonColors` that will be used to resolve the background and content color for this button in different states. See `ButtonDefaults.outlinedButtonColors`.
`border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled)`	Optional `BorderStroke` that will be used to resolve the button border in different states. See `ButtonDefaults.outlinedButtonBorder`.
`contentPadding: PaddingValues = ButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`label: @Composable RowScope.() -> Unit`	A slot for providing the button's main label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not.

OutlinedCard

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun OutlinedCard(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.outlinedCardColors(),
    border: BorderStroke = CardDefaults.outlinedCardBorder(),
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    transformation: SurfaceTransformation? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Outlined Wear Material 3 Card that offers a single slot to take any content.

This OutlinedCard does not handle input events - see the other OutlinedCard overloads if you want a clickable OutlinedCard.

Outlined Card components that take specific content such as icons, images, titles, subtitles and labels. Outlined Cards have a visual boundary around the container. This can emphasise the content of this card.

The OutlinedCard is Rectangle-shaped with rounded corners by default.

Example of a non-clickable OutlinedCard:

import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.OutlinedCard
import androidx.wear.compose.material3.Text

OutlinedCard { Text("Non-clickable outlined card") }

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

Parameters
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.outlinedCardColors()`	`CardColors` that will be used to resolve the colors used for this card. See `CardDefaults.cardColors`.
`border: BorderStroke = CardDefaults.outlinedCardBorder()`	A BorderStroke object which is used for the outline drawing.
`contentPadding: PaddingValues = CardDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`content: @Composable ColumnScope.() -> Unit`	The main slot for a content of this card

OutlinedCard

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun OutlinedCard(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.outlinedCardColors(),
    border: BorderStroke = CardDefaults.outlinedCardBorder(),
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Outlined Wear Material 3 Card that offers a single slot to take any content.

The OutlinedCard is Rectangle-shaped with rounded corners by default.

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

Example of an OutlinedCard:

import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.OutlinedCard
import androidx.wear.compose.material3.Text

OutlinedCard(onClick = { /* Do something */ }) { Text("Outlined card") }

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

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the card
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`onLongClick: (() -> Unit)? = null`	Called when this card is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable.
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.outlinedCardColors()`	`CardColors` that will be used to resolve the colors used for this card in different states. See `CardDefaults.cardColors`.
`border: BorderStroke = CardDefaults.outlinedCardBorder()`	A BorderStroke object which is used for the outline drawing.
`contentPadding: PaddingValues = CardDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`content: @Composable ColumnScope.() -> Unit`	The main slot for a content of this card

OutlinedIconButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun OutlinedIconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shapes: IconButtonShapes = IconButtonDefaults.shapes(),
    colors: IconButtonColors = IconButtonDefaults.outlinedIconButtonColors(),
    border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material OutlinedIconButton is a circular, icon-only button with a transparent background, contrasting icon color and border. It offers a single slot to take an icon or image.

Set the size of the OutlinedIconButton with Modifier.touchTargetAwareSize to ensure that the recommended minimum touch target size is available.

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

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

Example of OutlinedIconButton:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.IconButton
import androidx.wear.compose.material3.OutlinedIconButton

OutlinedIconButton(onClick = { /* Do something */ }) {
    Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Favorite icon")
}

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button.
`modifier: Modifier = Modifier`	Modifier to be applied to the button.
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shapes: IconButtonShapes = IconButtonDefaults.shapes()`	Defines the shape for this button. Defaults to a static shape based on `IconButtonDefaults.shape`, but animated versions are available through `IconButtonDefaults.animatedShapes`.
`colors: IconButtonColors = IconButtonDefaults.outlinedIconButtonColors()`	`IconButtonColors` that will be used to resolve the background and icon color for this button in different states. See `IconButtonDefaults.outlinedIconButtonColors`.
`border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled)`	Optional `BorderStroke` for the icon button border - `ButtonDefaults.outlinedButtonBorder` by default.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable BoxScope.() -> Unit`	The content displayed on the icon button, expected to be icon or image.

Picker

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun Picker(
    state: PickerState,
    contentDescription: (() -> String)?,
    modifier: Modifier = Modifier,
    readOnly: Boolean = false,
    readOnlyLabel: (@Composable BoxScope.() -> Unit)? = null,
    onSelected: () -> Unit = {},
    verticalSpacing: Dp = 0.dp,
    gradientRatio: @FloatRange(from = 0.0, to = 0.5) Float = PickerDefaults.GradientRatio,
    gradientColor: Color = MaterialTheme.colorScheme.background,
    userScrollEnabled: Boolean = true,
    rotaryScrollableBehavior: RotaryScrollableBehavior? = PickerDefaults.rotarySnapBehavior(state),
    option: @Composable PickerScope.(index: 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.

Picker supports rotary input by default. 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 or turned off using the rotaryScrollableBehavior parameter.

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

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
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.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Picker
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rememberPickerState

val items = listOf("One", "Two", "Three", "Four", "Five")
val state = rememberPickerState(items.size)
// We forward scroll gestures from the whole screen to the Picker which makes this sample
// accessible for 2-finger vertical scrolling.
Box(
    modifier =
        Modifier.fillMaxSize()
            .scrollable(
                state = state,
                orientation = Orientation.Vertical,
                reverseDirection = true,
            ),
    contentAlignment = Alignment.Center,
) {
    Text(
        modifier = Modifier.align(Alignment.TopCenter).padding(top = 10.dp),
        text = "Selected: ${items[state.selectedOptionIndex]}",
    )
    Picker(
        modifier = Modifier.size(100.dp, 100.dp),
        state = state,
        contentDescription = { "${state.selectedOptionIndex + 1}" },
    ) {
        Text(items[it])
    }
}

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

import androidx.compose.animation.AnimatedContent
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.runtime.mutableIntStateOf
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.material3.PickerGroup
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rememberPickerState

var selectedPickerIndex by remember { mutableIntStateOf(0) }
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))
    val label = if (selectedPickerIndex == 0) "Hours" else "Minutes"
    AnimatedContent(targetState = label) { targetText -> Text(text = targetText) }
    Spacer(modifier = Modifier.size(10.dp))
    PickerGroup(
        selectedPickerState =
            if (selectedPickerIndex == 0) pickerStateHour else pickerStateMinute,
        autoCenter = false,
    ) {
        PickerGroupItem(
            pickerState = pickerStateHour,
            selected = selectedPickerIndex == 0,
            onSelected = { selectedPickerIndex = 0 },
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            contentDescription = { "Hours" },
            modifier = Modifier.size(80.dp, 100.dp),
        )

        PickerGroupItem(
            pickerState = pickerStateMinute,
            selected = selectedPickerIndex == 1,
            onSelected = { selectedPickerIndex = 1 },
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            contentDescription = { "Minutes" },
            modifier = Modifier.size(80.dp, 100.dp),
        )
    }
}

Parameters
`state: PickerState`	The state of the component
`contentDescription: (() -> String)?`	A block which computes text used by accessibility services to describe what the selected option represents. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar.
`modifier: Modifier = Modifier`	`Modifier` to be applied to the Picker.
`readOnly: Boolean = false`	Determines whether the `Picker` should display other available options for this field, inviting the user to scroll to change the value. When readOnly = true, only displays the currently selected option (and optionally a label). This is intended to be used for screens that display multiple Pickers, only one of which has the focus at a time.
`readOnlyLabel: (@Composable BoxScope.() -> Unit)? = null`	A slot for providing a label, displayed above the selected option when the `Picker` is read-only. The label is overlaid with the currently selected option within a Box, so it is recommended that the label is given `Alignment.TopCenter`.
`onSelected: () -> Unit = {}`	Action triggered when the Picker is selected by clicking. Used by accessibility semantics, which facilitates implementation of multi-picker screens.
`verticalSpacing: Dp = 0.dp`	The amount of vertical spacing in `Dp` between items. Can be negative, which can be useful for Text if it has plenty of whitespace.
`gradientRatio: @FloatRange(from = 0.0, to = 0.5) Float = PickerDefaults.GradientRatio`	The size relative to the Picker height that the top and bottom gradients take. These gradients blur the picker content on the top and bottom. The default is 0.33, so the top 1/3 and the bottom 1/3 of the picker are taken by gradients. Should be between 0.0 and 0.5. Use 0.0 to disable the gradient.
`gradientColor: Color = MaterialTheme.colorScheme.background`	Should be the color outside of the Picker, so there is continuity.
`userScrollEnabled: Boolean = true`	Determines whether the picker should be scrollable or not. When userScrollEnabled = true, picker is scrollable. This is different from `readOnly` as it changes the scrolling behaviour.
`rotaryScrollableBehavior: RotaryScrollableBehavior? = PickerDefaults.rotarySnapBehavior(state)`	Parameter for changing rotary behavior. We recommend to use `PickerDefaults.rotarySnapBehavior` for Pickers, but passing null turns off the rotary handling if it is not required.
`option: @Composable PickerScope.(index: Int) -> Unit`	A block which describes the content. Inside this block you can reference `PickerScope.selectedOptionIndex` to determine which option is selected. When read-only mode is in use on a screen, it is recommended that this content is given `Alignment.Center` in order to align with the centrally selected Picker value.

PickerGroup

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun PickerGroup(
    modifier: Modifier = Modifier,
    selectedPickerState: PickerState? = null,
    autoCenter: Boolean = true,
    propagateMinConstraints: Boolean = false,
    content: @Composable PickerGroupScope.() -> Unit
): Unit

A group of Pickers to build components where multiple pickers are required to be combined together. At most one Picker can be selected at a time. When touch exploration services are enabled, the focus moves to the picker which is clicked.

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.animation.AnimatedContent
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.runtime.mutableIntStateOf
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.material3.PickerGroup
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rememberPickerState

var selectedPickerIndex by remember { mutableIntStateOf(0) }
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))
    val label = if (selectedPickerIndex == 0) "Hours" else "Minutes"
    AnimatedContent(targetState = label) { targetText -> Text(text = targetText) }
    Spacer(modifier = Modifier.size(10.dp))
    PickerGroup(
        selectedPickerState =
            if (selectedPickerIndex == 0) pickerStateHour else pickerStateMinute,
        autoCenter = false,
    ) {
        PickerGroupItem(
            pickerState = pickerStateHour,
            selected = selectedPickerIndex == 0,
            onSelected = { selectedPickerIndex = 0 },
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            contentDescription = { "Hours" },
            modifier = Modifier.size(80.dp, 100.dp),
        )

        PickerGroupItem(
            pickerState = pickerStateMinute,
            selected = selectedPickerIndex == 1,
            onSelected = { selectedPickerIndex = 1 },
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            contentDescription = { "Minutes" },
            modifier = Modifier.size(80.dp, 100.dp),
        )
    }
}

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

import androidx.compose.animation.AnimatedContent
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.runtime.mutableIntStateOf
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.material3.PickerGroup
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rememberPickerState

var selectedPickerIndex by remember { mutableIntStateOf(0) }
val pickerStateHour = rememberPickerState(initialNumberOfOptions = 24)
val pickerStateMinute = rememberPickerState(initialNumberOfOptions = 60)
val pickerStateSeconds = rememberPickerState(initialNumberOfOptions = 60)
val pickerStateMilliSeconds = rememberPickerState(initialNumberOfOptions = 1000)
val pickerStates = remember {
    arrayOf(pickerStateHour, pickerStateMinute, pickerStateSeconds, pickerStateMilliSeconds)
}

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))
    AnimatedContent(targetState = headingText[selectedPickerIndex]!!) { targetText ->
        Text(text = targetText)
    }
    Spacer(modifier = Modifier.size(10.dp))
    PickerGroup(selectedPickerState = pickerStates[selectedPickerIndex], autoCenter = true) {
        PickerGroupItem(
            pickerState = pickerStateHour,
            selected = selectedPickerIndex == 0,
            onSelected = { selectedPickerIndex = 0 },
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            contentDescription = { "Hours" },
            modifier = Modifier.size(80.dp, 100.dp),
        )
        PickerGroupItem(
            pickerState = pickerStateMinute,
            selected = selectedPickerIndex == 1,
            onSelected = { selectedPickerIndex = 1 },
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            contentDescription = { "Minutes" },
            modifier = Modifier.size(80.dp, 100.dp),
        )
        PickerGroupItem(
            pickerState = pickerStateSeconds,
            selected = selectedPickerIndex == 2,
            onSelected = { selectedPickerIndex = 2 },
            option = { optionIndex, _ -> Text(text = "%02d".format(optionIndex)) },
            contentDescription = { "Seconds" },
            modifier = Modifier.size(80.dp, 100.dp),
        )
        PickerGroupItem(
            pickerState = pickerStateMilliSeconds,
            selected = selectedPickerIndex == 3,
            onSelected = { selectedPickerIndex = 3 },
            option = { optionIndex, _ -> Text(text = "%03d".format(optionIndex)) },
            contentDescription = { "Milliseconds" },
            modifier = Modifier.size(80.dp, 100.dp),
        )
    }
}

Parameters
`modifier: Modifier = Modifier`	`Modifier` to be applied to the `PickerGroup`.
`selectedPickerState: PickerState? = null`	The `PickerState` of the `Picker` that is selected. Null value means that no `Picker` is selected.
`autoCenter: Boolean = true`	Indicates whether the selected `Picker` should be centered on the screen. It is recommended to set this as true when all the pickers cannot be fit into the screen. Or provide a mechanism to navigate to pickers which are not visible on screen. If false, the whole row containing pickers would be centered.
`propagateMinConstraints: Boolean = false`	Whether the incoming min constraints should be passed to content.
`content: @Composable PickerGroupScope.() -> Unit`	The content of the `PickerGroup` as a container of `Picker`s.

ProvideTextStyle

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@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.

See also
`LocalTextStyle`

RadioButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun RadioButton(
    selected: Boolean,
    onSelect: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = RadioButtonDefaults.radioButtonShape,
    colors: RadioButtonColors = RadioButtonDefaults.radioButtonColors(),
    contentPadding: PaddingValues = RadioButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit
): Unit

The Wear Material RadioButton offers slots and a specific layout for an icon, a label and a secondaryLabel. The icon and secondaryLabel are optional. The items are laid out in a row with the optional icon at the start, a column containing the two label slots in the middle and the selection control at the end.

The RadioButton is Stadium shaped. The label should take no more than 3 lines of text. The secondary label should take no more than 2 lines of text. With localisation and/or large font sizes, the RadioButton height adjusts to accommodate the contents. The label and secondary label are start aligned by default.

Note that Modifier.selectableGroup() must be present on the parent control (such as Column) to ensure correct accessibility behavior.

Samples: Example of a RadioButton:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.RadioButton
import androidx.wear.compose.material3.Text

Column(modifier = Modifier.selectableGroup().fillMaxSize()) {
    var selectedButton by remember { mutableStateOf(0) }
    // RadioButton uses the Radio selection control by default.
    RadioButton(
        label = { Text("Radio button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
        secondaryLabel = {
            Text("With secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
        },
        selected = selectedButton == 0,
        onSelect = { selectedButton = 0 },
        icon = { Icon(Icons.Filled.Favorite, contentDescription = "Favorite icon") },
        enabled = true,
    )
    Spacer(modifier = Modifier.height(4.dp))
    RadioButton(
        label = { Text("Radio button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
        secondaryLabel = {
            Text("With secondary label", maxLines = 3, overflow = TextOverflow.Ellipsis)
        },
        selected = selectedButton == 1,
        onSelect = { selectedButton = 1 },
        icon = { Icon(Icons.Filled.Favorite, contentDescription = "Favorite icon") },
        enabled = true,
    )
}

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

The recommended set of RadioButton colors can be obtained from RadioButtonDefaults, e.g. RadioButtonDefaults.radioButtonColors.

Parameters
`selected: Boolean`	Boolean flag indicating whether this button is currently selected.
`onSelect: () -> Unit`	Callback to be invoked when this button has been selected by clicking.
`modifier: Modifier = Modifier`	Modifier to be applied to the `RadioButton`.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shape: Shape = RadioButtonDefaults.radioButtonShape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme.
`colors: RadioButtonColors = RadioButtonDefaults.radioButtonColors()`	`RadioButtonColors` that will be used to resolve the background and content color for this button in different states.
`contentPadding: PaddingValues = RadioButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this radio button. You can use this to change the radio button's appearance or preview the radio button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`icon: (@Composable BoxScope.() -> Unit)? = null`	An optional slot for providing an icon to indicate the purpose of the button. The contents are expected to be center-aligned, both horizontally and vertically, and should be an icon of size 24.dp.
`secondaryLabel: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's secondary label. The contents are expected to be text which is "start" aligned.
`label: @Composable RowScope.() -> Unit`	A slot for providing the button's main label. The contents are expected to be text which is "start" aligned.

ScreenScaffold

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScreenScaffold(
    modifier: Modifier = Modifier,
    scrollInfoProvider: ScrollInfoProvider? = null,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = null,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold is one of the Wear Material3 scaffold components.

The scaffold components AppScaffold and ScreenScaffold lay out the structure of a screen and coordinate transitions of the ScrollIndicator and TimeText components. AppScaffold should be at the top of the composition (because it provides ScaffoldState and layers TimeText on top of all other content) and ScreenScaffold should be part of AppScaffold's content. When used in conjunction with SwipeDismissableNavHost, AppScaffold remains at the top of the composition, whilst ScreenScaffold will be placed for each individual composable route.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollInfoProvider.

Example of using AppScaffold and ScreenScaffold:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
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.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold {
    // Define the navigation hierarchy within the AppScaffold,
    // such as using SwipeDismissableNavHost.
    // For this sample, we will define a single screen inline.
    val listState = rememberScalingLazyListState()

    // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
        contentPadding ->
        ScalingLazyColumn(
            state = listState,
            contentPadding = contentPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}

Parameters
`modifier: Modifier = Modifier`	The modifier for the screen scaffold.
`scrollInfoProvider: ScrollInfoProvider? = null`	Provider for scroll information used to scroll away screen elements such as `TimeText` and coordinate showing/hiding the `ScrollIndicator`.
`contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding`	The padding to apply around the entire content. This contentPadding is then received by the `content` and should be consumed by using Modifier.padding or contentPadding parameter of the lazy lists.
`timeText: (@Composable () -> Unit)? = null`	Time text (both time and potentially status message) for this screen, if different to the time text at the `AppScaffold` level. When null, the time text from the `AppScaffold` is displayed for this screen.
`scrollIndicator: (@Composable BoxScope.() -> Unit)? = null`	The `ScrollIndicator` to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 `ScrollIndicator` which is provided by default. No scroll indicator is displayed if null is passed.
`overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()`	the `OverscrollEffect` that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as `scrollIndicator` through `LocalOverscrollFactory`. If necessary, this behaviour can be disabled by passing overscrollEffect = null.
`content: @Composable BoxScope.(PaddingValues) -> Unit`	The body content for this screen. The lambda receives a `PaddingValues` that should be applied to the content root via Modifier.padding or contentPadding parameter when used with lists.

ScreenScaffold

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScreenScaffold(
    scrollState: LazyListState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold is one of the Wear Material3 scaffold components.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

Example of using AppScaffold and ScreenScaffold:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
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.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold {
    // Define the navigation hierarchy within the AppScaffold,
    // such as using SwipeDismissableNavHost.
    // For this sample, we will define a single screen inline.
    val listState = rememberScalingLazyListState()

    // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
        contentPadding ->
        ScalingLazyColumn(
            state = listState,
            contentPadding = contentPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}

Parameters
`scrollState: LazyListState`	The scroll state for `androidx.compose.foundation.lazy.LazyColumn`, used to drive screen transitions such as `TimeText` scroll away and showing/hiding `ScrollIndicator`.
`modifier: Modifier = Modifier`	The modifier for the screen scaffold.
`contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding`	The padding to apply around the entire content. This contentPadding is then received by the `content` and should be consumed by using Modifier.padding or contentPadding parameter of the lazy lists.
`timeText: (@Composable () -> Unit)? = null`	Time text (both time and potentially status message) for this screen, if different to the time text at the `AppScaffold` level. When null, the time text from the `AppScaffold` is displayed for this screen.
`scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }`	The `ScrollIndicator` to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 `ScrollIndicator` which is provided by default. No scroll indicator is displayed if null is passed.
`overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()`	the `OverscrollEffect` that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as `scrollIndicator` through `LocalOverscrollFactory`. If necessary, this behaviour can be disabled by passing overscrollEffect = null.
`content: @Composable BoxScope.(PaddingValues) -> Unit`	The body content for this screen. The lambda receives a `PaddingValues` that should be applied to the content root via Modifier.padding or contentPadding parameter when used with lists.

ScreenScaffold

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScreenScaffold(
    scrollState: ScalingLazyListState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold is one of the Wear Material3 scaffold components.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

Example of using AppScaffold and ScreenScaffold:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
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.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold {
    // Define the navigation hierarchy within the AppScaffold,
    // such as using SwipeDismissableNavHost.
    // For this sample, we will define a single screen inline.
    val listState = rememberScalingLazyListState()

    // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
        contentPadding ->
        ScalingLazyColumn(
            state = listState,
            contentPadding = contentPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}

Parameters
`scrollState: ScalingLazyListState`	The scroll state for `ScalingLazyColumn`, used to drive screen transitions such as `TimeText` scroll away and showing/hiding `ScrollIndicator`.
`modifier: Modifier = Modifier`	The modifier for the screen scaffold.
`contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding`	The padding to apply around the entire content. This contentPadding is then received by the `content` and should be consumed by using Modifier.padding or contentPadding parameter of the lazy lists.
`timeText: (@Composable () -> Unit)? = null`	Time text (both time and potentially status message) for this screen, if different to the time text at the `AppScaffold` level. When null, the time text from the `AppScaffold` is displayed for this screen.
`scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }`	The `ScrollIndicator` to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 `ScrollIndicator` which is provided by default. No scroll indicator is displayed if null is passed.
`overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()`	the `OverscrollEffect` that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as `scrollIndicator` through `LocalOverscrollFactory`. If necessary, this behaviour can be disabled by passing overscrollEffect = null.
`content: @Composable BoxScope.(PaddingValues) -> Unit`	The body content for this screen. The lambda receives a `PaddingValues` that should be applied to the content root via Modifier.padding or contentPadding parameter when used with lists to properly offset the `EdgeButton`.

ScreenScaffold

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScreenScaffold(
    scrollState: ScrollState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold is one of the Wear Material3 scaffold components.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState. Note that this version doesn't support a bottom button slot, for that use the overload that takes LazyListState or the one that takes a ScalingLazyListState.

Example of using AppScaffold and ScreenScaffold:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
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.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold {
    // Define the navigation hierarchy within the AppScaffold,
    // such as using SwipeDismissableNavHost.
    // For this sample, we will define a single screen inline.
    val listState = rememberScalingLazyListState()

    // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
        contentPadding ->
        ScalingLazyColumn(
            state = listState,
            contentPadding = contentPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}

Parameters
`scrollState: ScrollState`	The scroll state for a Column, used to drive screen transitions such as `TimeText` scroll away and showing/hiding `ScrollIndicator`.
`modifier: Modifier = Modifier`	The modifier for the screen scaffold.
`contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding`	The padding to apply around the entire content. This contentPadding is then received by the `content` and should be consumed by using Modifier.padding or contentPadding parameter of the lazy lists.
`timeText: (@Composable () -> Unit)? = null`	Time text (both time and potentially status message) for this screen, if different to the time text at the `AppScaffold` level. When null, the time text from the `AppScaffold` is displayed for this screen.
`scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }`	The `ScrollIndicator` to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 `ScrollIndicator` which is provided by default. No scroll indicator is displayed if null is passed.
`overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()`	the `OverscrollEffect` that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as `scrollIndicator` through `LocalOverscrollFactory`. If necessary, this behaviour can be disabled by passing overscrollEffect = null.
`content: @Composable BoxScope.(PaddingValues) -> Unit`	The body content for this screen. The lambda receives a `PaddingValues` that should be applied to the content root via Modifier.padding or contentPadding parameter when used with lists.

ScreenScaffold

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScreenScaffold(
    scrollState: TransformingLazyColumnState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold is one of the Wear Material3 scaffold components.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

Example of using AppScaffold and ScreenScaffold:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
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.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold {
    // Define the navigation hierarchy within the AppScaffold,
    // such as using SwipeDismissableNavHost.
    // For this sample, we will define a single screen inline.
    val listState = rememberScalingLazyListState()

    // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
        contentPadding ->
        ScalingLazyColumn(
            state = listState,
            contentPadding = contentPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}

Parameters
`scrollState: TransformingLazyColumnState`	The scroll state for `TransformingLazyColumn`, used to drive screen transitions such as `TimeText` scroll away and showing/hiding `ScrollIndicator`.
`modifier: Modifier = Modifier`	The modifier for the screen scaffold.
`contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding`	The padding to apply around the entire content. This contentPadding is then received by the `content` and should be consumed by using Modifier.padding or contentPadding parameter of the lazy lists.
`timeText: (@Composable () -> Unit)? = null`	Time text (both time and potentially status message) for this screen, if different to the time text at the `AppScaffold` level. When null, the time text from the `AppScaffold` is displayed for this screen.
`scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }`	The `ScrollIndicator` to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 `ScrollIndicator` which is provided by default. No scroll indicator is displayed if null is passed.
`overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()`	the `OverscrollEffect` that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as `scrollIndicator` through `LocalOverscrollFactory`. If necessary, this behaviour can be disabled by passing overscrollEffect = null.
`content: @Composable BoxScope.(PaddingValues) -> Unit`	The body content for this screen. The lambda receives a `PaddingValues` that should be applied to the content root via Modifier.padding or contentPadding parameter when used with lists.

ScreenScaffold

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun ScreenScaffold(
    scrollInfoProvider: ScrollInfoProvider,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = null,
    edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold is one of the Wear Material3 scaffold components.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText, ScrollIndicator and the bottom button according to a scrollInfoProvider.

This version of ScreenScaffold has a special slot for a button at the bottom, that grows and shrinks to take the available space after the scrollable content. In this overload, both edgeButton and scrollInfoProvider must be specified.

Parameters
`scrollInfoProvider: ScrollInfoProvider`	Provider for scroll information used to scroll away screen elements such as `TimeText` and coordinate showing/hiding the `ScrollIndicator`, this needs to be a `ScrollInfoProvider`.
`edgeButton: @Composable BoxScope.() -> Unit`	slot for a `EdgeButton` that takes the available space below a scrolling list. It will scale up and fade in when the user scrolls to the end of the list, and scale down and fade out as the user scrolls up.
`modifier: Modifier = Modifier`	The modifier for the screen scaffold.
`contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding`	The padding to apply around the entire content. This contentPadding is then received by the `content` and should be consumed by using Modifier.padding or contentPadding parameter of the lazy lists. The bottom padding value is always ignored because we instead use `edgeButtonSpacing` to specify the gap between edge button and content - and the `EdgeButton` hugs the bottom of the screen.
`timeText: (@Composable () -> Unit)? = null`	Time text (both time and potentially status message) for this screen, if different to the time text at the `AppScaffold` level. When null, the time text from the `AppScaffold` is displayed for this screen.
`scrollIndicator: (@Composable BoxScope.() -> Unit)? = null`	The `ScrollIndicator` to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 `ScrollIndicator` which is provided by default. No scroll indicator is displayed if null is passed.
`edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing`	The space between `EdgeButton` and the list content. This gap size could not be smaller then `ScreenScaffoldDefaults.EdgeButtonMinSpacing`.
`overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()`	the `OverscrollEffect` that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as `edgeButton` and `scrollIndicator` through `LocalOverscrollFactory`. If necessary, this behaviour can be disabled by passing overscrollEffect = null.
`content: @Composable BoxScope.(PaddingValues) -> Unit`	The body content for this screen. The lambda receives a `PaddingValues` that should be applied to the content root via Modifier.padding or contentPadding parameter when used with lists to properly offset the `EdgeButton`.

ScreenScaffold

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun ScreenScaffold(
    scrollState: LazyListState,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing,
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold is one of the Wear Material3 scaffold components.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

This version of ScreenScaffold has a special slot for a button at the bottom, that grows and shrinks to take the available space after the scrollable content.

Example of using AppScaffold and ScreenScaffold with ScalingLazyColumn:

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold(modifier = Modifier.background(Color.Black)) {
    // Define the navigation hierarchy within the AppScaffold,
    // such as using SwipeDismissableNavHost.
    // For this sample, we will define a single screen inline.
    val listState = rememberScalingLazyListState()
    // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(
        scrollState = listState,
        // Define custom spacing between [EdgeButton] and [ScalingLazyColumn].
        edgeButtonSpacing = 15.dp,
        edgeButton = {
            EdgeButton(
                onClick = {},
                modifier =
                    // In case user starts scrolling from the EdgeButton.
                    Modifier.scrollable(
                        listState,
                        orientation = Orientation.Vertical,
                        reverseDirection = true,
                        // An overscroll effect should be applied to the EdgeButton for proper
                        // scrolling behavior.
                        overscrollEffect = rememberOverscrollEffect(),
                    ),
            ) {
                Text("Clear All")
            }
        },
    ) { contentPadding ->
        ScalingLazyColumn(
            state = listState,
            modifier = Modifier.fillMaxSize(),
            // Bottom spacing is derived from [ScreenScaffold.edgeButtonSpacing].
            contentPadding = contentPadding,
            autoCentering = null,
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}

Parameters
`scrollState: LazyListState`	The scroll state for `androidx.compose.foundation.lazy.LazyColumn`, used to drive screen transitions such as `TimeText` scroll away and showing/hiding `ScrollIndicator`.
`edgeButton: @Composable BoxScope.() -> Unit`	Slot for an `EdgeButton` that takes the available space below a scrolling list. It will scale up and fade in when the user scrolls to the end of the list, and scale down and fade out as the user scrolls up.
`modifier: Modifier = Modifier`	The modifier for the screen scaffold.
`contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding`	The padding to apply around the entire content. This contentPadding is then received by the `content` and should be consumed by using Modifier.padding or contentPadding parameter of the lazy lists. The bottom padding value is always ignored because we instead use `edgeButtonSpacing` to specify the gap between edge button and content - and the `EdgeButton` hugs the bottom of the screen.
`timeText: (@Composable () -> Unit)? = null`	Time text (both time and potentially status message) for this screen, if different to the time text at the `AppScaffold` level. When null, the time text from the `AppScaffold` is displayed for this screen.
`scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }`	The `ScrollIndicator` to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 `ScrollIndicator` which is provided by default. No scroll indicator is displayed if null is passed.
`overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()`	the `OverscrollEffect` that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as `edgeButton` and `scrollIndicator` through `LocalOverscrollFactory`. If necessary, this behaviour can be disabled by passing overscrollEffect = null.
`edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing`	The space between `EdgeButton` and the list content
`content: @Composable BoxScope.(PaddingValues) -> Unit`	The body content for this screen. The lambda receives a `PaddingValues` that should be applied to the content root via Modifier.padding or contentPadding parameter when used with lists to properly offset the `EdgeButton`.

ScreenScaffold

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun ScreenScaffold(
    scrollState: ScalingLazyListState,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold is one of the Wear Material3 scaffold components.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

This version of ScreenScaffold has a special slot for a button at the bottom, that grows and shrinks to take the available space after the scrollable content.

When using ScreenScaffold with EdgeButton and ScalingLazyColumn, you should pass autoCentering = null for the ScalingLazyColumn in order to achieve the correct spacing above the EdgeButton.

Example of using AppScaffold and ScreenScaffold with ScalingLazyColumn:

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold(modifier = Modifier.background(Color.Black)) {
    // Define the navigation hierarchy within the AppScaffold,
    // such as using SwipeDismissableNavHost.
    // For this sample, we will define a single screen inline.
    val listState = rememberScalingLazyListState()
    // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(
        scrollState = listState,
        // Define custom spacing between [EdgeButton] and [ScalingLazyColumn].
        edgeButtonSpacing = 15.dp,
        edgeButton = {
            EdgeButton(
                onClick = {},
                modifier =
                    // In case user starts scrolling from the EdgeButton.
                    Modifier.scrollable(
                        listState,
                        orientation = Orientation.Vertical,
                        reverseDirection = true,
                        // An overscroll effect should be applied to the EdgeButton for proper
                        // scrolling behavior.
                        overscrollEffect = rememberOverscrollEffect(),
                    ),
            ) {
                Text("Clear All")
            }
        },
    ) { contentPadding ->
        ScalingLazyColumn(
            state = listState,
            modifier = Modifier.fillMaxSize(),
            // Bottom spacing is derived from [ScreenScaffold.edgeButtonSpacing].
            contentPadding = contentPadding,
            autoCentering = null,
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}

Parameters
`scrollState: ScalingLazyListState`	The scroll state for `ScalingLazyColumn`, used to drive screen transitions such as `TimeText` scroll away and showing/hiding `ScrollIndicator`.
`edgeButton: @Composable BoxScope.() -> Unit`	Slot for an `EdgeButton` that takes the available space below a scrolling list. It will scale up and fade in when the user scrolls to the end of the list, and scale down and fade out as the user scrolls up.
`modifier: Modifier = Modifier`	The modifier for the screen scaffold.
`contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding`	The padding to apply around the entire content. This contentPadding is then received by the `content` and should be consumed by using Modifier.padding or contentPadding parameter of the lazy lists. The bottom padding value is always ignored because we instead use `edgeButtonSpacing` to specify the gap between edge button and content - and the `EdgeButton` hugs the bottom of the screen.
`timeText: (@Composable () -> Unit)? = null`	Time text (both time and potentially status message) for this screen, if different to the time text at the `AppScaffold` level. When null, the time text from the `AppScaffold` is displayed for this screen.
`scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }`	The `ScrollIndicator` to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 `ScrollIndicator` which is provided by default. No scroll indicator is displayed if null is passed.
`edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing`	The space between `EdgeButton` and the list content
`overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()`	the `OverscrollEffect` that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as `edgeButton` and `scrollIndicator` through `LocalOverscrollFactory`. If necessary, this behaviour can be disabled by passing overscrollEffect = null.
`content: @Composable BoxScope.(PaddingValues) -> Unit`	The body content for this screen. The lambda receives a `PaddingValues` that should be applied to the content root via Modifier.padding or contentPadding parameter when used with lists to properly offset the `EdgeButton`.

ScreenScaffold

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun ScreenScaffold(
    scrollState: TransformingLazyColumnState,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold is one of the Wear Material3 scaffold components.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

This version of ScreenScaffold has a special slot for a button at the bottom, that grows and shrinks to take the available space after the scrollable content.

Example of using AppScaffold and ScreenScaffold with TransformingLazyColumn:

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold(modifier = Modifier.background(Color.Black)) {
    // Define the navigation hierarchy within the AppScaffold,
    // such as using SwipeDismissableNavHost.
    // For this sample, we will define a single screen inline.
    val listState = rememberTransformingLazyColumnState()
    // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(
        scrollState = listState,
        // Define custom spacing between [EdgeButton] and [ScalingLazyColumn].
        edgeButtonSpacing = 15.dp,
        edgeButton = {
            EdgeButton(
                onClick = {},
                modifier =
                    // In case user starts scrolling from the EdgeButton.
                    Modifier.scrollable(
                        listState,
                        orientation = Orientation.Vertical,
                        reverseDirection = true,
                        // An overscroll effect should be applied to the EdgeButton for proper
                        // scrolling behavior.
                        overscrollEffect = rememberOverscrollEffect(),
                    ),
            ) {
                Text("Clear All")
            }
        },
    ) { contentPadding ->
        TransformingLazyColumn(
            state = listState,
            modifier = Modifier.fillMaxSize(),
            // Bottom spacing is derived from [ScreenScaffold.edgeButtonSpacing].
            contentPadding = contentPadding,
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}

Example of using ScreenScaffold with a EdgeButton:

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.filled.Check
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.EdgeButtonSize
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.RadioButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.samples.icons.CheckIcon

val state = rememberScalingLazyListState()
val horizontalPadding = LocalConfiguration.current.screenWidthDp.dp * 0.052f
val verticalPadding = LocalConfiguration.current.screenHeightDp.dp * 0.16f
val colors =
    listOf(
        "Filled" to ButtonDefaults.buttonColors(),
        "Filled Variant" to ButtonDefaults.filledVariantButtonColors(),
        "Filled Tonal" to ButtonDefaults.filledTonalButtonColors(),
        "Outlined" to ButtonDefaults.outlinedButtonColors(),
        "Disabled" to ButtonDefaults.buttonColors(),
    )
var selectedColor by remember { mutableIntStateOf(0) }
val types = listOf("Icon only" to 0, "Text only" to 1)
var selectedType by remember { mutableIntStateOf(0) }

ScreenScaffold(
    scrollState = state,
    contentPadding = PaddingValues(horizontal = horizontalPadding, vertical = verticalPadding),
    edgeButton = {
        EdgeButton(
            modifier =
                Modifier.scrollable(
                    state,
                    orientation = Orientation.Vertical,
                    reverseDirection = true,
                    // An overscroll effect should be applied to the EdgeButton for proper
                    // scrolling behavior.
                    overscrollEffect = rememberOverscrollEffect(),
                ),
            onClick = {},
            buttonSize = EdgeButtonSize.Medium,
            colors = colors[selectedColor].second,
            border =
                if (colors[selectedColor].first == "Outlined")
                    ButtonDefaults.outlinedButtonBorder(true)
                else null,
            enabled = colors[selectedColor].first != "Disabled",
        ) {
            if (selectedType == 0) {
                // Remove extra spacing around the icon so it integrates better into the scroll.
                CheckIcon(Modifier.size(21.dp).wrapContentSize(unbounded = true).size(32.dp))
            } else {
                Text("Ok")
            }
        }
    },
) { contentPadding ->
    ScalingLazyColumn(
        state = state,
        modifier = Modifier.fillMaxSize().selectableGroup(),
        autoCentering = null,
        contentPadding = contentPadding,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { Text("Color") }
        items(colors.size) { ix ->
            RadioButton(
                label = { Text(colors[ix].first) },
                selected = selectedColor == ix,
                onSelect = { selectedColor = ix },
                modifier = Modifier.fillMaxWidth(),
            )
        }
        item { Text("Type") }
        items(types.size) { ix ->
            RadioButton(
                label = { Text(types[ix].first) },
                selected = selectedType == ix,
                onSelect = { selectedType = ix },
                modifier = Modifier.fillMaxWidth(),
            )
        }
    }
}

Parameters
`scrollState: TransformingLazyColumnState`	The scroll state for `TransformingLazyColumn`, used to drive screen transitions such as `TimeText` scroll away and showing/hiding `ScrollIndicator`.
`edgeButton: @Composable BoxScope.() -> Unit`	Slot for an `EdgeButton` that takes the available space below a scrolling list. It will scale up and fade in when the user scrolls to the end of the list, and scale down and fade out as the user scrolls up.
`modifier: Modifier = Modifier`	The modifier for the screen scaffold.
`contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding`	The padding to apply around the entire content. This contentPadding is then received by the `content` and should be consumed by using Modifier.padding or contentPadding parameter of the lazy lists. The bottom padding value is always ignored because we instead use `edgeButtonSpacing` to specify the gap between edge button and content - and the `EdgeButton` hugs the bottom of the screen.
`timeText: (@Composable () -> Unit)? = null`	Time text (both time and potentially status message) for this screen, if different to the time text at the `AppScaffold` level. When null, the time text from the `AppScaffold` is displayed for this screen.
`scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }`	The `ScrollIndicator` to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 `ScrollIndicator` which is provided by default. No scroll indicator is displayed if null is passed.
`edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing`	The space between `EdgeButton` and the list content
`overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()`	the `OverscrollEffect` that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as `edgeButton` and `scrollIndicator` through `LocalOverscrollFactory`. If necessary, this behaviour can be disabled by passing overscrollEffect = null.
`content: @Composable BoxScope.(PaddingValues) -> Unit`	The body content for this screen. The lambda receives a `PaddingValues` that should be applied to the content root via Modifier.padding or contentPadding parameter when used with lists to properly offset the `EdgeButton`.

ScrollIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScrollIndicator(
    state: LazyListState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec
): Unit

A composable that displays a visual indicator of scrolling progress within a scrollable container.

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

To comply with Wear Material Design guidelines, this composable should be aligned to the center end of the screen using Alignment.CenterEnd. It will appear on the right in Ltr orientation and on the left in Rtl orientation.

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

For more information, see the Scroll indicators guide.

Example of a sample ScrollIndicator with LazyColumn:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ScrollIndicator
import androidx.wear.compose.material3.Text

val scrollState = rememberLazyListState()
Box {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        state = scrollState,
    ) {
        items(100) { Text(text = "Item $it") }
    }
    ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
}

Parameters
`state: LazyListState`	the `LazyListState` to use as the basis for the ScrollIndicatorState.
`modifier: Modifier = Modifier`	The modifier to be applied to the component
`colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors()`	`ScrollIndicatorColors` that will be used to resolve the indicator and track colors for this `ScrollIndicator`.
`reverseDirection: Boolean = state.layoutInfo.reverseLayout`	Reverses direction of ScrollIndicator if true. The default value is inferred from the `reverseLayout` property of the provided `LazyListState`, ensuring the indicator automatically matches the list's layout direction.
`positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec`	`AnimationSpec` for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation `snap` AnimationSpec should be passed instead.

ScrollIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScrollIndicator(
    state: ScalingLazyListState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec
): Unit

A composable that displays a visual indicator of scrolling progress within a scrollable container.

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

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

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

For more information, see the Scroll indicators guide.

Example of a sample ScrollIndicator with ScalingLazyColumn:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.ScrollIndicator
import androidx.wear.compose.material3.Text

val scrollState = rememberScalingLazyListState()
Box {
    ScalingLazyColumn(modifier = Modifier.fillMaxSize(), state = scrollState) {
        items(100) { Text(text = "Item $it") }
    }
    ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
}

Parameters
`state: ScalingLazyListState`	the `ScalingLazyListState` to use as the basis for the ScrollIndicatorState.
`modifier: Modifier = Modifier`	The modifier to be applied to the component
`colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors()`	`ScrollIndicatorColors` that will be used to resolve the indicator and track colors for this `ScrollIndicator`.
`reverseDirection: Boolean = state.layoutInfo.reverseLayout`	Reverses direction of ScrollIndicator if true. The default value is inferred from the `reverseLayout` property of the provided `ScalingLazyListState`, ensuring the indicator automatically matches the list's layout direction.
`positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec`	`AnimationSpec` for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation `snap` AnimationSpec should be passed instead.

ScrollIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScrollIndicator(
    state: ScrollState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = false,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec
): Unit

A composable that displays a visual indicator of scrolling progress within a scrollable container.

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

To comply with Wear Material Design guidelines, this composable should be aligned to the center end of the screen using Alignment.CenterEnd, such as by setting modifier = Modifier.align(Alignment.CenterEnd). This way, the ScrollIndicator will appear on the right in Ltr orientation and on the left in Rtl orientation.

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

For more information, see the Scroll indicators guide.

Example of a sample ScrollIndicator with Column:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ScrollIndicator
import androidx.wear.compose.material3.Text

val scrollState = rememberScrollState()
Box {
    Column(
        modifier = Modifier.fillMaxSize().verticalScroll(scrollState),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        repeat(100) { Text(text = "Item $it") }
    }
    ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
}

Parameters
`state: ScrollState`	The scrollState to use as the basis for the ScrollIndicatorState.
`modifier: Modifier = Modifier`	The modifier to be applied to the component - usually set to `Modifier.align(Alignment.CenterEnd)`.
`colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors()`	`ScrollIndicatorColors` that will be used to resolve the indicator and track colors for this `ScrollIndicator`.
`reverseDirection: Boolean = false`	Reverses direction of ScrollIndicator if true
`positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec`	`AnimationSpec` for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation `snap` AnimationSpec should be passed instead.

ScrollIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun ScrollIndicator(
    state: TransformingLazyColumnState,
    modifier: Modifier = Modifier,
    colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors(),
    reverseDirection: Boolean = state.layoutInfo.reverseLayout,
    positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec
): Unit

A composable that displays a visual indicator of scrolling progress within a scrollable container.

Creates an ScrollIndicator based on the values in a TransformingLazyColumnState object that a TransformingLazyColumn uses.

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

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

For more information, see the Scroll indicators guide.

Example of a sample ScrollIndicator with TransformingLazyColumn:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.ScrollIndicator
import androidx.wear.compose.material3.Text

val scrollState = rememberTransformingLazyColumnState()
Box {
    TransformingLazyColumn(modifier = Modifier.background(Color.Black), state = scrollState) {
        items(100) { Text(text = "Item $it") }
    }
    ScrollIndicator(modifier = Modifier.align(Alignment.CenterEnd), state = scrollState)
}

Parameters
`state: TransformingLazyColumnState`	the `TransformingLazyColumnState` to use as the basis for the ScrollIndicatorState.
`modifier: Modifier = Modifier`	The modifier to be applied to the component
`colors: ScrollIndicatorColors = ScrollIndicatorDefaults.colors()`	`ScrollIndicatorColors` that will be used to resolve the indicator and track colors for this `ScrollIndicator`.
`reverseDirection: Boolean = state.layoutInfo.reverseLayout`	Reverses direction of ScrollIndicator if true. The default value is inferred from the `reverseLayout` property of the provided `TransformingLazyColumnState`, ensuring the indicator automatically matches the list's layout direction.
`positionAnimationSpec: AnimationSpec<Float> = ScrollIndicatorDefaults.PositionAnimationSpec`	`AnimationSpec` for position animation. The Position animation is used for animating changes to the scroll size and position. To disable this animation `snap` AnimationSpec should be passed instead.

SegmentedCircularProgressIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun SegmentedCircularProgressIndicator(
    segmentCount: @IntRange(from = 1) Int,
    segmentValue: (segmentIndex: Int) -> Boolean,
    modifier: Modifier = Modifier,
    startAngle: Float = CircularProgressIndicatorDefaults.StartAngle,
    endAngle: Float = startAngle,
    colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors(),
    strokeWidth: Dp = CircularProgressIndicatorDefaults.largeStrokeWidth,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth),
    enabled: Boolean = true
): Unit

Material Design segmented circular progress indicator.

A segmented variant of CircularProgressIndicator that is divided into equally sized segments. This overload of SegmentedCircularProgressIndicator allows for each segment to be individually indicated as completed, such as for showing activity for intervals within a longer period

Example of SegmentedCircularProgressIndicator where the segments are turned on/off:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.ProgressIndicatorDefaults
import androidx.wear.compose.material3.SegmentedCircularProgressIndicator

Box(
    modifier =
        Modifier.background(MaterialTheme.colorScheme.background)
            .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
            .fillMaxSize()
) {
    SegmentedCircularProgressIndicator(segmentCount = 5, segmentValue = { it % 2 != 0 })
}

Example of smaller size SegmentedCircularProgressIndicator:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
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.material3.CircularProgressIndicator
import androidx.wear.compose.material3.SegmentedCircularProgressIndicator

Box(modifier = Modifier.fillMaxSize()) {
    SegmentedCircularProgressIndicator(
        segmentCount = 8,
        segmentValue = { it % 2 != 0 },
        modifier = Modifier.align(Alignment.Center).size(80.dp),
    )
}

Parameters
`segmentCount: @IntRange(from = 1) Int`	Number of equal segments that the progress indicator should be divided into. Has to be a number equal or greater to 1.
`segmentValue: (segmentIndex: Int) -> Boolean`	A function that for each segment between 1..`segmentCount` returns true if this segment should be displayed with the indicator color to show progress, and false if the segment should be displayed with the track color.
`modifier: Modifier = Modifier`	Modifier to be applied to the SegmentedCircularProgressIndicator.
`startAngle: Float = CircularProgressIndicatorDefaults.StartAngle`	The starting position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. Default is 270 degrees `CircularProgressIndicatorDefaults.StartAngle` (top of the screen).
`endAngle: Float = startAngle`	The ending position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. By default equal to `startAngle`.
`colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors()`	`ProgressIndicatorColors` that will be used to resolve the indicator and track color for this progress indicator in different states.
`strokeWidth: Dp = CircularProgressIndicatorDefaults.largeStrokeWidth`	The stroke width for the progress indicator.
`gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)`	The size of the gap between segments (in Dp).
`enabled: Boolean = true`	controls the enabled state. Although this component is not clickable, it can be contained within a clickable component. When enabled is `false`, this component will appear visually disabled.

SegmentedCircularProgressIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun SegmentedCircularProgressIndicator(
    segmentCount: @IntRange(from = 1) Int,
    progress: () -> Float,
    modifier: Modifier = Modifier,
    allowProgressOverflow: Boolean = false,
    startAngle: Float = CircularProgressIndicatorDefaults.StartAngle,
    endAngle: Float = startAngle,
    colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors(),
    strokeWidth: Dp = CircularProgressIndicatorDefaults.largeStrokeWidth,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth),
    enabled: Boolean = true
): Unit

Material Design segmented circular progress indicator.

A segmented variant of CircularProgressIndicator that is divided into equally sized segments.

Example of SegmentedCircularProgressIndicator with progress value:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.ProgressIndicatorDefaults
import androidx.wear.compose.material3.SegmentedCircularProgressIndicator

Box(
    modifier =
        Modifier.background(MaterialTheme.colorScheme.background)
            .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
            .fillMaxSize()
) {
    SegmentedCircularProgressIndicator(segmentCount = 5, progress = { 0.5f })
}

Example of smaller size SegmentedCircularProgressIndicator:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
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.material3.CircularProgressIndicator
import androidx.wear.compose.material3.SegmentedCircularProgressIndicator

Box(modifier = Modifier.fillMaxSize()) {
    SegmentedCircularProgressIndicator(
        segmentCount = 6,
        progress = { 0.75f },
        modifier = Modifier.align(Alignment.Center).size(80.dp),
    )
}

Parameters
`segmentCount: @IntRange(from = 1) Int`	Number of equal segments that the progress indicator should be divided into. Has to be a number equal or greater to 1.
`progress: () -> Float`	The progress of this progress indicator where 0.0 represents no progress and 1.0 represents completion. Values smaller than 0.0 will be coerced to 0, while values larger than 1.0 will be wrapped around and shown as overflow with a different track color. The progress is applied to the entire `SegmentedCircularProgressIndicator` across all segments. Progress changes will be animated.
`modifier: Modifier = Modifier`	Modifier to be applied to the SegmentedCircularProgressIndicator.
`allowProgressOverflow: Boolean = false`	When progress overflow is allowed, values smaller than 0.0 will be coerced to 0, while values larger than 1.0 will be wrapped around and shown as overflow with a different track color `ProgressIndicatorColors.overflowTrackBrush`. For example values 1.2, 2.2 etc will be shown as 20% progress with the overflow color. When progress overflow is not allowed, progress values will be coerced into the range 0..1.
`startAngle: Float = CircularProgressIndicatorDefaults.StartAngle`	The starting position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. Default is 270 degrees `CircularProgressIndicatorDefaults.StartAngle` (top of the screen).
`endAngle: Float = startAngle`	The ending position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. By default equal to `startAngle`.
`colors: ProgressIndicatorColors = ProgressIndicatorDefaults.colors()`	`ProgressIndicatorColors` that will be used to resolve the indicator and track color for this progress indicator in different states.
`strokeWidth: Dp = CircularProgressIndicatorDefaults.largeStrokeWidth`	The stroke width for the progress indicator.
`gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)`	The size of the gap between segments (in Dp).
`enabled: Boolean = true`	controls the enabled state. Although this component is not clickable, it can be contained within a clickable component. When enabled is `false`, this component will appear visually disabled.

Slider

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun Slider(
    value: Int,
    onValueChange: (Int) -> Unit,
    valueProgression: IntProgression,
    modifier: Modifier = Modifier,
    decreaseIcon: @Composable () -> Unit = { SliderDefaults.DecreaseIcon() },
    increaseIcon: @Composable () -> Unit = { SliderDefaults.IncreaseIcon() },
    enabled: Boolean = true,
    segmented: Boolean = valueProgression.stepsNumber() <= MaxSegmentSteps,
    shape: Shape = SliderDefaults.shape,
    colors: SliderColors = SliderDefaults.sliderColors()
): Unit

Slider 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. Slider 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 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.material3.Slider

var value by remember { mutableStateOf(4) }
Slider(
    value = value,
    onValueChange = { value = it },
    valueProgression = 0..10,
    segmented = false,
)

A segmented slider sample:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material3.Slider

var value by remember { mutableStateOf(2f) }
Slider(
    value = value,
    onValueChange = { value = it },
    valueRange = 1f..4f,
    steps = 7,
    segmented = true,
)

Parameters
`value: Int`	Current value of the Slider. If outside of `valueProgression` provided, value will be coerced to this range.
`onValueChange: (Int) -> Unit`	Lambda in which value should be updated.
`valueProgression: IntProgression`	Progression of values that Slider value can take. Consists of rangeStart, rangeEnd and step. Range will be equally divided by step size.
`modifier: Modifier = Modifier`	Modifiers for the Slider layout.
`decreaseIcon: @Composable () -> Unit = { SliderDefaults.DecreaseIcon() }`	A slot for an icon which is placed on the decrease (start) button such as `SliderDefaults.DecreaseIcon`.
`increaseIcon: @Composable () -> Unit = { SliderDefaults.IncreaseIcon() }`	A slot for an icon which is placed on the increase (end) button such as `SliderDefaults.IncreaseIcon`.
`enabled: Boolean = true`	Controls the enabled state of the slider. When `false`, this slider will not be clickable.
`segmented: Boolean = valueProgression.stepsNumber() <= MaxSegmentSteps`	A boolean value which specifies whether a bar will be split into segments or not. Recommendation is while using this flag do not have more than `MaxSegmentSteps` steps as it might affect user experience. By default true if number of steps is <= `MaxSegmentSteps`.
`shape: Shape = SliderDefaults.shape`	Defines slider's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme.
`colors: SliderColors = SliderDefaults.sliderColors()`	`SliderColors` that will be used to resolve the background and content color for this slider in different states.

Slider

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    steps: Int,
    modifier: Modifier = Modifier,
    decreaseIcon: @Composable () -> Unit = { SliderDefaults.DecreaseIcon() },
    increaseIcon: @Composable () -> Unit = { SliderDefaults.IncreaseIcon() },
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..(steps + 1).toFloat(),
    segmented: Boolean = steps <= MaxSegmentSteps,
    shape: Shape = SliderDefaults.shape,
    colors: SliderColors = SliderDefaults.sliderColors()
): Unit

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.material3.Slider

var value by remember { mutableStateOf(4.5f) }
Slider(
    value = value,
    onValueChange = { value = it },
    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.material3.Slider

var value by remember { mutableStateOf(2f) }
Slider(
    value = value,
    onValueChange = { value = it },
    valueRange = 1f..4f,
    steps = 7,
    segmented = true,
)

Parameters
`value: Float`	Current value of the Slider. If outside of `valueRange` provided, value will be coerced to this range.
`onValueChange: (Float) -> Unit`	Lambda in which value should be updated.
`steps: Int`	Specifies the number of discrete values, excluding min and max values, evenly distributed across the whole value range. Must not be negative. If 0, slider will have only min and max values and no steps in between.
`modifier: Modifier = Modifier`	Modifiers for the Slider layout.
`decreaseIcon: @Composable () -> Unit = { SliderDefaults.DecreaseIcon() }`	A slot for an icon which is placed on the decrease (start) button such as `SliderDefaults.DecreaseIcon`.
`increaseIcon: @Composable () -> Unit = { SliderDefaults.IncreaseIcon() }`	A slot for an icon which is placed on the increase (end) button such as `SliderDefaults.IncreaseIcon`.
`enabled: Boolean = true`	Controls the enabled state of the slider. When `false`, this slider will not be clickable.
`valueRange: ClosedFloatingPointRange<Float> = 0f..(steps + 1).toFloat()`	Range of values that Slider value can take. Passed `value` will be coerced to this range.
`segmented: Boolean = steps <= MaxSegmentSteps`	A boolean value which specifies whether a bar will be split into segments or not. Recommendation is while using this flag do not have more than `MaxSegmentSteps` steps as it might affect user experience. By default true if number of `steps` is <= `MaxSegmentSteps`.
`shape: Shape = SliderDefaults.shape`	Defines slider's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme.
`colors: SliderColors = SliderDefaults.sliderColors()`	`SliderColors` that will be used to resolve the background and content color for this slider in different states.

SplitCheckboxButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun SplitCheckboxButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    toggleContentDescription: String?,
    onContainerClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CheckboxButtonDefaults.splitCheckboxButtonShape,
    colors: SplitCheckboxButtonColors = CheckboxButtonDefaults.splitCheckboxButtonColors(),
    toggleInteractionSource: MutableInteractionSource? = null,
    containerInteractionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    containerClickLabel: String? = null,
    contentPadding: PaddingValues = CheckboxButtonDefaults.ContentPadding,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit
): Unit

The Wear Material SplitCheckboxButton offers slots and a specific layout for a label and secondaryLabel. The secondaryLabel is optional. The items are laid out with a column containing the two label slots and a Checkbox at the end.

The SplitCheckboxButton is Stadium shaped. The label should take no more than 3 lines of text. The secondary label should take no more than 2 lines of text. With localisation and/or large font sizes, the SplitCheckboxButton height adjusts to accommodate the contents. The label and secondary label are start aligned by default.

A SplitCheckboxButton has two tappable areas, one tap area for the labels and another for the checkbox. The onContainerClick listener will be associated with the main body of the SplitCheckboxButton and the onCheckedChange listener associated with the checkbox area only.

Samples: Example of a SplitCheckboxButton:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.CheckboxButton
import androidx.wear.compose.material3.SplitCheckboxButton
import androidx.wear.compose.material3.Text

var checked by remember { mutableStateOf(true) }
SplitCheckboxButton(
    label = { Text("Split Checkbox Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
    checked = checked,
    onCheckedChange = { checked = it },
    toggleContentDescription = "Split Checkbox Button Sample",
    onContainerClick = {
        /* Do something */
    },
    containerClickLabel = "click",
    enabled = true,
)

For a SplitCheckboxButton the background of the tappable background area behind the toggle control will have a visual effect applied to provide a "divider" between the two tappable areas.

The recommended set of colors can be obtained from CheckboxButtonDefaults, e.g. CheckboxButtonDefaults.splitCheckboxButtonColors.

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

Parameters
`checked: Boolean`	Boolean flag indicating whether this button is currently checked.
`onCheckedChange: (Boolean) -> Unit`	Callback to be invoked when this buttons checked status is changed.
`toggleContentDescription: String?`	The content description for the checkbox control part of the component.
`onContainerClick: () -> Unit`	Click listener called when the user clicks the main body of the button, the area behind the labels.
`modifier: Modifier = Modifier`	Modifier to be applied to the button.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shape: Shape = CheckboxButtonDefaults.splitCheckboxButtonShape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme.
`colors: SplitCheckboxButtonColors = CheckboxButtonDefaults.splitCheckboxButtonColors()`	`SplitCheckboxButtonColors` that will be used to resolve the background and content color for this button in different states.
`toggleInteractionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button's "toggleable" tap area. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`containerInteractionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button's main body "clickable" tap area. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`containerClickLabel: String? = null`	Optional click label on the main body of the button for accessibility.
`contentPadding: PaddingValues = CheckboxButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content.
`secondaryLabel: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's secondary label. The contents are expected to be "start" aligned.
`label: @Composable RowScope.() -> Unit`	A slot for providing the button's main label. The contents are expected to be text which is "start" aligned.

SplitRadioButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun SplitRadioButton(
    selected: Boolean,
    onSelectionClick: () -> Unit,
    selectionContentDescription: String?,
    onContainerClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = RadioButtonDefaults.splitRadioButtonShape,
    colors: SplitRadioButtonColors = RadioButtonDefaults.splitRadioButtonColors(),
    selectionInteractionSource: MutableInteractionSource? = null,
    containerInteractionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    containerClickLabel: String? = null,
    contentPadding: PaddingValues = RadioButtonDefaults.ContentPadding,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit
): Unit

The Wear Material SplitRadioButton offers two slots and a specific layout for a label and secondaryLabel. The secondaryLabel is optional. The items are laid out with a column containing the two label slots and radio button control at the end.

The SplitRadioButton is Stadium shaped. The label should take no more than 3 lines of text. The secondary label should take no more than 2 lines of text. With localisation and/or large font sizes, the SplitRadioButton height adjusts to accommodate the contents. The label and secondary label are start aligned by default.

A SplitRadioButton has two tappable areas, one tap area for the labels and another for the selection control. The onContainerClick listener will be associated with the main body of the split radio button with the onSelectionClick listener associated with the selection control area only.

Samples: Example of a SplitRadioButton:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.RadioButton
import androidx.wear.compose.material3.SplitRadioButton
import androidx.wear.compose.material3.Text

Column(modifier = Modifier.selectableGroup()) {
    var selectedButton by remember { mutableStateOf(0) }
    // SplitRadioButton uses the Radio selection control by default.
    SplitRadioButton(
        label = { Text("First Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
        selected = selectedButton == 0,
        onSelectionClick = { selectedButton = 0 },
        selectionContentDescription = "First",
        onContainerClick = {
            /* Do something */
        },
        containerClickLabel = "click",
        enabled = true,
    )
    Spacer(modifier = Modifier.height(4.dp))
    SplitRadioButton(
        label = { Text("Second Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
        selected = selectedButton == 1,
        onSelectionClick = { selectedButton = 1 },
        selectionContentDescription = "Second",
        onContainerClick = {
            /* Do something */
        },
        containerClickLabel = "click",
        enabled = true,
    )
}

For a SplitRadioButton the background of the tappable background area behind the selection control will have a visual effect applied to provide a "divider" between the two tappable areas.

The recommended set of colors can be obtained from RadioButtonDefaults, e.g. RadioButtonDefaults.splitRadioButtonColors.

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

Parameters
`selected: Boolean`	Boolean flag indicating whether this button is currently selected.
`onSelectionClick: () -> Unit`	Callback to be invoked when this button has been selected.
`selectionContentDescription: String?`	The content description for the selection control part of the component
`onContainerClick: () -> Unit`	Click listener called when the user clicks the main body of the button, the area containing the labels.
`modifier: Modifier = Modifier`	Modifier to be applied to the button.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shape: Shape = RadioButtonDefaults.splitRadioButtonShape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme.
`colors: SplitRadioButtonColors = RadioButtonDefaults.splitRadioButtonColors()`	`SplitRadioButtonColors` that will be used to resolve the background and content color for this button in different states.
`selectionInteractionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button's "selectable" tap area. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`containerInteractionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button's "clickable" tap area. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`containerClickLabel: String? = null`	Optional click label on the main body of the button for accessibility.
`contentPadding: PaddingValues = RadioButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content.
`secondaryLabel: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's secondary label. The contents are expected to be "start" aligned.
`label: @Composable RowScope.() -> Unit`	A slot for providing the button's main label. The contents are expected to be text which is "start" aligned.

SplitSwitchButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun SplitSwitchButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    toggleContentDescription: String?,
    onContainerClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = SwitchButtonDefaults.splitSwitchButtonShape,
    colors: SplitSwitchButtonColors = SwitchButtonDefaults.splitSwitchButtonColors(),
    toggleInteractionSource: MutableInteractionSource? = null,
    containerInteractionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    containerClickLabel: String? = null,
    contentPadding: PaddingValues = SwitchButtonDefaults.ContentPadding,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit
): Unit

The Wear Material SplitSwitchButton offers slots and a specific layout for a label and secondary label. The secondaryLabel is optional. The items are laid out with a column containing the two label slots and a Switch at the end.

The SplitSwitchButton is Stadium shaped. The label should take no more than 3 lines of text. The secondary label should take no more than 2 lines of text. With localisation and/or large font sizes, the SplitSwitchButton height adjusts to accommodate the contents. The label and secondary label are start aligned by default.

A SplitSwitchButton has two tappable areas, one tap area for the labels and another for the switch. The onContainerClick listener will be associated with the main body of the SplitSwitchButton with the onCheckedChange listener associated with the switch area only.

Example of a SplitSwitchButton:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.SplitSwitchButton
import androidx.wear.compose.material3.SwitchButton
import androidx.wear.compose.material3.Text

var checked by remember { mutableStateOf(true) }
SplitSwitchButton(
    label = { Text("Split Switch Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
    checked = checked,
    onCheckedChange = { checked = it },
    toggleContentDescription = "Split Switch Button Sample",
    onContainerClick = {
        /* Do something */
    },
    enabled = true,
)

For a SplitSwitchButton the background of the tappable background area behind the switch will have a visual effect applied to provide a "divider" between the two tappable areas.

The recommended set of colors can be obtained from SwitchButtonDefaults, e.g. SwitchButtonDefaults.splitSwitchButtonColors.

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

Parameters
`checked: Boolean`	Boolean flag indicating whether this button is currently checked.
`onCheckedChange: (Boolean) -> Unit`	Callback to be invoked when this buttons checked status is changed.
`toggleContentDescription: String?`	The content description for the switch control part of the component.
`onContainerClick: () -> Unit`	Click listener called when the user clicks the main body of the button, the area behind the labels.
`modifier: Modifier = Modifier`	Modifier to be applied to the button.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shape: Shape = SwitchButtonDefaults.splitSwitchButtonShape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme.
`colors: SplitSwitchButtonColors = SwitchButtonDefaults.splitSwitchButtonColors()`	`SplitSwitchButtonColors` that will be used to resolve the background and content color for this button in different states.
`toggleInteractionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button's "toggleable" tap area. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`containerInteractionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button's main body "clickable" tap area. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`containerClickLabel: String? = null`	Optional click label on the main body of the button for accessibility.
`contentPadding: PaddingValues = SwitchButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content.
`secondaryLabel: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's secondary label. The contents are expected to be "start" aligned.
`label: @Composable RowScope.() -> Unit`	A slot for providing the button's main label. The contents are expected to be text which is "start" aligned.

Stepper

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun Stepper(
    value: Int,
    onValueChange: (Int) -> Unit,
    valueProgression: IntProgression,
    decreaseIcon: @Composable () -> Unit,
    increaseIcon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: StepperColors = StepperDefaults.colors(),
    content: @Composable BoxScope.() -> Unit
): Unit

Example of a Stepper with integer values:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Stepper
import androidx.wear.compose.material3.StepperDefaults
import androidx.wear.compose.material3.StepperLevelIndicator
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.samples.icons.VolumeDownIcon
import androidx.wear.compose.material3.samples.icons.VolumeUpIcon

var value by remember { mutableIntStateOf(3) }
val valueProgression = remember { 0..10 }
Box(modifier = Modifier.fillMaxSize()) {
    Stepper(
        value = value,
        onValueChange = { value = it },
        valueProgression = valueProgression,
        decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
        increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
    ) {
        Text(String.format("Value: %d".format(value)))
    }
    StepperLevelIndicator(
        value = { value },
        valueProgression = valueProgression,
        modifier = Modifier.align(Alignment.CenterStart),
    )
}

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 value is not equal to any step value, then it will be coerced to the closest step value. However, the value itself will not be changed and onValueChange in this case will not be triggered.

Parameters
`value: Int`	Current value of the Stepper. If outside of `valueProgression` provided, value will be coerced to this range.
`onValueChange: (Int) -> Unit`	Lambda in which value should be updated.
`valueProgression: IntProgression`	Progression of values that Stepper value can take. Consists of rangeStart, rangeEnd and step. Range will be equally divided by step size.
`decreaseIcon: @Composable () -> Unit`	A slot for an icon which is placed on the decrease (bottom) button.
`increaseIcon: @Composable () -> Unit`	A slot for an icon which is placed on the increase (top) button.
`modifier: Modifier = Modifier`	Modifiers for the Stepper layout.
`enabled: Boolean = true`	Whether the `Stepper` is enabled.
`colors: StepperColors = StepperDefaults.colors()`	`StepperColors` that will be used to resolve the colors used for this `Stepper`. See `StepperDefaults.colors`.
`content: @Composable BoxScope.() -> Unit`	Content body for the Stepper.

Stepper

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun Stepper(
    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(),
    colors: StepperColors = StepperDefaults.colors(),
    content: @Composable BoxScope.() -> Unit
): Unit

Stepper allows users to make a selection from a range of values. It's a full-screen control with increase button on the top, decrease button on the bottom and a slot (expected to have either Text or Button) in the middle. Value can be increased and decreased by clicking on the increase and decrease buttons. Buttons can have custom icons - decreaseIcon and increaseIcon. Step value is calculated as the difference between min and max values divided by steps+1. Stepper itself doesn't show the current value but can be displayed via the content slot or StepperLevelIndicator if required. If value is not equal to any step value, then it will be coerced to the closest step value. However, the value itself will not be changed and onValueChange in this case will not be triggered. To add range semantics on Stepper, use Modifier.rangeSemantics.

Example of a simple Stepper with StepperLevelIndicator:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Stepper
import androidx.wear.compose.material3.StepperDefaults
import androidx.wear.compose.material3.StepperLevelIndicator
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.samples.icons.VolumeDownIcon
import androidx.wear.compose.material3.samples.icons.VolumeUpIcon

var value by remember { mutableFloatStateOf(2f) }
val valueRange = remember { 0f..4f }
Box(modifier = Modifier.fillMaxSize()) {
    Stepper(
        value = value,
        onValueChange = { value = it },
        valueRange = valueRange,
        steps = 7,
        decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
        increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
    ) {
        Text(String.format("Value: %.1f".format(value)))
    }
    StepperLevelIndicator(
        value = { value },
        valueRange = valueRange,
        modifier = Modifier.align(Alignment.CenterStart),
    )
}

Example of a Stepper with range semantics:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Stepper
import androidx.wear.compose.material3.StepperDefaults
import androidx.wear.compose.material3.StepperLevelIndicator
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rangeSemantics
import androidx.wear.compose.material3.samples.icons.VolumeDownIcon
import androidx.wear.compose.material3.samples.icons.VolumeUpIcon

var value by remember { mutableFloatStateOf(2f) }
val valueRange = remember { 0f..4f }
val onValueChange = { i: Float -> value = i }
val steps = 7
Box(modifier = Modifier.fillMaxSize()) {
    Stepper(
        value = value,
        onValueChange = onValueChange,
        valueRange = valueRange,
        modifier = Modifier.rangeSemantics(value, true, onValueChange, valueRange, steps),
        steps = steps,
        decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
        increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
    ) {
        Text("Value: $value")
    }
    StepperLevelIndicator(
        value = { value },
        valueRange = valueRange,
        modifier = Modifier.align(Alignment.CenterStart),
    )
}

Example of a Stepper with Custom icons and Button content:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableFloatStateOf
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.material3.Button
import androidx.wear.compose.material3.Stepper
import androidx.wear.compose.material3.StepperDefaults
import androidx.wear.compose.material3.StepperLevelIndicator
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.samples.icons.HeadphoneIcon
import androidx.wear.compose.material3.samples.icons.VolumeDownIcon
import androidx.wear.compose.material3.samples.icons.VolumeUpIcon

var value by remember { mutableFloatStateOf(2f) }
val valueRange = remember { 0f..4f }
Box(modifier = Modifier.fillMaxSize()) {
    Stepper(
        value = value,
        onValueChange = { value = it },
        valueRange = valueRange,
        increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
        decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
        steps = 7,
    ) {
        Text(String.format("Value: %.1f".format(value)))
        Button(
            onClick = {},
            modifier = Modifier.width(150.dp),
            label = { Text(text = "This watch", modifier = Modifier.fillMaxWidth()) },
            secondaryLabel = { Text(text = "Headphones", modifier = Modifier.fillMaxWidth()) },
            icon = { HeadphoneIcon(24.dp) },
        )
    }
    StepperLevelIndicator(
        value = { value },
        valueRange = valueRange,
        modifier = Modifier.align(Alignment.CenterStart),
    )
}

Parameters
`value: Float`	Current value of the Stepper. If outside of `valueRange` provided, value will be coerced to this range.
`onValueChange: (Float) -> Unit`	Lambda in which value should be updated.
`steps: Int`	Specifies the number of discrete values, excluding min and max values, evenly distributed across the whole value range. Must not be negative. If 0, stepper will have only min and max values and no steps in between.
`decreaseIcon: @Composable () -> Unit`	A slot for an icon which is placed on the decrease (bottom) button.
`increaseIcon: @Composable () -> Unit`	A slot for an icon which is placed on the increase (top) button.
`modifier: Modifier = Modifier`	Modifiers for the Stepper layout.
`enabled: Boolean = true`	Whether the `Stepper` is enabled.
`valueRange: ClosedFloatingPointRange<Float> = 0f..(steps + 1).toFloat()`	Range of values that Stepper value can take. Passed `value` will be coerced to this range.
`colors: StepperColors = StepperDefaults.colors()`	`StepperColors` that will be used to resolve the colors used for this `Stepper`. See `StepperDefaults.colors`.
`content: @Composable BoxScope.() -> Unit`	Content body for the Stepper.

StepperLevelIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun StepperLevelIndicator(
    value: () -> Float,
    modifier: Modifier = Modifier,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    enabled: Boolean = true,
    colors: LevelIndicatorColors = LevelIndicatorDefaults.colors(),
    strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth,
    sweepAngle: @FloatRange(from = 0.0, to = 360.0) Float = LevelIndicatorDefaults.SweepAngle,
    reverseDirection: Boolean = false
): Unit

Creates a StepperLevelIndicator for screens that that control a setting, such as volume, with a Stepper.

Example of LevelIndicator with a Stepper:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Stepper
import androidx.wear.compose.material3.StepperDefaults
import androidx.wear.compose.material3.StepperLevelIndicator
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.samples.icons.VolumeDownIcon
import androidx.wear.compose.material3.samples.icons.VolumeUpIcon

var value by remember { mutableFloatStateOf(2f) }
val valueRange = remember { 0f..4f }
Box(modifier = Modifier.fillMaxSize()) {
    Stepper(
        value = value,
        onValueChange = { value = it },
        valueRange = valueRange,
        steps = 7,
        decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
        increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
    ) {
        Text(String.format("Value: %.1f".format(value)))
    }
    StepperLevelIndicator(
        value = { value },
        valueRange = valueRange,
        modifier = Modifier.align(Alignment.CenterStart),
    )
}

Parameters
`value: () -> Float`	Value of the indicator in the `valueRange`.
`modifier: Modifier = Modifier`	Modifier to be applied to the component
`valueRange: ClosedFloatingPointRange<Float> = 0f..1f`	range of values that `value` can take
`enabled: Boolean = true`	Controls the enabled state of `LevelIndicator` - when false, disabled colors will be used.
`colors: LevelIndicatorColors = LevelIndicatorDefaults.colors()`	`LevelIndicatorColors` that will be used to resolve the indicator and track colors for this `LevelIndicator` in different states
`strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth`	The stroke width for the indicator and track strokes
`sweepAngle: @FloatRange(from = 0.0, to = 360.0) Float = LevelIndicatorDefaults.SweepAngle`	The angle covered by the curved LevelIndicator, in degrees
`reverseDirection: Boolean = false`	Reverses direction of PositionIndicator if true

StepperLevelIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun StepperLevelIndicator(
    value: () -> Int,
    valueProgression: IntProgression,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: LevelIndicatorColors = LevelIndicatorDefaults.colors(),
    strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth,
    sweepAngle: @FloatRange(from = 0.0, to = 360.0) Float = LevelIndicatorDefaults.SweepAngle,
    reverseDirection: Boolean = false
): Unit

Creates a StepperLevelIndicator for screens that that control a setting, such as volume, with a Stepper.

Example of LevelIndicator with a Stepper working on an IntProgression:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Stepper
import androidx.wear.compose.material3.StepperDefaults
import androidx.wear.compose.material3.StepperLevelIndicator
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.samples.icons.VolumeDownIcon
import androidx.wear.compose.material3.samples.icons.VolumeUpIcon

var value by remember { mutableIntStateOf(3) }
val valueProgression = remember { 0..10 }
Box(modifier = Modifier.fillMaxSize()) {
    Stepper(
        value = value,
        onValueChange = { value = it },
        valueProgression = valueProgression,
        decreaseIcon = { VolumeDownIcon(StepperDefaults.IconSize) },
        increaseIcon = { VolumeUpIcon(StepperDefaults.IconSize) },
    ) {
        Text(String.format("Value: %d".format(value)))
    }
    StepperLevelIndicator(
        value = { value },
        valueProgression = valueProgression,
        modifier = Modifier.align(Alignment.CenterStart),
    )
}

Parameters
`value: () -> Int`	Current value of the Stepper. If outside of `valueProgression` provided, value will be coerced to this range.
`valueProgression: IntProgression`	Progression of values that `StepperLevelIndicator` value can take. Consists of rangeStart, rangeEnd and step. Range will be equally divided by step size.
`modifier: Modifier = Modifier`	Modifier to be applied to the component
`enabled: Boolean = true`	Controls the enabled state of `LevelIndicator` - when false, disabled colors will be used.
`colors: LevelIndicatorColors = LevelIndicatorDefaults.colors()`	`LevelIndicatorColors` that will be used to resolve the indicator and track colors for this `LevelIndicator` in different states
`strokeWidth: Dp = LevelIndicatorDefaults.StrokeWidth`	The stroke width for the indicator and track strokes
`sweepAngle: @FloatRange(from = 0.0, to = 360.0) Float = LevelIndicatorDefaults.SweepAngle`	The angle covered by the curved LevelIndicator, in degrees
`reverseDirection: Boolean = false`	Reverses direction of PositionIndicator if true

SuccessConfirmationDialog

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun SuccessConfirmationDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    curvedText: (CurvedScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.successColors(),
    properties: DialogProperties = DialogProperties(),
    durationMillis: Long = ConfirmationDialogDefaults.DurationMillis,
    content: @Composable () -> Unit = { ConfirmationDialogDefaults.SuccessIcon() }
): Unit

Shows a SuccessConfirmationDialog dialog with a success icon and optional short curved text. This variation of confirmation dialog indicates a successful operation or action.

Where user input is required, such as choosing to ok or cancel an action, use AlertDialog instead of SuccessConfirmationDialog.

Example of a SuccessConfirmationDialog usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ConfirmationDialog
import androidx.wear.compose.material3.ConfirmationDialogDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.SuccessConfirmationDialog
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.confirmationDialogCurvedText

var showConfirmation by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showConfirmation = true },
        label = { Text("Show Confirmation") },
    )
}

val text = "Success"
val style = ConfirmationDialogDefaults.curvedTextStyle
SuccessConfirmationDialog(
    visible = showConfirmation,
    onDismissRequest = { showConfirmation = false },
    curvedText = { confirmationDialogCurvedText(text, style) },
)

Parameters
`visible: Boolean`	A boolean indicating whether the confirmation dialog should be displayed.
`onDismissRequest: () -> Unit`	A lambda function to be called when the dialog is dismissed - either by swiping right or when the `durationMillis` has passed. Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting `visible` to false.
`curvedText: (CurvedScope.() -> Unit)?`	A slot for displaying curved text content which will be shown along the bottom edge of the dialog. We recommend using `confirmationDialogCurvedText` for this parameter, which will give the default sweep angle and padding, and `ConfirmationDialogDefaults.curvedTextStyle` as the style.
`modifier: Modifier = Modifier`	Modifier to be applied to the confirmation content.
`colors: ConfirmationDialogColors = ConfirmationDialogDefaults.successColors()`	A `ConfirmationDialogColors` object for customizing the colors used in this `SuccessConfirmationDialog`.
`properties: DialogProperties = DialogProperties()`	An optional `DialogProperties` object for configuring the dialog's behavior.
`durationMillis: Long = ConfirmationDialogDefaults.DurationMillis`	The duration in milliseconds for which the dialog is displayed. This value will be adjusted by the accessibility manager according to the content displayed.
`content: @Composable () -> Unit = { ConfirmationDialogDefaults.SuccessIcon() }`	A slot for displaying an icon inside the confirmation dialog, which can be animated. Defaults to an animated `ConfirmationDialogDefaults.SuccessIcon`.

SuccessConfirmationDialogContent

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun SuccessConfirmationDialogContent(
    curvedText: (CurvedScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationDialogColors = ConfirmationDialogDefaults.successColors(),
    content: @Composable () -> Unit = { ConfirmationDialogDefaults.SuccessIcon() }
): Unit

SuccessConfirmationDialogContent provides the content for a success confirmation dialog with a success icon and optional short curved text. This variation of confirmation dialog indicates a successful operation or action.

Prefer using SuccessConfirmationDialog directly, which provides built-in animations when showing/hiding the dialog. This composable may be used to provide the content for a confirmation dialog if custom show/hide animations are required.

Where user input is required, such as choosing to ok or cancel an action, use AlertDialog instead of SuccessConfirmationDialog.

Example of a SuccessConfirmationDialog usage:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ConfirmationDialog
import androidx.wear.compose.material3.ConfirmationDialogDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.SuccessConfirmationDialog
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.confirmationDialogCurvedText

var showConfirmation by remember { mutableStateOf(false) }

Box(Modifier.fillMaxSize()) {
    FilledTonalButton(
        modifier = Modifier.align(Alignment.Center),
        onClick = { showConfirmation = true },
        label = { Text("Show Confirmation") },
    )
}

val text = "Success"
val style = ConfirmationDialogDefaults.curvedTextStyle
SuccessConfirmationDialog(
    visible = showConfirmation,
    onDismissRequest = { showConfirmation = false },
    curvedText = { confirmationDialogCurvedText(text, style) },
)

Parameters
`curvedText: (CurvedScope.() -> Unit)?`	A slot for displaying curved text content which will be shown along the bottom edge of the dialog. We recommend using `confirmationDialogCurvedText` for this parameter, which will give the default sweep angle and padding, and `ConfirmationDialogDefaults.curvedTextStyle` as the style.
`modifier: Modifier = Modifier`	Modifier to be applied to the confirmation content.
`colors: ConfirmationDialogColors = ConfirmationDialogDefaults.successColors()`	A `ConfirmationDialogColors` object for customizing the colors used in this `SuccessConfirmationDialog`. will be adjusted by the accessibility manager according to the content displayed.
`content: @Composable () -> Unit = { ConfirmationDialogDefaults.SuccessIcon() }`	A slot for displaying an icon inside the confirmation dialog, which can be animated. Defaults to an animated `ConfirmationDialogDefaults.SuccessIcon`.

SwipeToDismissBox

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun SwipeToDismissBox(
    state: SwipeToDismissBoxState,
    modifier: Modifier = Modifier,
    backgroundScrimColor: Color = MaterialTheme.colorScheme.background,
    contentScrimColor: Color = MaterialTheme.colorScheme.background,
    backgroundKey: Any = SwipeToDismissKeys.Background,
    contentKey: Any = SwipeToDismissKeys.Content,
    userSwipeEnabled: Boolean = true,
    content: @Composable BoxScope.(isBackground: Boolean) -> Unit
): Unit

Wear Material 3 SwipeToDismissBox that handles the swipe-to-dismiss gesture. Takes a single slot for the background (only displayed during the swipe gesture) and the foreground content.

Example of a SwipeToDismissBox with stateful composables:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.saveable.rememberSaveableStateHolder
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.SwipeToDismissValue
import androidx.wear.compose.foundation.rememberSwipeToDismissBoxState
import androidx.wear.compose.material3.CheckboxButton
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.SwipeToDismissBox
import androidx.wear.compose.material3.Text

// State for managing a 2-level navigation hierarchy between
// MainScreen and ItemScreen composables.
// Alternatively, use SwipeDismissableNavHost from wear.compose.navigation.
var showMainScreen by remember { mutableStateOf(true) }
val saveableStateHolder = rememberSaveableStateHolder()

// Swipe gesture dismisses ItemScreen to return to MainScreen.
val state = rememberSwipeToDismissBoxState()
LaunchedEffect(state.currentValue) {
    if (state.currentValue == SwipeToDismissValue.Dismissed) {
        state.snapTo(SwipeToDismissValue.Default)
        showMainScreen = !showMainScreen
    }
}

// Hierarchy is ListScreen -> ItemScreen, so we show ListScreen as the background behind
// the ItemScreen, otherwise there's no background to show.
SwipeToDismissBox(
    state = state,
    userSwipeEnabled = !showMainScreen,
    backgroundKey = if (!showMainScreen) "MainKey" else "Background",
    contentKey = if (showMainScreen) "MainKey" else "ItemKey",
) { isBackground ->
    if (isBackground || showMainScreen) {
        // Best practice would be to use State Hoisting and leave this composable stateless.
        // Here, we want to support MainScreen being shown from different destinations
        // (either in the foreground or in the background during swiping) - that can be achieved
        // using SaveableStateHolder and rememberSaveable as shown below.
        saveableStateHolder.SaveableStateProvider(
            key = "MainKey",
            content = {
                // Composable that maintains its own state
                // and can be shown in foreground or background.
                val checked = rememberSaveable { mutableStateOf(true) }
                Column(
                    modifier =
                        Modifier.fillMaxSize().padding(horizontal = 8.dp, vertical = 8.dp),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.spacedBy(4.dp, Alignment.CenterVertically),
                ) {
                    FilledTonalButton(
                        onClick = { showMainScreen = false },
                        modifier = Modifier.fillMaxWidth(),
                    ) {
                        Text("Item details")
                    }
                    CheckboxButton(
                        label = { Text("Checkbox", maxLines = 1) },
                        checked = checked.value,
                        onCheckedChange = { checked.value = it },
                        modifier = Modifier.fillMaxWidth(),
                    )
                }
            },
        )
    } else {
        Column(
            modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.primary),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text("Show details here...", color = MaterialTheme.colorScheme.onPrimary)
            Text("Swipe right to dismiss", color = MaterialTheme.colorScheme.onPrimary)
        }
    }
}

Example of using Modifier.edgeSwipeToDismiss with SwipeToDismissBox:

import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.edgeSwipeToDismiss
import androidx.wear.compose.foundation.rememberSwipeToDismissBoxState
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.SwipeToDismissBox
import androidx.wear.compose.material3.Text

val state = rememberSwipeToDismissBoxState()

// When using Modifier.edgeSwipeToDismiss, it is required that the element on which the
// modifier applies exists within a SwipeToDismissBox which shares the same state.
SwipeToDismissBox(state = state, onDismissed = navigateBack) { isBackground ->
    val horizontalScrollState = rememberScrollState(0)
    if (isBackground) {
        Box(
            modifier =
                Modifier.fillMaxSize().background(MaterialTheme.colorScheme.secondaryContainer)
        )
    } else {
        Box(modifier = Modifier.fillMaxSize()) {
            Text(
                modifier =
                    Modifier.align(Alignment.Center)
                        .edgeSwipeToDismiss(state)
                        .horizontalScroll(horizontalScrollState),
                text =
                    "This text can be scrolled horizontally - to dismiss, swipe " +
                        "right from the left edge of the screen (called Edge Swiping)",
            )
        }
    }
}

For more information, see the Swipe to dismiss guide.

Parameters
`state: SwipeToDismissBoxState`	State containing information about ongoing swipe or animation.
`modifier: Modifier = Modifier`	`Modifier` for this component.
`backgroundScrimColor: Color = MaterialTheme.colorScheme.background`	`Color` for background scrim.
`contentScrimColor: Color = MaterialTheme.colorScheme.background`	`Color` used for the scrim over the content composable during the swipe gesture.
`backgroundKey: Any = SwipeToDismissKeys.Background`	`key` which identifies the content currently composed in the `content` block when isBackground == true. Provide the backgroundKey if your background content will be displayed as a foreground after the swipe animation ends (as is common when `SwipeToDismissBox` is used for the navigation). This allows remembered state to be correctly moved between background and foreground.
`contentKey: Any = SwipeToDismissKeys.Content`	`key` which identifies the content currently composed in the `content` block when isBackground == false. See `backgroundKey`.
`userSwipeEnabled: Boolean = true`	Whether the swipe gesture is enabled. (e.g. when there is no background screen, set userSwipeEnabled = false)
`content: @Composable BoxScope.(isBackground: Boolean) -> Unit`	Slot for content, with the isBackground parameter enabling content to be displayed behind the foreground content - the background is normally hidden, is shown behind a scrim during the swipe gesture, and is shown without scrim once the finger passes the swipe-to-dismiss threshold.

SwipeToDismissBox

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun SwipeToDismissBox(
    onDismissed: () -> Unit,
    modifier: Modifier = Modifier,
    state: SwipeToDismissBoxState = rememberSwipeToDismissBoxState(),
    backgroundScrimColor: Color = MaterialTheme.colorScheme.background,
    contentScrimColor: Color = MaterialTheme.colorScheme.background,
    backgroundKey: Any = SwipeToDismissKeys.Background,
    contentKey: Any = SwipeToDismissKeys.Content,
    userSwipeEnabled: Boolean = true,
    content: @Composable BoxScope.(isBackground: Boolean) -> Unit
): Unit

Wear Material 3 SwipeToDismissBox that handles the swipe-to-dismiss gesture. This overload takes an onDismissed parameter which is used to execute a command when the swipe to dismiss has completed, such as navigating to another screen.

Example of a simple SwipeToDismissBox:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.SwipeToDismissBox
import androidx.wear.compose.material3.Text

SwipeToDismissBox(onDismissed = navigateBack) { isBackground ->
    if (isBackground) {
        Box(
            modifier =
                Modifier.fillMaxSize().background(MaterialTheme.colorScheme.secondaryContainer)
        )
    } else {
        Column(
            modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.primary),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text("Swipe right to dismiss", color = MaterialTheme.colorScheme.onPrimary)
        }
    }
}

Example of using Modifier.edgeSwipeToDismiss with SwipeToDismissBox:

import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.edgeSwipeToDismiss
import androidx.wear.compose.foundation.rememberSwipeToDismissBoxState
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.SwipeToDismissBox
import androidx.wear.compose.material3.Text

val state = rememberSwipeToDismissBoxState()

// When using Modifier.edgeSwipeToDismiss, it is required that the element on which the
// modifier applies exists within a SwipeToDismissBox which shares the same state.
SwipeToDismissBox(state = state, onDismissed = navigateBack) { isBackground ->
    val horizontalScrollState = rememberScrollState(0)
    if (isBackground) {
        Box(
            modifier =
                Modifier.fillMaxSize().background(MaterialTheme.colorScheme.secondaryContainer)
        )
    } else {
        Box(modifier = Modifier.fillMaxSize()) {
            Text(
                modifier =
                    Modifier.align(Alignment.Center)
                        .edgeSwipeToDismiss(state)
                        .horizontalScroll(horizontalScrollState),
                text =
                    "This text can be scrolled horizontally - to dismiss, swipe " +
                        "right from the left edge of the screen (called Edge Swiping)",
            )
        }
    }
}

For more information, see the Swipe to dismiss guide.

Parameters
`onDismissed: () -> Unit`	Executes when the swipe to dismiss has completed.
`modifier: Modifier = Modifier`	`Modifier` for this component.
`state: SwipeToDismissBoxState = rememberSwipeToDismissBoxState()`	State containing information about ongoing swipe or animation.
`backgroundScrimColor: Color = MaterialTheme.colorScheme.background`	`Color` for background scrim.
`contentScrimColor: Color = MaterialTheme.colorScheme.background`	`Color` used for the scrim over the content composable during the swipe gesture.
`backgroundKey: Any = SwipeToDismissKeys.Background`	`key` which identifies the content currently composed in the `content` block when isBackground == true. Provide the backgroundKey if your background content will be displayed as a foreground after the swipe animation ends (as is common when `SwipeToDismissBox` is used for the navigation). This allows remembered state to be correctly moved between background and foreground.
`contentKey: Any = SwipeToDismissKeys.Content`	`key` which identifies the content currently composed in the `content` block when isBackground == false. See `backgroundKey`.
`userSwipeEnabled: Boolean = true`	Whether the swipe gesture is enabled. (e.g. when there is no background screen, set userSwipeEnabled = false)
`content: @Composable BoxScope.(isBackground: Boolean) -> Unit`	Slot for content, with the isBackground parameter enabling content to be displayed behind the foreground content - the background is normally hidden, is shown behind a scrim during the swipe gesture, and is shown without scrim once the finger passes the swipe-to-dismiss threshold.

SwipeToReveal

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun SwipeToReveal(
    primaryAction: @Composable SwipeToRevealScope.() -> Unit,
    onSwipePrimaryAction: () -> Unit,
    modifier: Modifier = Modifier,
    secondaryAction: (@Composable SwipeToRevealScope.() -> Unit)? = null,
    undoPrimaryAction: (@Composable SwipeToRevealScope.() -> Unit)? = null,
    undoSecondaryAction: (@Composable SwipeToRevealScope.() -> Unit)? = null,
    revealState: RevealState = rememberRevealState(),
    revealDirection: RevealDirection = RevealDirection.RightToLeft,
    hasPartiallyRevealedState: Boolean = true,
    gestureInclusion: GestureInclusion = if (revealDirection == Bidirectional) {
            bidirectionalGestureInclusion
        } else {
            gestureInclusion(revealState)
        },
    content: @Composable () -> Unit
): Unit

SwipeToReveal Material composable. This adds the option to configure up to two additional actions on a Composable: a mandatory primaryAction and an optional secondaryAction. These actions are initially hidden (unless RevealState is created with an initial value other than RevealValue.Covered) and revealed only when the content is swiped - the action buttons can then be clicked. A full swipe of the content triggers the onSwipePrimaryAction callback, which is expected to match the primaryAction's onClick callback. Custom accessibility actions should always be added to the content using Modifier.semantics - examples are shown in the code samples.

Adding undo actions allows users to undo a primary or secondary action that may have been performed inadvertently. The corresponding undo action is displayed when the primary or secondary action is triggered via click or swipe and after SwipeToReveal has animated to the revealed state. After the undo action is clicked, SwipeToReveal animates back to the RevealValue.Covered state and the user can then swipe to reveal if they wish to perform another action.

For destructive actions like "Delete", consider making this the primary action, and providing the undoPrimaryAction.

When using SwipeToReveal with large content items like Cards, it is recommended to set the height of SwipeToRevealScope.PrimaryActionButton and SwipeToRevealScope.SecondaryActionButton to SwipeToRevealDefaults.LargeActionButtonHeight using Modifier.height - in other cases, the Button displayed by SwipeToReveal has height ButtonDefaults.Height by default. It is recommended to always use the default undo button height as created by SwipeToRevealScope.UndoActionButton.

If hasPartiallyRevealedState = true, RevealState should be reset to RevealValue.Covered by the caller when scrolling occurs. This is because the revealed actions are vertically centered on the visible part of the content when the actions are revealed and, if the RevealState is not reset to RevealValue.Covered, actions for tall items would appear off-center when the list is scrolled. See the code samples for examples.

If revealDirection is set to RevealDirection.Bidirectional, the actions revealed on swipe are the same on both sides.

Example of SwipeToReveal with primary and secondary actions and custom accessibility actions:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Delete
import androidx.compose.material.icons.outlined.MoreVert
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.CustomAccessibilityAction
import androidx.compose.ui.semantics.customActions
import androidx.compose.ui.semantics.semantics
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.SwipeToReveal
import androidx.wear.compose.material3.Text

SwipeToReveal(
    primaryAction = {
        PrimaryActionButton(
            onClick = { /* This block is called when the primary action is executed. */ },
            icon = { Icon(Icons.Outlined.Delete, contentDescription = "Delete") },
            text = { Text("Delete") },
        )
    },
    onSwipePrimaryAction = { /* This block is called when the full swipe gesture is performed. */
    },
    secondaryAction = {
        SecondaryActionButton(
            onClick = { /* This block is called when the secondary action is executed. */ },
            icon = { Icon(Icons.Outlined.MoreVert, contentDescription = "Options") },
        )
    },
    undoPrimaryAction = {
        UndoActionButton(
            onClick = { /* This block is called when the undo primary action is executed. */ },
            text = { Text("Undo Delete") },
        )
    },
) {
    Button(
        modifier =
            Modifier.fillMaxWidth().semantics {
                // Use custom actions to make the primary and secondary actions accessible
                customActions =
                    listOf(
                        CustomAccessibilityAction("Delete") {
                            /* Add the primary action click handler here */
                            true
                        },
                        CustomAccessibilityAction("Options") {
                            /* Add the secondary click handler here */
                            true
                        },
                    )
            },
        onClick = {},
    ) {
        Text("This Button has two actions", modifier = Modifier.fillMaxSize())
    }
}

Example of SwipeToReveal with a Card composable, it reveals a taller button:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Delete
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.CustomAccessibilityAction
import androidx.compose.ui.semantics.customActions
import androidx.compose.ui.semantics.semantics
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.SwipeToReveal
import androidx.wear.compose.material3.SwipeToRevealDefaults
import androidx.wear.compose.material3.Text

SwipeToReveal(
    primaryAction = {
        PrimaryActionButton(
            onClick = { /* This block is called when the primary action is executed. */ },
            icon = { Icon(Icons.Outlined.Delete, contentDescription = "Delete") },
            text = { Text("Delete") },
            modifier = Modifier.height(SwipeToRevealDefaults.LargeActionButtonHeight),
        )
    },
    onSwipePrimaryAction = { /* This block is called when the full swipe gesture is performed. */
    },
    undoPrimaryAction = {
        UndoActionButton(
            onClick = { /* This block is called when the undo primary action is executed. */ },
            text = { Text("Undo Delete") },
        )
    },
) {
    Card(
        modifier =
            Modifier.fillMaxWidth().semantics {
                // Use custom actions to make the primary action accessible
                customActions =
                    listOf(
                        CustomAccessibilityAction("Delete") {
                            /* Add the primary action click handler here */
                            true
                        }
                    )
            },
        onClick = {},
    ) {
        Text(
            "This Card has one action, and the revealed button is taller",
            modifier = Modifier.fillMaxSize(),
        )
    }
}

Example of SwipeToReveal with a TransformingLazyColumn, including resetting the RevealState to RevealValue.Covered when scrolling:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.height
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Delete
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.CompositingStrategy
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.semantics.CustomAccessibilityAction
import androidx.compose.ui.semantics.customActions
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.items
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.RevealValue
import androidx.wear.compose.material3.SwipeToReveal
import androidx.wear.compose.material3.SwipeToRevealDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TitleCard
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
import androidx.wear.compose.material3.rememberRevealState

val transformationSpec = rememberTransformationSpec()
val tlcState = rememberTransformingLazyColumnState()
val coroutineScope = rememberCoroutineScope()
val messages = remember {
    mutableStateListOf<String>().apply {
        for (i in 1..100) {
            add("Message #${i}")
        }
    }
}

TransformingLazyColumn(
    state = tlcState,
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 20.dp),
    modifier = Modifier.background(Color.Black),
) {
    items(items = messages, key = { it }) { message ->
        val revealState = rememberRevealState()

        // SwipeToReveal should be reset to covered when scrolling occurs.
        LaunchedEffect(tlcState.isScrollInProgress) {
            if (
                tlcState.isScrollInProgress && revealState.currentValue != RevealValue.Covered
            ) {
                coroutineScope.launch {
                    revealState.animateTo(targetValue = RevealValue.Covered)
                }
            }
        }

        SwipeToReveal(
            primaryAction = {
                PrimaryActionButton(
                    onClick = { messages.remove(message) },
                    icon = { Icon(Icons.Outlined.Delete, contentDescription = "Delete") },
                    text = { Text("Delete") },
                    modifier = Modifier.height(SwipeToRevealDefaults.LargeActionButtonHeight),
                )
            },
            revealState = revealState,
            onSwipePrimaryAction = { messages.remove(message) },
            modifier =
                Modifier.transformedHeight(this@items, transformationSpec)
                    .animateItem()
                    .graphicsLayer {
                        with(transformationSpec) {
                            applyContainerTransformation(scrollProgress)
                        }
                        // Is needed to disable clipping.
                        compositingStrategy = CompositingStrategy.ModulateAlpha
                        clip = false
                    },
        ) {
            TitleCard(
                onClick = {},
                title = { Text(message) },
                subtitle = { Text("Subtitle") },
                modifier =
                    Modifier.semantics {
                        // Use custom actions to make the primary action accessible
                        customActions =
                            listOf(
                                CustomAccessibilityAction("Delete") {
                                    messages.remove(message)
                                    true
                                }
                            )
                    },
            ) {
                Text("Message body which extends over multiple lines to extend the card")
            }
        }
    }
}

Example of SwipeToReveal with a ScalingLazyColumn, including resetting the RevealState to RevealValue.Covered when scrolling:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Delete
import androidx.compose.material.icons.outlined.MoreVert
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.CustomAccessibilityAction
import androidx.compose.ui.semantics.customActions
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.items
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.RevealValue
import androidx.wear.compose.material3.SwipeToReveal
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.rememberRevealState

val slcState = rememberScalingLazyListState()
val coroutineScope = rememberCoroutineScope()
val messages = remember {
    mutableStateListOf<String>().apply {
        for (i in 1..100) {
            add("This Button $i has two actions")
        }
    }
}

ScalingLazyColumn(
    state = slcState,
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 20.dp),
    modifier = Modifier.background(Color.Black),
) {
    items(items = messages, key = { it }) { message ->
        val revealState = rememberRevealState()

        // SwipeToReveal should be reset to covered when scrolling occurs.
        LaunchedEffect(slcState.isScrollInProgress) {
            if (
                slcState.isScrollInProgress && revealState.currentValue != RevealValue.Covered
            ) {
                coroutineScope.launch {
                    revealState.animateTo(targetValue = RevealValue.Covered)
                }
            }
        }

        SwipeToReveal(
            revealState = revealState,
            primaryAction = {
                PrimaryActionButton(
                    onClick = { messages.remove(message) },
                    icon = { Icon(Icons.Outlined.Delete, contentDescription = "Delete") },
                    text = { Text("Delete") },
                )
            },
            onSwipePrimaryAction = { messages.remove(message) },
            secondaryAction = {
                SecondaryActionButton(
                    onClick = { /* This block is called when the secondary action is executed. */
                    },
                    icon = { Icon(Icons.Outlined.MoreVert, contentDescription = "Options") },
                )
            },
        ) {
            Button(
                modifier =
                    Modifier.fillMaxWidth().semantics {
                        // Use custom actions to make the primary and secondary actions
                        // accessible
                        customActions =
                            listOf(
                                CustomAccessibilityAction("Delete") {
                                    messages.remove(message)
                                    true
                                },
                                CustomAccessibilityAction("Options") {
                                    /* Add the secondary click handler here */
                                    true
                                },
                            )
                    },
                onClick = {},
            ) {
                Text(message, modifier = Modifier.fillMaxSize())
            }
        }
    }
}

Example of SwipeToReveal with a ScalingLazyColumn that only executes the primary action when fully swiped (and does not settle after partially revealing the action) by setting hasPartiallyRevealedState = false (so RevealState does not need to be reset when scrolling):

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Delete
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.CustomAccessibilityAction
import androidx.compose.ui.semantics.customActions
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.items
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.SwipeToReveal
import androidx.wear.compose.material3.Text

val slcState = rememberScalingLazyListState()
val messages = remember {
    mutableStateListOf<String>().apply {
        for (i in 1..100) {
            add("Message #${i}")
        }
    }
}

ScalingLazyColumn(
    state = slcState,
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 20.dp),
    modifier = Modifier.background(Color.Black),
) {
    items(items = messages, key = { it }) { message ->
        SwipeToReveal(
            hasPartiallyRevealedState = false,
            primaryAction = {
                PrimaryActionButton(
                    onClick = { messages.remove(message) },
                    icon = { Icon(Icons.Outlined.Delete, contentDescription = "Delete") },
                    text = { Text("Delete") },
                )
            },
            onSwipePrimaryAction = { messages.remove(message) },
        ) {
            Button(
                modifier =
                    Modifier.fillMaxWidth().semantics {
                        // Use custom actions to make the primary action accessible
                        customActions =
                            listOf(
                                CustomAccessibilityAction("Delete") {
                                    messages.remove(message)
                                    true
                                }
                            )
                    },
                onClick = {},
            ) {
                Text(message, modifier = Modifier.fillMaxSize())
            }
        }
    }
}

Parameters
`primaryAction: @Composable SwipeToRevealScope.() -> Unit`	The primary action of this component. `SwipeToRevealScope.PrimaryActionButton` should be used to create a button for this slot. If `undoPrimaryAction` is provided, the undo button will be displayed after `SwipeToReveal` has animated to the revealed state and the primary action button has been hidden.
`onSwipePrimaryAction: () -> Unit`	A callback which will be triggered when a full swipe is performed. It is expected that the same callback is given to `SwipeToRevealScope.PrimaryActionButton`s onClick action. If `undoPrimaryAction` is provided, that will be displayed after the swipe gesture is completed.
`modifier: Modifier = Modifier`	`Modifier` to be applied on the composable.
`secondaryAction: (@Composable SwipeToRevealScope.() -> Unit)? = null`	Optional secondary action of this component. `SwipeToRevealScope.SecondaryActionButton` should be used to create a button for this slot. If `undoSecondaryAction` is provided, the undo button will be displayed after `SwipeToReveal` has animated to the revealed state and the secondary action button has been hidden.
`undoPrimaryAction: (@Composable SwipeToRevealScope.() -> Unit)? = null`	Optional undo action for the primary action of this component. `SwipeToRevealScope.UndoActionButton` should be used to create a button for this slot. Displayed after `SwipeToReveal` has animated to the revealed state and the primary action button has been hidden.
`undoSecondaryAction: (@Composable SwipeToRevealScope.() -> Unit)? = null`	Optional undo action for the secondary action of this component, displayed after `SwipeToReveal` has animated to the revealed state and the secondary action button has been hidden. `undoSecondaryAction` is ignored if the secondary action has not been specified. `SwipeToRevealScope.UndoActionButton` should be used to create a button for this slot.
`revealState: RevealState = rememberRevealState()`	`RevealState` of the `SwipeToReveal`.
`revealDirection: RevealDirection = RevealDirection.RightToLeft`	The direction from which `SwipeToReveal` can reveal the actions. It is strongly recommended to respect the default value of `RightToLeft` to avoid conflicting with the system-side swipe-to-dismiss gesture.
`hasPartiallyRevealedState: Boolean = true`	Determines whether the intermediate states `RightRevealing` and `LeftRevealing` are used. These indicate a settled state, where the primary action is partially revealed. By default, partially revealed state is allowed for single actions - set to false to make actions complete when swiped instead. This flag has no effect if a secondary action is provided (when there are two actions, the component always allows the partially revealed states).
`gestureInclusion: GestureInclusion = if (revealDirection == Bidirectional) { bidirectionalGestureInclusion } else { gestureInclusion(revealState) }`	Provides fine-grained control so that touch gestures can be excluded when they start in a certain region. An instance of `GestureInclusion` can be passed in here which will determine via `GestureInclusion.ignoreGestureStart` whether the gesture should proceed or not. By default, `gestureInclusion` allows gestures everywhere for when `revealState` contains anchors for both directions (see `bidirectionalGestureInclusion`). If it doesn't, then it allows gestures everywhere, except a zone on the left edge, which is used for swipe-to-dismiss (see `gestureInclusion`).
`content: @Composable () -> Unit`	The content that will be initially displayed over the other actions provided. Custom accessibility actions should always be added to the content using `Modifier.semantics` - examples are shown in the code samples.

See also
`SwipeToReveal`

SwitchButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun SwitchButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = SwitchButtonDefaults.switchButtonShape,
    colors: SwitchButtonColors = SwitchButtonDefaults.switchButtonColors(),
    contentPadding: PaddingValues = SwitchButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit
): Unit

The Wear Material SwitchButton offers three slots and a specific layout for an icon, a label, and a secondaryLabel. The icon and secondaryLabel are optional. The items are laid out in a row with the optional icon at the start and a column containing the two label slots in the middle.

The SwitchButton is Stadium shaped. The label should take no more than 3 lines of text. The secondary label should take no more than 2 lines of text. With localisation and/or large font sizes, the SwitchButton height adjusts to accommodate the contents. The label and secondary label are start aligned by default.

Example of a SwitchButton:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.SwitchButton
import androidx.wear.compose.material3.Text

var checked by remember { mutableStateOf(true) }
SwitchButton(
    label = { Text("Switch Button", maxLines = 3, overflow = TextOverflow.Ellipsis) },
    secondaryLabel = {
        Text("With secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
    },
    checked = checked,
    onCheckedChange = { checked = it },
    icon = { Icon(Icons.Filled.Favorite, contentDescription = "Favorite icon") },
    enabled = true,
)

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

The recommended set of SwitchButton colors can be obtained from SwitchButtonDefaults, e.g. SwitchButtonDefaults.switchButtonColors.

Parameters
`checked: Boolean`	Boolean flag indicating whether this button is currently checked.
`onCheckedChange: (Boolean) -> Unit`	Callback to be invoked when this buttons checked status is changed.
`modifier: Modifier = Modifier`	Modifier to be applied to the `SwitchButton`.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shape: Shape = SwitchButtonDefaults.switchButtonShape`	Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme.
`colors: SwitchButtonColors = SwitchButtonDefaults.switchButtonColors()`	`SwitchButtonColors` that will be used to resolve the background and content color for this button in different states.
`contentPadding: PaddingValues = SwitchButtonDefaults.ContentPadding`	The spacing values to apply internally between the container and the content.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button's "toggleable" tap area. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when button appears inside a container that needs to dynamically change its content separately from the background.
`icon: (@Composable BoxScope.() -> Unit)? = null`	An optional slot for providing an icon to indicate the purpose of the button. The contents are expected to be a horizontally and vertically center aligned icon of size 24.dp.
`secondaryLabel: (@Composable RowScope.() -> Unit)? = null`	A slot for providing the button's secondary label. The contents are expected to be text which is "start" aligned.
`label: @Composable RowScope.() -> Unit`	A slot for providing the button's main label. The contents are expected to be text which is "start" aligned and no more than 3 lines of text.

Text

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = LocalTextConfiguration.current.textAlign,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = LocalTextConfiguration.current.overflow,
    softWrap: Boolean = true,
    maxLines: Int = LocalTextConfiguration.current.maxLines,
    minLines: Int = 1,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
): Unit

High level element that displays text and provides semantics / accessibility information.

The default style uses the LocalTextStyle provided by the MaterialTheme / components. If you are setting your own style, you may want to consider first retrieving LocalTextStyle, and using TextStyle.copy to keep any theme defined attributes, only modifying the specific attributes you want to override.

For ease of use, commonly used parameters from TextStyle are also present here. The order of precedence is as follows:

If a parameter is explicitly set here (i.e, it is not null or TextUnit.Unspecified), then this parameter will always be used.
If a parameter is not set, (null or TextUnit.Unspecified), then the corresponding value from style will be used instead.

Additionally, for color, if color is not set, and style does not have a color, then LocalContentColor will be used.

Parameters
`text: String`	The text to be displayed.
`modifier: Modifier = Modifier`	`Modifier` to apply to this layout node.
`color: Color = Color.Unspecified`	`Color` to apply to the text. If `Color.Unspecified`, and `style` has no color set, this will be `LocalContentColor`.
`fontSize: TextUnit = TextUnit.Unspecified`	The size of glyphs to use when painting the text. See `TextStyle.fontSize`.
`fontStyle: FontStyle? = null`	The typeface variant to use when drawing the letters (e.g., italic). See `TextStyle.fontStyle`.
`fontWeight: FontWeight? = null`	The typeface thickness to use when painting the text (e.g., `FontWeight.Bold`).
`fontFamily: FontFamily? = null`	The font family to be used when rendering the text. See `TextStyle.fontFamily`.
`letterSpacing: TextUnit = TextUnit.Unspecified`	The amount of space to add between each letter. See `TextStyle.letterSpacing`.
`textDecoration: TextDecoration? = null`	The decorations to paint on the text (e.g., an underline). See `TextStyle.textDecoration`.
`textAlign: TextAlign? = LocalTextConfiguration.current.textAlign`	The alignment of the text within the lines of the paragraph. See `TextStyle.textAlign`.
`lineHeight: TextUnit = TextUnit.Unspecified`	Line height for the `Paragraph` in `TextUnit` unit, e.g. SP or EM. See `TextStyle.lineHeight`.
`overflow: TextOverflow = LocalTextConfiguration.current.overflow`	How visual overflow should be handled.
`softWrap: Boolean = true`	Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If `softWrap` is false, `overflow` and TextAlign may have unexpected effects.
`maxLines: Int = LocalTextConfiguration.current.maxLines`	An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to `overflow` and `softWrap`. If it is not null, then it must be greater than zero.
`minLines: Int = 1`	The minimum height in terms of minimum number of visible lines. It is required that 1 <= `minLines`<= `maxLines`.
`onTextLayout: (TextLayoutResult) -> Unit = {}`	Callback that is executed when a new text layout is calculated. A `TextLayoutResult` object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
`style: TextStyle = LocalTextStyle.current`	Style configuration for the text such as color, font, line height etc.

Text

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun Text(
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = LocalTextConfiguration.current.textAlign,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = LocalTextConfiguration.current.overflow,
    softWrap: Boolean = true,
    maxLines: Int = LocalTextConfiguration.current.maxLines,
    minLines: Int = 1,
    inlineContent: Map<String, InlineTextContent> = mapOf(),
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
): Unit

High level element that displays text and provides semantics / accessibility information.

For ease of use, commonly used parameters from TextStyle are also present here. The order of precedence is as follows:

If a parameter is explicitly set here (i.e, it is not null or TextUnit.Unspecified), then this parameter will always be used.
If a parameter is not set, (null or TextUnit.Unspecified), then the corresponding value from style will be used instead.

Additionally, for color, if color is not set, and style does not have a color, then LocalContentColor will be used.

Parameters
`text: AnnotatedString`	The text to be displayed, where `AnnotatedString` allows multiple styles to be used.
`modifier: Modifier = Modifier`	`Modifier` to apply to this layout node.
`color: Color = Color.Unspecified`	`Color` to apply to the text. If `Color.Unspecified`, and `style` has no color set, this will be `LocalContentColor`.
`fontSize: TextUnit = TextUnit.Unspecified`	The size of glyphs to use when painting the text. See `TextStyle.fontSize`.
`fontStyle: FontStyle? = null`	The typeface variant to use when drawing the letters (e.g., italic). See `TextStyle.fontStyle`.
`fontWeight: FontWeight? = null`	The typeface thickness to use when painting the text (e.g., `FontWeight.Bold`).
`fontFamily: FontFamily? = null`	The font family to be used when rendering the text. See `TextStyle.fontFamily`.
`letterSpacing: TextUnit = TextUnit.Unspecified`	The amount of space to add between each letter. See `TextStyle.letterSpacing`.
`textDecoration: TextDecoration? = null`	The decorations to paint on the text (e.g., an underline). See `TextStyle.textDecoration`.
`textAlign: TextAlign? = LocalTextConfiguration.current.textAlign`	The alignment of the text within the lines of the paragraph. See `TextStyle.textAlign`.
`lineHeight: TextUnit = TextUnit.Unspecified`	Line height for the `Paragraph` in `TextUnit` unit, e.g. SP or EM. See `TextStyle.lineHeight`.
`overflow: TextOverflow = LocalTextConfiguration.current.overflow`	How visual overflow should be handled.
`softWrap: Boolean = true`	Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If `softWrap` is false, `overflow` and TextAlign may have unexpected effects.
`maxLines: Int = LocalTextConfiguration.current.maxLines`	An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to `overflow` and `softWrap`. If it is not null, then it must be greater than zero.
`minLines: Int = 1`	The minimum height in terms of minimum number of visible lines. It is required that 1 <= `minLines`<= `maxLines`.
`inlineContent: Map<String, InlineTextContent> = mapOf()`	A map store composables that replaces certain ranges of the text. It's used to insert composables into text layout. Check `InlineTextContent` for more information.
`onTextLayout: (TextLayoutResult) -> Unit = {}`	Callback that is executed when a new text layout is calculated. A `TextLayoutResult` object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
`style: TextStyle = LocalTextStyle.current`	Style configuration for the text such as color, font, line height etc.

TextButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun TextButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shapes: TextButtonShapes = TextButtonDefaults.shapes(),
    colors: TextButtonColors = TextButtonDefaults.textButtonColors(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material TextButton is a circular, text-only button with transparent background and no border. It offers a single slot for text.

Set the size of the TextButton with Modifier.touchTargetAwareSize to ensure that the recommended minimum touch target size is available. The recommended TextButton sizes are TextButtonDefaults.DefaultButtonSize, TextButtonDefaults.LargeButtonSize and TextButtonDefaults.SmallButtonSize. The recommended text styles for each corresponding button size are TextButtonDefaults.defaultButtonTextStyle, TextButtonDefaults.largeButtonTextStyle and TextButtonDefaults.smallButtonTextStyle.

The default TextButton has no border and a transparent background for low emphasis actions. For actions that require high emphasis, set colors to TextButtonDefaults.filledTextButtonColors. For a medium-emphasis, outlined TextButton, set border to ButtonDefaults.outlinedButtonBorder. For a middle ground between outlined and filled, set colors to TextButtonDefaults.filledTonalTextButtonColors.

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

Example of a TextButton:

import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TextButton

TextButton(onClick = { /* Do something */ }) { Text(text = "ABC") }

Example of a large, filled tonal TextButton:

import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TextButton
import androidx.wear.compose.material3.TextButtonDefaults

TextButton(
    onClick = { /* Do something */ },
    colors = TextButtonDefaults.filledTonalTextButtonColors(),
    modifier = Modifier.size(TextButtonDefaults.LargeButtonSize),
) {
    Text(text = "ABC", style = TextButtonDefaults.largeButtonTextStyle)
}

Example of TextButton with onLongClick:

import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TextButton

TextButton(
    onClick = { /* Do something for onClick*/ },
    onLongClick = onLongClick,
    onLongClickLabel = "Long click",
) {
    Text(text = "ABC")
}

Example of an TextButton with shape animation of rounded corners on press:

import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TextButton
import androidx.wear.compose.material3.TextButtonDefaults

TextButton(onClick = { /* Do something */ }, shapes = TextButtonDefaults.animatedShapes()) {
    Text(text = "ABC")
}

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the button.
`modifier: Modifier = Modifier`	Modifier to be applied to the button.
`onLongClick: (() -> Unit)? = null`	Called when this button is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`enabled: Boolean = true`	Controls the enabled state of the button. When `false`, this button will not be clickable.
`shapes: TextButtonShapes = TextButtonDefaults.shapes()`	Defines the shape for this button. Defaults to a static shape based on `TextButtonDefaults.shape`, but animated versions are available through `TextButtonDefaults.animatedShapes`.
`colors: TextButtonColors = TextButtonDefaults.textButtonColors()`	`TextButtonColors` that will be used to resolve the background and content color for this button in different states.
`border: BorderStroke? = null`	Optional `BorderStroke` that will be used to resolve the text button border in different states. See `ButtonDefaults.outlinedButtonBorder`.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable BoxScope.() -> Unit`	The content displayed on the text button, expected to be text or image.

TextToggleButton

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun TextToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: TextToggleButtonColors = TextToggleButtonDefaults.colors(),
    interactionSource: MutableInteractionSource? = null,
    shapes: TextToggleButtonShapes = TextToggleButtonDefaults.shapes(),
    border: BorderStroke? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

Wear Material TextToggleButton is a filled text toggle button which switches between primary colors and tonal colors depending on checked value, and offers a single slot for text.

Set the size of the TextToggleButton with Modifier.touchTargetAwareSize to ensure that the background padding will correctly reach the edge of the minimum touch target. The recommended TextToggleButton sizes are TextToggleButtonDefaults.Size, TextToggleButtonDefaults.LargeSize and TextToggleButtonDefaults.ExtraLargeSize. The recommended text styles for each corresponding button size are TextToggleButtonDefaults.textStyle, TextToggleButtonDefaults.largeTextStyle and TextToggleButtonDefaults.extraLargeTextStyle.

TextToggleButton can be enabled or disabled. A disabled button will not respond to click events. When enabled, the checked and unchecked events are propagated by onCheckedChange.

A simple text toggle button using the default colors, animated when pressed.

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TextToggleButton
import androidx.wear.compose.material3.TextToggleButtonDefaults

var checked by remember { mutableStateOf(true) }
TextToggleButton(
    checked = checked,
    onCheckedChange = { checked = !checked },
    shapes = TextToggleButtonDefaults.animatedShapes(),
) {
    Text(text = if (checked) "On" else "Off")
}

A simple text toggle button using the default colors, animated when pressed and with different shapes for the checked and unchecked states.

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TextToggleButton
import androidx.wear.compose.material3.TextToggleButtonDefaults

var checked by remember { mutableStateOf(true) }
TextToggleButton(
    checked = checked,
    onCheckedChange = { checked = !checked },
    shapes = TextToggleButtonDefaults.variantAnimatedShapes(),
) {
    Text(text = if (checked) "On" else "Off")
}

Example of a large text toggle button:

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TextButtonDefaults
import androidx.wear.compose.material3.TextToggleButton
import androidx.wear.compose.material3.TextToggleButtonDefaults
import androidx.wear.compose.material3.touchTargetAwareSize

var checked by remember { mutableStateOf(true) }
TextToggleButton(
    checked = checked,
    onCheckedChange = { checked = !checked },
    modifier = Modifier.touchTargetAwareSize(TextButtonDefaults.LargeButtonSize),
) {
    Text(text = if (checked) "On" else "Off", style = TextToggleButtonDefaults.largeTextStyle)
}

Parameters
`checked: Boolean`	Boolean flag indicating whether this toggle button is currently checked.
`onCheckedChange: (Boolean) -> Unit`	Callback to be invoked when this toggle button is clicked.
`modifier: Modifier = Modifier`	Modifier to be applied to the toggle button.
`enabled: Boolean = true`	Controls the enabled state of the toggle button. When `false`, this toggle button will not be clickable.
`colors: TextToggleButtonColors = TextToggleButtonDefaults.colors()`	`TextToggleButtonColors` that will be used to resolve the container and content color for this toggle button.
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this toggle button. You can use this to change the toggle button's appearance or preview the toggle button in different states. Note that if `null` is provided, interactions will still happen internally.
`shapes: TextToggleButtonShapes = TextToggleButtonDefaults.shapes()`	Defines the shape for this toggle button. Defaults to a static shape based on `TextToggleButtonDefaults.shape`, but animated versions are available through `TextToggleButtonDefaults.animatedShapes` and `TextToggleButtonDefaults.variantAnimatedShapes`.
`border: BorderStroke? = null`	Optional `BorderStroke` for the `TextToggleButton`.
`content: @Composable BoxScope.() -> Unit`	The text to be drawn inside the toggle button.

TimePicker

Artifact: androidx.wear.compose:compose-material3

View Source

@RequiresApi(value = 26)
@Composable
fun TimePicker(
    initialTime: LocalTime,
    onTimePicked: (LocalTime) -> Unit,
    modifier: Modifier = Modifier,
    timePickerType: TimePickerType = TimePickerDefaults.timePickerType,
    colors: TimePickerColors = TimePickerDefaults.timePickerColors(),
    initialSelection: TimePickerSelection = TimePickerDefaults.timePickerSelection(timePickerType)
): Unit

A full screen TimePicker with configurable columns that allows users to select a time.

This component is designed to take most/all of the screen and utilizes large fonts.

Example of a TimePicker:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker

var showTimePicker by remember { mutableStateOf(true) }
var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
if (showTimePicker) {
    TimePicker(
        onTimePicked = {
            timePickerTime = it
            showTimePicker = false
        },
        initialTime = timePickerTime, // Initialize with last picked time on reopen
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        val formatter =
            DateTimeFormatter.ofLocalizedTime(FormatStyle.SHORT)
                .withLocale(LocalConfiguration.current.locales[0])

        Button(
            onClick = { showTimePicker = true },
            label = { Text("Selected Time") },
            secondaryLabel = { Text(timePickerTime.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}

Example of a TimePicker with seconds:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker
import androidx.wear.compose.material3.TimePickerType

var showTimePicker by remember { mutableStateOf(true) }
var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
if (showTimePicker) {
    TimePicker(
        onTimePicked = {
            timePickerTime = it
            showTimePicker = false
        },
        timePickerType = TimePickerType.HoursMinutesSeconds24H,
        initialTime = timePickerTime, // Initialize with last picked time on reopen
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        val formatter = DateTimeFormatter.ofPattern("HH:mm:ss")
        Button(
            onClick = { showTimePicker = true },
            label = { Text("Selected Time") },
            secondaryLabel = { Text(timePickerTime.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}

Example of a 12 hour clock TimePicker:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker
import androidx.wear.compose.material3.TimePickerType

var showTimePicker by remember { mutableStateOf(true) }
var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
if (showTimePicker) {
    TimePicker(
        onTimePicked = {
            timePickerTime = it
            showTimePicker = false
        },
        timePickerType = TimePickerType.HoursMinutesAmPm12H,
        initialTime = timePickerTime, // Initialize with last picked time on reopen
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        val formatter = DateTimeFormatter.ofPattern("hh:mm a")
        Button(
            onClick = { showTimePicker = true },
            label = { Text("Selected Time") },
            secondaryLabel = { Text(timePickerTime.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}

Example of a TimePicker with just minutes and seconds:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimePicker
import androidx.wear.compose.material3.TimePickerType

var showTimePicker by remember { mutableStateOf(true) }
var timePickerTime by remember { mutableStateOf(LocalTime.now()) }
if (showTimePicker) {
    TimePicker(
        onTimePicked = {
            timePickerTime = it
            showTimePicker = false
        },
        timePickerType = TimePickerType.MinutesSeconds,
        initialTime = timePickerTime, // Initialize with last picked time on reopen
    )
} else {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        val formatter = DateTimeFormatter.ofPattern("mm:ss")
        Button(
            onClick = { showTimePicker = true },
            label = { Text("Selected Time") },
            secondaryLabel = { Text(timePickerTime.format(formatter)) },
            icon = { Icon(imageVector = Icons.Filled.Edit, contentDescription = "Edit") },
        )
    }
}

Parameters
`initialTime: LocalTime`	The initial time to be displayed in the TimePicker.
`onTimePicked: (LocalTime) -> Unit`	The callback that is called when the user confirms the time selection. It provides the selected time as `LocalTime`. Note that any time components not displayed in the picker (e.g. the hour for `TimePickerType.MinutesSeconds`, or the second for `TimePickerType.HoursMinutes24H`) will have a default value of 0 in the returned `LocalTime`.
`modifier: Modifier = Modifier`	Modifier to be applied to the `Box` containing the UI elements.
`timePickerType: TimePickerType = TimePickerDefaults.timePickerType`	The different `TimePickerType` supported by this time picker. It indicates whether to show seconds or AM/PM selector as well as hours and minutes.
`colors: TimePickerColors = TimePickerDefaults.timePickerColors()`	`TimePickerColors` be applied to the TimePicker.
`initialSelection: TimePickerSelection = TimePickerDefaults.timePickerSelection(timePickerType)`	The initial time component to be selected when the `TimePicker` is first displayed. By default, this is the first available time component based on the `timePickerType` and the device's locale (e.g., the hour component for a `TimePickerType.HoursMinutes24H` picker). If a `TimePickerSelection` is provided that is not applicable to the current `timePickerType` (such as providing `TimePickerSelection.Second` for a picker that does not display seconds), the selection will fall back to the first available time component.

TimeText

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun TimeText(
    modifier: Modifier = Modifier,
    curvedModifier: CurvedModifier = CurvedModifier,
    maxSweepAngle: Float = TimeTextDefaults.MaxSweepAngle,
    backgroundColor: Color = TimeTextDefaults.backgroundColor(),
    timeSource: TimeSource = TimeTextDefaults.rememberTimeSource(timeFormat()),
    contentPadding: PaddingValues = TimeTextDefaults.ContentPadding,
    content: CurvedScope.(String) -> Unit = { time -> timeTextCurvedText(time) }
): Unit

Layout to show the current time and a label, they will be drawn in a curve, following the top edge of the screen.

Note that Wear Material UX guidance recommends that time text should not be larger than TimeTextDefaults.MaxSweepAngle of the screen edge, which is enforced by default. It is recommended that additional content, if any, is limited to short status messages before the time using the MaterialTheme.colorScheme.primary color.

For more information, see the Curved Text guide.

A simple TimeText which shows the current time:

import androidx.wear.compose.material3.TimeText

// TimeText displays the current time by default.
TimeText()

A TimeText with a short app status message shown:

import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.TimeText
import androidx.wear.compose.material3.TimeTextDefaults
import androidx.wear.compose.material3.timeTextCurvedText
import androidx.wear.compose.material3.timeTextSeparator

val style = TimeTextDefaults.timeTextStyle()
val primaryStyle =
    TimeTextDefaults.timeTextStyle(color = MaterialTheme.colorScheme.primaryContainer)
TimeText { time ->
    timeTextCurvedText("ETA 12:48", style = primaryStyle)
    timeTextSeparator(style)
    timeTextCurvedText(time)
}

A TimeText with a long status message, that needs ellipsizing:

import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.foundation.CurvedModifier
import androidx.wear.compose.foundation.weight
import androidx.wear.compose.material3.TimeText
import androidx.wear.compose.material3.TimeTextDefaults
import androidx.wear.compose.material3.curvedText
import androidx.wear.compose.material3.timeTextCurvedText
import androidx.wear.compose.material3.timeTextSeparator

val style = TimeTextDefaults.timeTextStyle()
TimeText { time ->
    curvedText(
        "Long status that should be ellipsized.",
        CurvedModifier.weight(1f),
        overflow = TextOverflow.Ellipsis,
    )
    timeTextSeparator(style)
    timeTextCurvedText(time)
}

Parameters
`modifier: Modifier = Modifier`	The modifier to be applied to the component.
`curvedModifier: CurvedModifier = CurvedModifier`	The `CurvedModifier` used to restrict the arc in which `TimeText` is drawn.
`maxSweepAngle: Float = TimeTextDefaults.MaxSweepAngle`	The default maximum sweep angle in degrees.
`backgroundColor: Color = TimeTextDefaults.backgroundColor()`	The background color of the arc drawn behind the `TimeText`.
`timeSource: TimeSource = TimeTextDefaults.rememberTimeSource(timeFormat())`	`TimeSource` which retrieves the current time and formats it.
`contentPadding: PaddingValues = TimeTextDefaults.ContentPadding`	The spacing values between the container and the content.
`content: CurvedScope.(String) -> Unit = { time -> timeTextCurvedText(time) }`	The content of the `TimeText` - displays the current time by default. This lambda receives the current time as a String and should display it using curvedText. Note that if long curved text is included here, it should specify CurvedModifier.weight on it so that the space available is suitably allocated.

TitleCard

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun TitleCard(
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    time: (@Composable () -> Unit)? = null,
    subtitle: (@Composable ColumnScope.() -> Unit)? = null,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    transformation: SurfaceTransformation? = null,
    content: (@Composable () -> Unit)? = null
): Unit

Opinionated Wear Material 3 Card that offers a specific layout to show interactive information about an application, e.g. a message. TitleCards are designed for use within an application.

This TitleCard does not handle input events - see the other TitleCard overloads if you want a clickable TitleCard.

The time, subtitle and content fields are optional, but it is expected that at least one of these is provided. The layout will vary according to which fields are supplied - see samples.

If the content is text it can be single or multiple line and is expected to be Top and Start aligned. When subtitle is used content shouldn't exceed 2 lines height. Overall the title, content and subtitle text should be no more than 5 rows of text combined.

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 a non-clickable TitleCard with time, title and content:

import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TitleCard

TitleCard(title = { Text("Title card") }, time = { Text("Now") }) {
    Text("Non clickable Card content")
}

For more information, see the Cards guide.

Parameters
`title: @Composable RowScope.() -> Unit`	A slot for displaying the title of the card, expected to be one or two lines of text.
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`time: (@Composable () -> Unit)? = null`	An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of text. Depending on whether we have a `content` or not, can be placed at the end of the `title` line or above it.
`subtitle: (@Composable ColumnScope.() -> Unit)? = null`	An optional slot for displaying the subtitle of the card, expected to be one line of text.
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.cardColors()`	`CardColors` that will be used to resolve the colors used for this card. See `CardDefaults.cardColors`.
`border: BorderStroke? = null`	A BorderStroke object which is used for drawing outlines.
`contentPadding: PaddingValues = CardDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`content: (@Composable () -> Unit)? = null`	The optional body content of the card. If not provided then title and subtitle are expected to be provided

TitleCard

Artifact: androidx.wear.compose:compose-material3

View Source

@Composable
fun TitleCard(
    containerPainter: Painter,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    time: (@Composable () -> Unit)? = null,
    subtitle: (@Composable ColumnScope.() -> Unit)? = null,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardWithContainerPainterColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.CardWithContainerPainterContentPadding,
    transformation: SurfaceTransformation? = null,
    content: (@Composable () -> Unit)? = null
): Unit

This TitleCard overload supports an image container background and provides an opinionated Wear Material 3 Card with a specific layout to show interactive information about an application, similar to TitleCard.

This TitleCard does not handle input events - see the other TitleCard overloads if you want a clickable TitleCard.

An image background is a means to reinforce the meaning of information in a Card. Cards should have a content color that contrasts with the background image and scrim. This TitleCard takes containerPainter for the container image background to be drawn (the CardColors containerColor property is ignored). It is recommended to use CardDefaults.containerPainter to create the painter so that a scrim is drawn on top of the container image, ensuring that any content above the background is legible.

The time, subtitle and content fields are optional, but it is expected that at least one of these is provided. The layout will vary according to which fields are supplied - see samples.

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 a Card with a background image:

import androidx.compose.foundation.background
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TitleCard

TitleCard(
    containerPainter =
        CardDefaults.containerPainter(image = painterResource(id = R.drawable.backgroundimage)),
    title = { Text("Card title") },
    subtitle = { Text("Subtitle") },
    time = { Text("Now") },
    contentPadding = CardDefaults.CardWithContainerPainterContentPadding,
    modifier = Modifier.semantics { contentDescription = "Background image" },
) {
    Text("Card content")
}

For more information, see the Cards guide.

Parameters
`containerPainter: Painter`	The `Painter` to use to draw the container image of the `TitleCard`, such as returned by `CardDefaults.containerPainter`.
`title: @Composable RowScope.() -> Unit`	A slot for displaying the title of the card, expected to be one or two lines of text.
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`time: (@Composable () -> Unit)? = null`	An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of text. Depending on whether we have a `content` or not, can be placed at the end of the `title` line or above it.
`subtitle: (@Composable ColumnScope.() -> Unit)? = null`	An optional slot for displaying the subtitle of the card, expected to be one line of text.
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.cardWithContainerPainterColors()`	`CardColors` that will be used to resolve the colors used for this card (the containerColor is overridden by containerPainter). See `CardDefaults.cardWithContainerPainterColors`.
`border: BorderStroke? = null`	A BorderStroke object which is used for drawing outlines.
`contentPadding: PaddingValues = CardDefaults.CardWithContainerPainterContentPadding`	The spacing values to apply internally between the container and the content
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`content: (@Composable () -> Unit)? = null`	The optional body content of the card. If not provided then title and subtitle are expected to be provided

TitleCard

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun TitleCard(
    onClick: () -> Unit,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    time: (@Composable () -> Unit)? = null,
    subtitle: (@Composable ColumnScope.() -> Unit)? = null,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: (@Composable () -> Unit)? = null
): Unit

Opinionated Wear Material 3 Card that offers a specific layout to show interactive information about an application, e.g. a message. TitleCards are designed for use within an application.

The time, subtitle and content fields are optional, but it is expected that at least one of these is provided. The layout will vary according to which fields are supplied - see samples.

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 a TitleCard with onClick, time, title and content:

import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TitleCard

TitleCard(
    onClick = { /* Do something */ },
    title = { Text("Title card") },
    time = { Text("Now") },
) {
    Text("Card content")
}

Example of a TitleCard with time, title and subtitle:

import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TitleCard

TitleCard(
    onClick = { /* Do something */ },
    time = { Text("Now") },
    title = { Text("Title card") },
    subtitle = { Text("Subtitle") },
)

Example of a TitleCard with images content:

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
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.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TitleCard

TitleCard(
    onClick = { /* Do something */ },
    title = { Text("Title card") },
    time = { Text("Now") },
    modifier = Modifier.semantics { contentDescription = "Background image" },
) {
    Spacer(Modifier.height(4.dp))
    Row(modifier = Modifier.fillMaxWidth()) {
        Image(
            modifier =
                Modifier.weight(2f)
                    .height(68.dp)
                    .align(Alignment.CenterVertically)
                    .clip(RoundedCornerShape(16.dp)),
            painter = painterResource(id = R.drawable.card_content_image),
            contentScale = ContentScale.Crop,
            contentDescription = null,
        )
        Spacer(Modifier.width(4.dp))
        Image(
            modifier =
                Modifier.weight(1f)
                    .height(68.dp)
                    .align(Alignment.CenterVertically)
                    .clip(RoundedCornerShape(16.dp)),
            painter = painterResource(id = R.drawable.card_content_image),
            contentScale = ContentScale.Crop,
            contentDescription = null,
        )
    }
}

Example of an outlined TitleCard:

import androidx.compose.ui.graphics.Color
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TitleCard

TitleCard(
    onClick = { /* Do something */ },
    title = { Text("Title card") },
    time = { Text("Now") },
    colors = CardDefaults.outlinedCardColors(),
    border = CardDefaults.outlinedCardBorder(),
) {
    Text("Card content")
}

For more information, see the Cards guide.

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the card
`title: @Composable RowScope.() -> Unit`	A slot for displaying the title of the card, expected to be one or two lines of text.
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`onLongClick: (() -> Unit)? = null`	Called when this card is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`time: (@Composable () -> Unit)? = null`	An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of text. Depending on whether we have a `content` or not, can be placed at the end of the `title` line or above it.
`subtitle: (@Composable ColumnScope.() -> Unit)? = null`	An optional slot for displaying the subtitle of the card, expected to be one line of text.
`enabled: Boolean = true`	Controls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable.
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.cardColors()`	`CardColors` that will be used to resolve the colors used for this card in different states. See `CardDefaults.cardColors`.
`border: BorderStroke? = null`	A BorderStroke object which is used for drawing outlines.
`contentPadding: PaddingValues = CardDefaults.ContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`content: (@Composable () -> Unit)? = null`	The optional body content of the card. If not provided then title and subtitle are expected to be provided

TitleCard

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun TitleCard(
    onClick: () -> Unit,
    containerPainter: Painter,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    time: (@Composable () -> Unit)? = null,
    subtitle: (@Composable ColumnScope.() -> Unit)? = null,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardWithContainerPainterColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.CardWithContainerPainterContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    content: (@Composable () -> Unit)? = null
): Unit

The time, subtitle and content fields are optional, but it is expected that at least one of these is provided. The layout will vary according to which fields are supplied - see samples.

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 a Card with a background image:

import androidx.compose.foundation.background
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TitleCard

TitleCard(
    onClick = { /* Do something */ },
    containerPainter =
        CardDefaults.containerPainter(image = painterResource(id = R.drawable.backgroundimage)),
    title = { Text("Card title") },
    subtitle = { Text("Subtitle") },
    time = { Text("Now") },
    contentPadding = CardDefaults.CardWithContainerPainterContentPadding,
    modifier = Modifier.semantics { contentDescription = "Background image" },
) {
    Text("Card content")
}

For more information, see the Cards guide.

Parameters
`onClick: () -> Unit`	Will be called when the user clicks the card
`containerPainter: Painter`	The `Painter` to use to draw the container image of the `TitleCard`, such as returned by `CardDefaults.containerPainter`.
`title: @Composable RowScope.() -> Unit`	A slot for displaying the title of the card, expected to be one or two lines of text.
`modifier: Modifier = Modifier`	Modifier to be applied to the card
`onLongClick: (() -> Unit)? = null`	Called when this card is long clicked (long-pressed). When this callback is set, `onLongClickLabel` should be set as well.
`onLongClickLabel: String? = null`	Semantic / accessibility label for the `onLongClick` action.
`time: (@Composable () -> Unit)? = null`	An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of text. Depending on whether we have a `content` or not, can be placed at the end of the `title` line or above it.
`subtitle: (@Composable ColumnScope.() -> Unit)? = null`	An optional slot for displaying the subtitle of the card, expected to be one line of text.
`enabled: Boolean = true`	Controls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable.
`shape: Shape = CardDefaults.shape`	Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
`colors: CardColors = CardDefaults.cardWithContainerPainterColors()`	`CardColors` that will be used to resolve the colors used for this card in different states (the containerColor is overridden by containerPainter). See `CardDefaults.cardWithContainerPainterColors`.
`border: BorderStroke? = null`	A BorderStroke object which is used for drawing outlines.
`contentPadding: PaddingValues = CardDefaults.CardWithContainerPainterContentPadding`	The spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally.
`transformation: SurfaceTransformation? = null`	Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background.
`content: (@Composable () -> Unit)? = null`	The optional body content of the card. If not provided then title and subtitle are expected to be provided

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun VerticalPageIndicator(
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    selectedColor: Color = PageIndicatorDefaults.selectedColor,
    unselectedColor: Color = PageIndicatorDefaults.unselectedColor,
    backgroundColor: Color = PageIndicatorDefaults.backgroundColor
): Unit

Vertical page indicator for use with VerticalPager, representing the currently active page and the approximate number of pages. Pages are indicated as a Circle shape. The indicator shows up to six pages individually - if there are more than six pages, VerticalPageIndicator shows a smaller indicator to the top and/or bottom to indicate that more pages are available.

To comply with Wear Material Design guidelines, this composable should be aligned to the center end of the screen using Alignment.CenterEnd, such as by setting modifier = Modifier.align(Alignment.CenterEnd). This way, the VerticalPageIndicator will appear on the right in Ltr orientation and on the left in Rtl orientation. If VerticalPageIndicator is used through VerticalPagerScaffold, then alignment is implicitly set by VerticalPagerScaffold.

Example usage with VerticalPager:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPageIndicator
import androidx.wear.compose.material3.VerticalPagerScaffold

val pageCount = 9
val pagerState = rememberPagerState { pageCount }

Box {
    VerticalPagerScaffold(
        pagerState = pagerState,
        pageIndicator = { VerticalPageIndicator(pagerState = pagerState) },
    ) {
        VerticalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(state = pagerState),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Page #$page")
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(text = "Swipe up and down")
                }
            }
        }
    }
}

Parameters
`pagerState: PagerState`	State of the `VerticalPager` used to control this indicator
`modifier: Modifier = Modifier`	Modifier to be applied to the `VerticalPageIndicator`
`selectedColor: Color = PageIndicatorDefaults.selectedColor`	The color which will be used for a selected indicator item.
`unselectedColor: Color = PageIndicatorDefaults.unselectedColor`	The color which will be used for an unselected indicator item.
`backgroundColor: Color = PageIndicatorDefaults.backgroundColor`	The color which will be used for an indicator background.

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun VerticalPagerScaffold(
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    pageIndicator: (@Composable BoxScope.() -> Unit)? = { VerticalPageIndicator(pagerState) },
    pageIndicatorAnimationSpec: AnimationSpec<Float>? = null,
    content: @Composable () -> Unit
): Unit

VerticalPagerScaffold is one of the Wear Material3 scaffold components.

The scaffold components AppScaffold and VerticalPagerScaffold lay out the structure of a Pager and coordinate transitions of the VerticalPageIndicator and TimeText components.

VerticalPagerScaffold displays the VerticalPageIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and VerticalPageIndicator according to whether the Pager is being paged, this is determined by the PagerState.

VerticalPagerScaffold supports rotary input by default. Rotary input allows users to scroll through the pager's content - by using a crown or a rotating bezel on their Wear OS device. It can be modified or turned off using the rotaryScrollableBehavior parameter.

Example of using AppScaffold and VerticalPagerScaffold with default snap sensitivity, for screens with many pages:

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.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPagerScaffold

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    VerticalPagerScaffold(pagerState = pagerState) {
        VerticalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(state = pagerState),
            rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(pagerState),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe up and down")
                    }
                }
            }
        }
    }
}

Example of using AppScaffold and VerticalPagerScaffold with PagerSensitivity.Low and RotarySnapSensitivity.Default, for screens where gross motor control is limited:

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.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.foundation.rotary.RotarySnapSensitivity
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.PagerSensitivity
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPagerScaffold

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 6 })

    VerticalPagerScaffold(pagerState = pagerState) {
        VerticalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(
                    state = pagerState,
                    sensitivity = PagerSensitivity.Low,
                ),
            rotaryScrollableBehavior =
                RotaryScrollableDefaults.snapBehavior(
                    pagerState = pagerState,
                    snapSensitivity = RotarySnapSensitivity.Default,
                ),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe up and down")
                    }
                }
            }
        }
    }
}

Parameters
`pagerState: PagerState`	The state of the pager controlling the page content.
`modifier: Modifier = Modifier`	The modifier to be applied to the scaffold.
`pageIndicator: (@Composable BoxScope.() -> Unit)? = { VerticalPageIndicator(pagerState) }`	A composable function that defines the page indicator to be displayed. By default, it uses a `VerticalPageIndicator`.
`pageIndicatorAnimationSpec: AnimationSpec<Float>? = null`	An optional parameter to set whether the page indicator should fade out when paging has finished. This is useful for when the underlying page content conflicts with the page indicator. By default this is null, so the page indicator will be visible at all times, setting this to `PagerScaffoldDefaults.FadeOutAnimationSpec` ensures the indicator only shows during paging, and fades out when the Pager is idle.
`content: @Composable () -> Unit`	A composable function where a VerticalPager can be added.

contentColorFor

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun contentColorFor(backgroundColor: Color): Color

The Material color system contains pairs of colors that are typically used for the background and content color inside a component. For example, a Button typically uses primary for its background, and onPrimary for the color of its content (usually text or iconography).

This function tries to match the provided backgroundColor to a 'background' color in this ColorScheme, and then will return the corresponding color used for content. For example, when backgroundColor is ColorScheme.primary, this will return ColorScheme.onPrimary.

If backgroundColor does not match a background color in the theme, this will return the current value of LocalContentColor as a best-effort color.

Returns
`Color`	the matching content color for `backgroundColor`. If `backgroundColor` is not present in the theme's `ColorScheme`, then returns the current value of `LocalContentColor`.

See also
`contentColorFor`

dynamicColorScheme

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

fun dynamicColorScheme(context: Context): ColorScheme?

Creates a dynamic color scheme.

Use this function to create a color scheme based on the current watchface. If the user changes the watchface colors, this color scheme will change accordingly. This function checks whether the dynamic color scheme can be used and returns null otherwise. It is expected that callers will check the return value and fallback to their own default color scheme if it is null.

Parameters
`context: Context`	The context required to get system resource data.

rememberAnimatedTextFontRegistry

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
@RequiresApi(value = 31)
fun rememberAnimatedTextFontRegistry(
    startFontVariationSettings: FontVariation.Settings,
    endFontVariationSettings: FontVariation.Settings,
    textStyle: TextStyle = LocalTextStyle.current,
    startFontSize: TextUnit = textStyle.fontSize,
    endFontSize: TextUnit = textStyle.fontSize
): AnimatedTextFontRegistry

Generates an AnimatedTextFontRegistry to use within composition.

Start and end of the animation is when the animatable is at 0f and 1f, respectively. This API supports overshooting, so a generated font can be extrapolated outside startFontVariationSettings and endFontVariationSettings range, developers need to make sure the given font supports possible font variation settings throughout the animation.

Parameters
`startFontVariationSettings: FontVariation.Settings`	Font variation settings at the start of the animation
`endFontVariationSettings: FontVariation.Settings`	Font variation settings at the end of the animation
`textStyle: TextStyle = LocalTextStyle.current`	Text style to be used for the animation
`startFontSize: TextUnit = textStyle.fontSize`	Font size at the start of the animation
`endFontSize: TextUnit = textStyle.fontSize`	Font size at the end of the animation

rememberPickerState

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun rememberPickerState(
    initialNumberOfOptions: @IntRange(from = 1) Int,
    initiallySelectedIndex: @IntRange(from = 0) Int = 0,
    shouldRepeatOptions: Boolean = true
): PickerState

Creates a PickerState that is remembered across compositions.

Parameters
`initialNumberOfOptions: @IntRange(from = 1) Int`	the number of options.
`initiallySelectedIndex: @IntRange(from = 0) Int = 0`	the index of the option to show in the center at the start, zero-based.
`shouldRepeatOptions: Boolean = true`	if true (the default), the options will be repeated.

rememberPlaceholderState

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun rememberPlaceholderState(isVisible: Boolean): PlaceholderState

Creates a PlaceholderState that is remembered across compositions.

A PlaceholderState should be created for each component that has placeholder data, such as a Card or a Button. The state is used to coordinate all of the different placeholder effects and animations.

Placeholder has a number of different effects designed to work together. Modifier.placeholderShimmer does a shimmer animation over the whole component that includes the placeholders. There should only be one placeholderShimmer for each component. Modifier.placeholder draws a placeholder shape on top of content that is waiting to load. There can be multiple placeholders in a component. For example, one for the title of an AppCard, another for the app name, and so on.

Once all of the components content is loaded, isVisible is false the shimmer will stop and a wipe off animation will remove the placeholders to reveal the content.

Parameters
`isVisible: Boolean`	the initial state of the placeholder.

rememberRevealState

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun rememberRevealState(initialValue: RevealValue = Covered): RevealState

Create and remember a RevealState.

Parameters
`initialValue: RevealValue = Covered`	The initial value of the `RevealValue`.

ripple

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

fun ripple(
    bounded: Boolean = true,
    radius: Dp = Dp.Unspecified,
    color: Color = Color.Unspecified
): IndicationNodeFactory

Creates a Ripple using the provided values and values inferred from the theme.

A Ripple is a Material implementation of Indication that expresses different Interactions by drawing ripple animations and state layers.

A Ripple responds to PressInteraction.Press by starting a new ripple animation, and responds to other Interactions by showing a fixed state layer with varying alpha values depending on the Interaction.

MaterialTheme provides Ripples using androidx.compose.foundation.LocalIndication, so a Ripple will be used as the default Indication inside components such as androidx.compose.foundation.clickable and androidx.compose.foundation.indication, in addition to Material provided components that use a Ripple as well.

You can also explicitly create a Ripple and provide it to custom components in order to change the parameters from the default, such as to create an unbounded ripple with a fixed size.

To create a Ripple with a manually defined color that can change over time, see the other ripple overload with a ColorProducer parameter. This will avoid unnecessary recompositions when changing the color, and preserve existing ripple state when the color changes.

Parameters
`bounded: Boolean = true`	If true, ripples are clipped by the bounds of the target layout. Unbounded ripples always animate from the target layout center, bounded ripples animate from the touch position.
`radius: Dp = Dp.Unspecified`	the radius for the ripple. If `Dp.Unspecified` is provided then the size will be calculated based on the target layout size.
`color: Color = Color.Unspecified`	the color of the ripple. This color is usually the same color used by the text or iconography in the component. This color will then have alpha applied to calculate the final color used to draw the ripple. If `Color.Unspecified` is provided the color used will be `LocalContentColor` instead.

ripple

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

fun ripple(
    color: ColorProducer,
    bounded: Boolean = true,
    radius: Dp = Dp.Unspecified
): IndicationNodeFactory

Creates a Ripple using the provided values and values inferred from the theme.

A Ripple is a Material implementation of Indication that expresses different Interactions by drawing ripple animations and state layers.

You can also explicitly create a Ripple and provide it to custom components in order to change the parameters from the default, such as to create an unbounded ripple with a fixed size.

To create a Ripple with a static color, see the ripple overload with a Color parameter. This overload is optimized for Ripples that have dynamic colors that change over time, to reduce unnecessary recompositions.

Parameters
`color: ColorProducer`	the color of the ripple. This color is usually the same color used by the text or iconography in the component. This color will then have alpha applied to calculate the final color used to draw the ripple. If you are creating this `ColorProducer` outside of composition (where it will be automatically remembered), make sure that its instance is stable (such as by remembering the object that holds it), or remember the returned `ripple` object to make sure that ripple nodes are not being created each recomposition.
`bounded: Boolean = true`	If true, ripples are clipped by the bounds of the target layout. Unbounded ripples always animate from the target layout center, bounded ripples animate from the touch position.
`radius: Dp = Dp.Unspecified`	the radius for the ripple. If `Dp.Unspecified` is provided then the size will be calculated based on the target layout size.

Extension functions

SurfaceTransformation

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

fun TransformingLazyColumnItemScope.SurfaceTransformation(
    spec: TransformationSpec
): SurfaceTransformation

Exposes androidx.wear.compose.material3.lazy.TransformationSpec as SurfaceTransformation to be used with Material components.

Parameters
`spec: TransformationSpec`	`TransformationSpec` to be used.

confirmationDialogCurvedText

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

fun CurvedScope.confirmationDialogCurvedText(
    text: String,
    style: CurvedTextStyle
): Unit

A customized variation of androidx.wear.compose.material3.curvedText that displays text along a curved path. This variation adopts suitable sweep angle and padding for use in ConfirmationDialogs.

Parameters
`text: String`	The text to display.
`style: CurvedTextStyle`	It is recommended to use `ConfirmationDialogDefaults.curvedTextStyle` for curved text in Confirmation Dialogs.

contentColorFor

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

fun ColorScheme.contentColorFor(backgroundColor: Color): Color

If backgroundColor does not match a background color in the theme, this will return Color.Unspecified.

Returns
`Color`	the matching content color for `backgroundColor`. If `backgroundColor` is not present in the theme's `ColorScheme`, then returns `Color.Unspecified`.

See also
`contentColorFor`

curvedText

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

fun CurvedScope.curvedText(
    text: String,
    modifier: CurvedModifier = CurvedModifier,
    maxSweepAngle: Float = CurvedTextDefaults.ScrollableContentMaxSweepAngle,
    background: Color = Color.Unspecified,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontFamily: FontFamily? = null,
    fontWeight: FontWeight? = null,
    fontStyle: FontStyle? = null,
    fontSynthesis: FontSynthesis? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    letterSpacingCounterClockwise: TextUnit = TextUnit.Unspecified,
    style: CurvedTextStyle? = null,
    angularDirection: CurvedDirection.Angular? = null,
    overflow: TextOverflow = TextOverflow.Clip
): Unit

CurvedText is a component allowing developers to easily write curved text following the curvature a circle (usually at the edge of a circular screen). CurvedText can be only created within the CurvedLayout to ensure the best experience, like being able to specify to positioning.

Note that Wear Material UX guidance recommends that curvedText should not exceed the sweep angle CurvedTextDefaults.ScrollableContentMaxSweepAngle on screens with scrollable content such as lists. This limit is enforced by default. For screens without scrollable content, CurvedTextDefaults.StaticContentMaxSweepAngle may be used instead.

The default style uses the LocalTextStyle provided by the MaterialTheme / components, converting it to a CurvedTextStyle. Note that not all parameters are used by curvedText.

If you are setting your own style, you may want to consider first retrieving LocalTextStyle, and using TextStyle.copy to keep any theme defined attributes, only modifying the specific attributes you want to override, then convert to CurvedTextStyle

For ease of use, commonly used parameters from CurvedTextStyle are also present here. The order of precedence is as follows:

If a parameter is explicitly set here (i.e, it is not null or TextUnit.Unspecified), then this parameter will always be used.
If a parameter is not set, (null or TextUnit.Unspecified), then the corresponding value from style will be used instead.

Additionally, for color, if color is not set, and style does not have a color, then LocalContentColor will be used.

For samples using curved text in a CurvedLayout see:

import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.StrokeCap.Companion.Round
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.CurvedLayout
import androidx.wear.compose.foundation.CurvedModifier
import androidx.wear.compose.foundation.angularSizeDp
import androidx.wear.compose.foundation.background
import androidx.wear.compose.foundation.curvedBox
import androidx.wear.compose.foundation.curvedRow
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.curvedText

val backgroundColor = MaterialTheme.colorScheme.onPrimary
val customColor = MaterialTheme.colorScheme.tertiaryDim
CurvedLayout {
    curvedRow(CurvedModifier.background(backgroundColor, Round)) {
        curvedText("Calling", color = customColor)
        curvedBox(CurvedModifier.angularSizeDp(5.dp)) {}
        curvedText("Camilia Garcia")
    }
}

import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Warning
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.StrokeCap.Companion.Round
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.foundation.CurvedDirection
import androidx.wear.compose.foundation.CurvedLayout
import androidx.wear.compose.foundation.CurvedModifier
import androidx.wear.compose.foundation.background
import androidx.wear.compose.foundation.curvedComposable
import androidx.wear.compose.foundation.curvedRow
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.CurvedTextDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.curvedText

val backgroundColor = MaterialTheme.colorScheme.onPrimary
CurvedLayout(anchor = 90f, angularDirection = CurvedDirection.Angular.Reversed) {
    curvedRow(CurvedModifier.background(backgroundColor, Round)) {
        curvedComposable {
            Icon(
                Icons.Filled.Warning,
                contentDescription = "Warning",
                modifier = Modifier.size(ButtonDefaults.IconSize),
            )
        }
        curvedText(
            "Network lost",
            maxSweepAngle = CurvedTextDefaults.StaticContentMaxSweepAngle,
            overflow = TextOverflow.Ellipsis,
        )
    }
}

For more information, see the Curved Text guide.

Parameters
`text: String`	The text to display
`modifier: CurvedModifier = CurvedModifier`	The `CurvedModifier` to apply to this curved text.
`maxSweepAngle: Float = CurvedTextDefaults.ScrollableContentMaxSweepAngle`	The default maximum sweep angle in degrees. For screens without scrollable content, `CurvedTextDefaults.StaticContentMaxSweepAngle` may be used instead.
`background: Color = Color.Unspecified`	The background color for the text.
`color: Color = Color.Unspecified`	`Color` to apply to the text. If `Color.Unspecified`, and `style` has no color set, this will be `LocalContentColor`.
`fontSize: TextUnit = TextUnit.Unspecified`	The size of glyphs to use when painting the text. See `TextStyle.fontSize`.
`fontFamily: FontFamily? = null`	The font family to be used when rendering the text.
`fontWeight: FontWeight? = null`	The thickness of the glyphs, in a range of 1, 1000. see `FontWeight`
`fontStyle: FontStyle? = null`	The typeface variant to use when drawing the letters (e.g. italic).
`fontSynthesis: FontSynthesis? = null`	Whether to synthesize font weight and/or style when the requested weight or style cannot be found in the provided font family.
`letterSpacing: TextUnit = TextUnit.Unspecified`	The amount of space (in em or sp) to add between each letter, when text is going clockwise.
`letterSpacingCounterClockwise: TextUnit = TextUnit.Unspecified`	The amount of space (in em or sp) to add between each letter, when text is going counterClockwise. Note that this usually needs to be bigger than `letterSpacing` to account for the fact that going clockwise, text fans out from the baseline while going counter clockwise text fans in.
`style: CurvedTextStyle? = null`	Specifies the style to use.
`angularDirection: CurvedDirection.Angular? = null`	Specify if the text is laid out clockwise or anti-clockwise, and if those needs to be reversed in a Rtl layout. If not specified, it will be inherited from the enclosing `curvedRow` or `CurvedLayout` See `CurvedDirection.Angular`.
`overflow: TextOverflow = TextOverflow.Clip`	How visual overflow should be handled. Note that this takes into account only explicit size curved modifiers in this element, to size this element matching the parent's, add a CurvedModifier.weight here.

drawCircularProgressIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

fun DrawScope.drawCircularProgressIndicator(
    progress: Float,
    colors: ProgressIndicatorColors,
    strokeWidth: Dp,
    enabled: Boolean = true,
    allowProgressOverflow: Boolean = false,
    startAngle: Float = CircularProgressIndicatorDefaults.StartAngle,
    endAngle: Float = startAngle,
    gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)
): Unit

Draw a simple non-animating circular progress indicator. Prefer to use CircularProgressIndicator directly instead of this method in order to access the recommended animations, but this method can be used when custom animations are required.

Example of a circular progress indicator with custom progress animation:

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.CircularProgressIndicator
import androidx.wear.compose.material3.CircularProgressIndicatorDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.ProgressIndicatorDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.drawCircularProgressIndicator

val progress = remember { mutableFloatStateOf(0f) }
val animatedProgress = remember { Animatable(0f) }
val colors =
    ProgressIndicatorDefaults.colors(indicatorColor = Color.Green, trackColor = Color.White)

LaunchedEffect(Unit) {
    snapshotFlow(progress::value).collectLatest {
        animatedProgress.animateTo(it, tween(durationMillis = 1024, easing = LinearEasing))
    }
}

Box(
    modifier =
        Modifier.background(MaterialTheme.colorScheme.background)
            .padding(CircularProgressIndicatorDefaults.FullScreenPadding)
            .fillMaxSize()
) {
    Button(
        modifier = Modifier.align(Alignment.Center).padding(12.dp),
        onClick = { progress.floatValue = if (progress.floatValue == 0f) 1f else 0f },
        label = { Text("Animate") },
    )

    // Draw the circular progress indicator with custom animation
    Spacer(
        Modifier.fillMaxSize().focusable().drawBehind {
            drawCircularProgressIndicator(
                progress = animatedProgress.value,
                strokeWidth = 10.dp,
                colors = colors,
                startAngle = 120f,
                endAngle = 60f,
            )
        }
    )
}

Parameters
`progress: Float`	The progress of this progress indicator where 0.0 represents no progress and 1.0 represents completion.
`colors: ProgressIndicatorColors`	`ProgressIndicatorColors` that will be used to resolve the indicator and track color for this progress indicator in different states.
`strokeWidth: Dp`	The stroke width for the progress indicator. The recommended values are `CircularProgressIndicatorDefaults.largeStrokeWidth` and `CircularProgressIndicatorDefaults.smallStrokeWidth`.
`enabled: Boolean = true`	controls the enabled state. Although this component is not clickable, it can be contained within a clickable component. When enabled is `false`, this component will appear visually disabled.
`allowProgressOverflow: Boolean = false`	When progress overflow is allowed, values smaller than 0.0 will be coerced to 0, while values larger than 1.0 will be wrapped around and shown as overflow with a different track color `ProgressIndicatorColors.overflowTrackBrush`. For example values 1.2, 2.2 etc will be shown as 20% progress with the overflow color. When progress overflow is not allowed, progress values will be coerced into the range 0..1.
`startAngle: Float = CircularProgressIndicatorDefaults.StartAngle`	The starting position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. Default is 270 degrees `CircularProgressIndicatorDefaults.StartAngle` (top of the screen).
`endAngle: Float = startAngle`	The ending position of the progress arc, measured clockwise in degrees (0 to 360) from the 3 o'clock position. For example, 0 and 360 represent 3 o'clock, 90 and 180 represent 6 o'clock and 9 o'clock respectively. By default equal to `startAngle`.
`gapSize: Dp = CircularProgressIndicatorDefaults.calculateRecommendedGapSize(strokeWidth)`	The size (in Dp) of the gap between the ends of the progress indicator and the track. The stroke endcaps are not included in this distance.

minimumInteractiveComponentSize

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

fun Modifier.minimumInteractiveComponentSize(): Modifier

Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller.

https://m3.material.io/foundations/accessible-design/accessibility-basics#28032e45-c598-450c-b355-f9fe737b1cd8

This uses the Material recommended minimum size of 48.dp x 48.dp, which may not the same as the system enforced minimum size.

This modifier is not needed for touch target expansion to happen. It only affects layout, to make sure there is adequate space for touch target expansion.

openOnPhoneDialogCurvedText

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

fun CurvedScope.openOnPhoneDialogCurvedText(
    text: String,
    style: CurvedTextStyle
): Unit

A customized variation of androidx.wear.compose.material3.curvedText that displays text along a curved path. This variation adopts suitable sweep angle and padding for use in OpenOnPhoneDialog.

Parameters
`text: String`	The text to display.
`style: CurvedTextStyle`	The style to apply to the text. It is recommended to use `OpenOnPhoneDialogDefaults.curvedTextStyle` for curved text in `OpenOnPhoneDialog`.

placeholder

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun Modifier.placeholder(
    placeholderState: PlaceholderState,
    shape: Shape = PlaceholderDefaults.shape,
    color: Color = PlaceholderDefaults.color
): Modifier

Modifier.placeholder draws a skeleton shape over a component, for situations when no provisional content (such as cached data) is available. The placeholder skeleton can be displayed instead, while the content is loading. The reveal of the content will be animated when it becomes available (and hidden again if the content becomes unavailable), unless the ReducedMotion setting is enabled, in which case those are instantaneous. NOTE: For animations to work, an AppScaffold should be used.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.placeholder
import androidx.wear.compose.material3.placeholderShimmer
import androidx.wear.compose.material3.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
var imageVector: ImageVector? by remember { mutableStateOf(null) }
val buttonPlaceholderState =
    rememberPlaceholderState(isVisible = labelText.isEmpty() || imageVector == null)

FilledTonalButton(
    onClick = { /* Do something */ },
    enabled = true,
    modifier = Modifier.fillMaxWidth().placeholderShimmer(buttonPlaceholderState),
    label = {
        Text(
            text = labelText,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.fillMaxWidth().placeholder(buttonPlaceholderState),
        )
    },
    icon = {
        Box(
            modifier =
                Modifier.size(ButtonDefaults.IconSize).placeholder(buttonPlaceholderState)
        ) {
            if (imageVector != null) {
                Icon(
                    imageVector = imageVector!!,
                    contentDescription = "Heart",
                    modifier =
                        Modifier.wrapContentSize(align = Alignment.Center)
                            .size(ButtonDefaults.IconSize)
                            .fillMaxSize(),
                )
            }
        }
    },
)
// Simulate content loading completing in stages
LaunchedEffect(Unit) {
    delay(2000)
    imageVector = Icons.Filled.Favorite
    delay(1000)
    labelText = "A label"
}

If there is some cached data for this field, it may be better to show that while loading, see

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.placeholder
import androidx.wear.compose.material3.placeholderShimmer
import androidx.wear.compose.material3.rememberPlaceholderState

var labelText by remember { mutableStateOf("Cached Data") }
var imageVector: ImageVector? by remember { mutableStateOf(null) }
val buttonPlaceholderState =
    rememberPlaceholderState(isVisible = labelText.isEmpty() || imageVector == null)

// Put placeholderShimmer in the container and placeholder in the elements of the content that
// have no cached data.
FilledTonalButton(
    onClick = { /* Do something */ },
    enabled = true,
    modifier = Modifier.fillMaxWidth().placeholderShimmer(buttonPlaceholderState),
    label = {
        Text(
            text = labelText,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.fillMaxWidth(),
        )
    },
    icon = {
        Box(
            modifier =
                Modifier.size(ButtonDefaults.IconSize).placeholder(buttonPlaceholderState)
        ) {
            if (imageVector != null) {
                Icon(
                    imageVector = imageVector!!,
                    contentDescription = "Heart",
                    modifier =
                        Modifier.wrapContentSize(align = Alignment.Center)
                            .size(ButtonDefaults.IconSize)
                            .fillMaxSize(),
                )
            }
        }
    },
)
// Simulate content loading completing in stages
LaunchedEffect(Unit) {
    delay(2000)
    imageVector = Icons.Filled.Favorite
    delay(1000)
    labelText = "A label"
}

Note that the component should still be sized close to the target, so the final reveal of the content is less disruptive.

Parameters
`placeholderState: PlaceholderState`	the state used to coordinate several placeholder effects.
`shape: Shape = PlaceholderDefaults.shape`	the shape of the placeholder.
`color: Color = PlaceholderDefaults.color`	the color to use in the placeholder.

placeholderShimmer

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

@Composable
fun Modifier.placeholderShimmer(
    placeholderState: PlaceholderState,
    shape: Shape = PlaceholderDefaults.shape,
    color: Color = PlaceholderDefaults.shimmerColor
): Modifier

Modifier.placeholderShimmer draws a periodic shimmer over content, indicating to the user that contents are loading or potentially out of date. The placeholder shimmer is a 45 degree gradient from Top|Left of the screen to Bottom|Right. The shimmer is coordinated via the animation frame clock which orchestrates the shimmer so that every component will shimmer as the gradient progresses across the screen. NOTE: For animations to work, an AppScaffold should be used.

Example of a Button with icon and a label that put placeholders over individual content slots and then draws a placeholder shimmer over the result:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.placeholder
import androidx.wear.compose.material3.placeholderShimmer
import androidx.wear.compose.material3.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
var imageVector: ImageVector? by remember { mutableStateOf(null) }
val buttonPlaceholderState =
    rememberPlaceholderState(isVisible = labelText.isEmpty() || imageVector == null)

FilledTonalButton(
    onClick = { /* Do something */ },
    enabled = true,
    modifier = Modifier.fillMaxWidth().placeholderShimmer(buttonPlaceholderState),
    label = {
        Text(
            text = labelText,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.fillMaxWidth().placeholder(buttonPlaceholderState),
        )
    },
    icon = {
        Box(
            modifier =
                Modifier.size(ButtonDefaults.IconSize).placeholder(buttonPlaceholderState)
        ) {
            if (imageVector != null) {
                Icon(
                    imageVector = imageVector!!,
                    contentDescription = "Heart",
                    modifier =
                        Modifier.wrapContentSize(align = Alignment.Center)
                            .size(ButtonDefaults.IconSize)
                            .fillMaxSize(),
                )
            }
        }
    },
)
// Simulate content loading completing in stages
LaunchedEffect(Unit) {
    delay(2000)
    imageVector = Icons.Filled.Favorite
    delay(1000)
    labelText = "A label"
}

Example of a simple text placeholder:

import androidx.compose.foundation.layout.width
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.placeholder
import androidx.wear.compose.material3.placeholderShimmer
import androidx.wear.compose.material3.rememberPlaceholderState

var labelText by remember { mutableStateOf("") }
val placeholderState = rememberPlaceholderState(isVisible = labelText.isEmpty())

Text(
    text = labelText,
    overflow = TextOverflow.Ellipsis,
    textAlign = TextAlign.Center,
    modifier =
        Modifier.width(90.dp).placeholderShimmer(placeholderState).placeholder(placeholderState),
)

// Simulate content loading
LaunchedEffect(Unit) {
    delay(3000)
    labelText = "A label"
}

Parameters
`placeholderState: PlaceholderState`	the current placeholder state that determine whether the placeholder shimmer should be shown.
`shape: Shape = PlaceholderDefaults.shape`	the shape of the component.
`color: Color = PlaceholderDefaults.shimmerColor`	the color to use in the shimmer.

rangeSemantics

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

fun Modifier.rangeSemantics(
    value: Float,
    enabled: Boolean,
    onValueChange: (Float) -> Unit,
    valueRange: ClosedFloatingPointRange<Float>,
    steps: Int
): Modifier

Modifier to add semantics signifying progress of the Stepper/Slider.

Parameters
`value: Float`	Current value of the ProgressIndicator/Slider. If outside of `valueRange` provided, value will be coerced to this range. Must not be NaN.
`enabled: Boolean`	If false then semantics will not be added.
`onValueChange: (Float) -> Unit`	Lambda which updates `value`.
`valueRange: ClosedFloatingPointRange<Float>`	Range of values that value can take. Passed `value` will be coerced to this range.
`steps: Int`	If greater than 0, specifies the amounts of discrete values, evenly distributed between across the whole value range. If 0, any value from the range specified is allowed. Must not be negative.

scrollAway

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

fun Modifier.scrollAway(
    scrollInfoProvider: ScrollInfoProvider,
    screenStage: () -> ScreenStage
): Modifier

Scroll an item vertically in/out of view based on scroll state provided by a scrolling list. Typically used to scroll a TimeText item out of view as the user starts to scroll a vertically scrollable list of items upwards and bring additional items into view.

Example of using ScrollAway directly (in practice, it is recommended to use AppScaffold and ScreenScaffold to provide the correct scroll away behavior by default):

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.ScrollInfoProvider
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.FilledTonalButton
import androidx.wear.compose.material3.ListHeader
import androidx.wear.compose.material3.ScreenStage
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TimeText
import androidx.wear.compose.material3.curvedText
import androidx.wear.compose.material3.scrollAway
import androidx.wear.compose.material3.timeTextSeparator

val state = rememberScalingLazyListState()

Box(modifier = Modifier.fillMaxSize()) {
    ScalingLazyColumn(state = state, modifier = Modifier.fillMaxSize()) {
        item {
            ListHeader {
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    text = "ScalingLazyColumn",
                    textAlign = TextAlign.Center,
                )
            }
        }
        items(50) {
            FilledTonalButton(
                modifier = Modifier.fillMaxWidth().padding(horizontal = 36.dp),
                onClick = {},
                label = { Text("Item ${it + 1}") },
            )
        }
    }
    TimeText(
        // In practice, it is recommended to use the [AppScaffold] and [ScreenScaffold],
        // so that the Material3 scroll away behavior is provided by default, rather than using
        // [Modifier.scrollAway] directly.
        modifier =
            Modifier.scrollAway(
                scrollInfoProvider = ScrollInfoProvider(state),
                screenStage = {
                    if (state.isScrollInProgress) ScreenStage.Scrolling else ScreenStage.Idle
                },
            ),
        content = { time ->
            curvedText("ScrollAway")
            timeTextSeparator()
            curvedText(time)
        },
    )
}

Parameters
`scrollInfoProvider: ScrollInfoProvider`	Used as the basis for the scroll-away implementation, based on the state of the scrollable container. See `ScrollInfoProvider` methods for creating a ScrollInfoProvider from common lists such as `ScalingLazyListState`.
`screenStage: () -> ScreenStage`	Function that returns the screen stage of the active screen. Scrolled away items are shown when the screen is new, then scrolled away or hidden when scrolling, and finally shown again when idle.

timeTextCurvedText

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

fun CurvedScope.timeTextCurvedText(time: String, style: CurvedTextStyle? = null): Unit

Default curved text to use in a TimeText, for displaying the time

Parameters
`time: String`	The time to display.
`style: CurvedTextStyle? = null`	A `CurvedTextStyle` to override the style used.

timeTextSeparator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

fun CurvedScope.timeTextSeparator(
    curvedTextStyle: CurvedTextStyle? = null,
    contentArcPadding: ArcPaddingValues = ArcPaddingValues(angular = 4.dp)
): Unit

A default implementation of Separator, to be shown between any text/composable and the time.

Parameters
`curvedTextStyle: CurvedTextStyle? = null`	A `CurvedTextStyle` for the separator.
`contentArcPadding: ArcPaddingValues = ArcPaddingValues(angular = 4.dp)`	`ArcPaddingValues` for the separator text.

touchTargetAwareSize

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0-alpha06

fun Modifier.touchTargetAwareSize(size: Dp): Modifier

Modifier to set both the size and recommended touch target for IconButton and TextButton.

Top-level properties

LocalContentColor

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

val LocalContentColor: ProvidableCompositionLocal<Color>

CompositionLocal containing the preferred content color for a given position in the hierarchy. This typically represents the on color for a color in ColorScheme. For example, if the background color is ColorScheme.surfaceContainer, this color is typically set to ColorScheme.onSurface.

This color should be used for any typography / iconography, to ensure that the color of these adjusts when the background color changes. For example, on a dark background, text should be light, and on a light background, text should be dark.

Defaults to Color.White if no color has been explicitly set.

LocalTextConfiguration

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

val LocalTextConfiguration: ProvidableCompositionLocal<TextConfiguration>

CompositionLocal containing the preferred TextConfiguration that will be used by Text components by default consisting of text alignment, overflow specification and max lines. Material3 components related to text such as Button, CheckboxButton, SwitchButton, RadioButton use LocalTextConfiguration to set values with which to style child text components.

LocalTextStyle

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

val LocalTextStyle: ProvidableCompositionLocal<TextStyle>

CompositionLocal containing the preferred TextStyle that will be used by Text components by default. To set the value for this CompositionLocal, see ProvideTextStyle which will merge any missing TextStyle properties with the existing TextStyle set in this CompositionLocal.

See also
`ProvideTextStyle`