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`.
`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`.
`RippleConfiguration`	Configuration for `ripple` appearance, provided using `LocalRippleConfiguration`.
`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`.
`CompactButtonDefaults`	Contains the default values used by `CompactButton`
`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`
`TextDefaults`	Contains the default values used by `Text`.
`TextToggleButtonDefaults`	Contains the default values used by `TextToggleButton`.
`TimePickerDefaults`	Contains the default values used by `TimePicker`
`TimeTextDefaults`	Contains the default values used by `TimeText`.

Composables

`AlertDialog`	Dialogs provide important prompts in a user flow.
`AlertDialogContent`	This `AlertDialogContent` overload provides the content for an `AlertDialog` without any dedicated slots for buttons.
`AnimatedPage`	Animates a page within a `androidx.compose.foundation.pager.Pager` with a scaling and scrim effect based on its position.
`AnimatedText`	A composable that displays an animated text.
`AppCard`	Opinionated Wear Material 3 `Card` that offers a specific 5 slot layout to show information about an application, e.g. a notification.
`AppScaffold`	`AppScaffold` is one of the Wear Material3 scaffold components.
`ArcProgressIndicator`	Indeterminate Material Design arc progress indicator.
`Button`	Base level Wear Material3 `Button` that offers a single slot to take any content.
`ButtonGroup`	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).
`Card`	Base level Wear Material 3 `Card` that offers a single slot to take any content.
`CheckboxButton`	The Wear Material `CheckboxButton` offers three slots and a specific layout for an icon, a label, and a secondaryLabel.
`ChildButton`	Base level Wear Material3 `ChildButton` that offers a single slot to take any content.
`CircularProgressIndicator`	Indeterminate Material Design circular progress indicator.
`CompactButton`	A Wear Material3 `CompactButton` that offers two slots and a specific layout for an icon and label.
`ConfirmationDialog`	Shows a transient `ConfirmationDialog` with an icon and optional very short `curvedText`.
`ConfirmationDialogContent`	This overload of `ConfirmationDialogContent` provides the content for a `ConfirmationDialog` with an icon and optional very short `curvedText`.
`DatePicker`	Full screen `DatePicker` with day, month, year.
`Dialog`	A base dialog component used by `AlertDialog` and `ConfirmationDialog` variations.
`EdgeButton`	Wear Material3 `EdgeButton` that offers a single slot to take any content.
`FadingExpandingLabel`	Animates label text for which the number of lines can vary, changing the size of the container component.
`FailureConfirmationDialog`	Shows a `FailureConfirmationDialog` with a failure icon and an optional short curved text.
`FailureConfirmationDialogContent`	`FailureConfirmationDialogContent` provides the content for a failure confirmation dialog with icon and an optional short curved text.
`FilledIconButton`	Wear Material `FilledIconButton` is a circular, icon-only button with a colored background and a contrasting content color.
`FilledTonalButton`	Base level Wear Material3 `FilledTonalButton` that offers a single slot to take any content.
`FilledTonalIconButton`	Wear Material `FilledTonalIconButton` is a circular, icon-only button with a muted, colored background and a contrasting icon color.
`HorizontalPageIndicator`	Horizontal page indicator for use with `HorizontalPager`, representing the currently active page and the approximate number of pages.
`HorizontalPagerScaffold`	`HorizontalPagerScaffold` is one of the Wear Material3 scaffold components.
`Icon`	Icon component that draws `bitmap` using `tint`, defaulting to `LocalContentColor`.
`IconButton`	Wear Material `IconButton` is a circular, icon-only button with transparent background and no border.
`IconToggleButton`	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.
`LevelIndicator`	Creates a `LevelIndicator` for screens that that control a setting such as volume with either rotating side button, rotating bezel.
`LinearProgressIndicator`	Material Design linear progress indicator.
`ListHeader`	A slot based composable for creating a list header item.
`ListSubHeader`	A two slot based composable for creating a list sub-header item.
`MaterialTheme`	MaterialTheme defines the styling principles from the Wear Material3 design specification which extends the Material design specification.
`OpenOnPhoneDialog`	A full-screen dialog that displays an animated icon with a curved text at the bottom.
`OpenOnPhoneDialogContent`	This composable provides the content for an `OpenOnPhoneDialog` that displays an animated icon with curved text at the bottom.
`OutlinedButton`	Base level Wear Material3 `OutlinedButton` that offers a single slot to take any content.
`OutlinedCard`	Outlined Wear Material 3 `Card` that offers a single slot to take any content.
`OutlinedIconButton`	Wear Material `OutlinedIconButton` is a circular, icon-only button with a transparent background, contrasting icon color and border.
`Picker`	A scrollable list of items to pick from.
`PickerGroup`	A group of `Picker`s to build components where multiple pickers are required to be combined together.
`ProvideTextStyle`	This function is used to set the current value of `LocalTextStyle`, merging the given style with the current style values for any missing attributes.
`RadioButton`	The Wear Material `RadioButton` offers slots and a specific layout for an icon, a label and a secondaryLabel.
`ScreenScaffold`	`ScreenScaffold` is one of the Wear Material3 scaffold components.
`ScrollIndicator`	A composable that displays a visual indicator of scrolling progress within a scrollable container.
`SegmentedCircularProgressIndicator`	Material Design segmented circular progress indicator.
`Slider`	`Slider` allows users to make a selection from a range of values.
`SplitCheckboxButton`	The Wear Material `SplitCheckboxButton` offers slots and a specific layout for a label and secondaryLabel.
`SplitRadioButton`	The Wear Material `SplitRadioButton` offers two slots and a specific layout for a label and secondaryLabel.
`SplitSwitchButton`	The Wear Material `SplitSwitchButton` offers slots and a specific layout for a label and secondary label.
`Stepper`	`Stepper` allows users to make a selection from a range of values.
`StepperLevelIndicator`	Creates a `StepperLevelIndicator` for screens that that control a setting, such as volume, with a `Stepper`.
`SuccessConfirmationDialog`	Shows a `SuccessConfirmationDialog` dialog with a success icon and optional short curved text.
`SuccessConfirmationDialogContent`	`SuccessConfirmationDialogContent` provides the content for a success confirmation dialog with a success icon and optional short curved text.
`SwipeToDismissBox`	Wear Material 3 `SwipeToDismissBox` that handles the swipe-to-dismiss gesture.
`SwipeToReveal`	`SwipeToReveal` Material composable.
`SwitchButton`	The Wear Material `SwitchButton` offers three slots and a specific layout for an icon, a label, and a secondaryLabel.
`Text`	High level element that displays text and provides semantics / accessibility information.
`TextButton`	Wear Material `TextButton` is a circular, text-only button with transparent background and no border.
`TextToggleButton`	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.
`TimePicker`	A full screen TimePicker with configurable columns that allows users to select a time.
`TimeText`	Layout to show the current time and a label, they will be drawn in a curve, following the top edge of the screen.
`TitleCard`	Opinionated Wear Material 3 `Card` that offers a specific layout to show interactive information about an application, e.g. a message.
`VerticalPageIndicator`	Vertical page indicator for use with `VerticalPager`, representing the currently active page and the approximate number of pages.
`VerticalPagerScaffold`	`VerticalPagerScaffold` is one of the Wear Material3 scaffold components.
`contentColorFor`	The Material color system contains pairs of colors that are typically used for the background and content color inside a component.
`placeholder`	Modifier.placeholder draws a skeleton shape over a component, for situations when no provisional content (such as cached data) is available.
`placeholderShimmer`	Modifier.placeholderShimmer draws a periodic shimmer over content, indicating to the user that contents are loading or potentially out of date.
`rememberAnimatedTextFontRegistry`	Generates an `AnimatedTextFontRegistry` to use within composition.
`rememberPickerState`	Creates a `PickerState` that is remembered across compositions.
`rememberPlaceholderState`	Creates a `PlaceholderState` that is remembered across compositions.
`rememberRevealState`	Create and `remember` a `RevealState`.

Modifiers

`minimumInteractiveComponentSize`	Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller.
`rangeSemantics`	Modifier to add semantics signifying progress of the Stepper/Slider.
`scrollAway`	Scroll an item vertically in/out of view based on scroll state provided by a scrolling list.
`touchTargetAwareSize`	Modifier to set both the size and recommended touch target for `IconButton` and TextButton.

Top-level functions summary

`ColorScheme?`	`dynamicColorScheme(context: Context)` Creates a dynamic color scheme.
`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.
`Unit`	`CurvedScope.openOnPhoneDialogCurvedText( text: String, style: CurvedTextStyle )` A customized variation of `androidx.wear.compose.material3.curvedText` that displays text along a curved path.
`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.

Top-level properties summary

`ProvidableCompositionLocal<Color>`	`LocalContentColor` CompositionLocal containing the preferred content color for a given position in the hierarchy.
`ProvidableCompositionLocal<RippleConfiguration?>`	`LocalRippleConfiguration` CompositionLocal used for providing `RippleConfiguration` down the tree.
`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

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.

ripple

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0

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

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

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

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

ColorScheme.contentColorFor

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0

fun ColorScheme.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 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`

CurvedScope.curvedText

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0

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.

DrawScope.drawCircularProgressIndicator

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0

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.

CurvedScope.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`.

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

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

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.

LocalRippleConfiguration

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.6.0

val LocalRippleConfiguration: ProvidableCompositionLocal<RippleConfiguration?>

CompositionLocal used for providing RippleConfiguration down the tree. This acts as a tree-local 'override' for ripples used inside components that you cannot directly control, such as to change the color of a specific component's ripple, or disable it entirely by providing null.

In most cases you should rely on the default theme behavior for consistency with other components

this exists as an escape hatch for individual components and is not intended to be used for full theme customization across an application. For this use case you should instead build your own custom ripple that queries your design system theme values directly using createRippleModifierNode.

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`