A slot for displaying the title of the dialog, expected to be one or two lines of text.

title

A slot for a [Button] indicating negative sentiment (e.g. No). Clicking the button must remove the dialog from the composition hierarchy.

negativeButton

A slot for a [Button] indicating positive sentiment (e.g. Yes). Clicking the button must remove the dialog from the composition hierarchy.

positiveButton

Modifier to be applied to the dialog content.

modifier

Optional slot for an icon to be shown at the top of the dialog.

icon

The scroll state for the dialog so that the scroll position can be displayed e.g. by the [PositionIndicator] passed to [Scaffold].

scrollState

[Color] representing the background color for the dialog.

backgroundColor

[Color] representing the color for [content].

contentColor

[Color] representing the color for [title].

titleColor

Icon [Color] that defaults to [contentColor], unless specifically overridden.

iconColor

The vertical arrangement of the dialog's children. This allows us to add spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size.

verticalArrangement

The padding to apply around the whole of the dialog's contents.

contentPadding

A slot for additional content, expected to be 2-3 lines of text

content

[Alert] lays out the content for an opinionated, alert screen.

Alert

Will be called when the user clicks the card

onClick

A slot for displaying the application name, expected to be a single line of start aligned text of [Typography.title3]

appName

A slot for displaying the time relevant to the contents of the card, expected to be a short piece of end aligned text.

time

A slot for displaying the title of the card, expected to be one or two lines of start aligned text of [Typography.button]

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.

enabled

A slot for a small ([CardDefaults.AppImageSize]x[CardDefaults.AppImageSize] ) [Image] associated with the application.

appImage

A painter used to paint the background of the card. A card will normally have a gradient background. Use [CardDefaults.cardBackgroundPainter()] to obtain an appropriate painter

backgroundPainter

The default color to use for content() slot unless explicitly set.

The default color to use for appName() and appImage() slots unless explicitly set.

appColor

The default color to use for time() slot unless explicitly set.

timeColor

The default color to use for title() slot unless explicitly set

AppCard

Will be called when the user clicks the button.

Controls the enabled state of the button. When `false`, this button will not be clickable.

[ButtonColors] that will be used to resolve the background and content color for this button in different states. See [ButtonDefaults.buttonColors].

colors

The [MutableInteractionSource] representing the stream of [Interaction]s for this Button. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this Button in different [Interaction]s.

interactionSource

The content displayed on the [Button] such as text, icon or image

Button

Boolean flag indicating whether this checkbox is currently checked.

checked

Modifier to be applied to the checkbox. This can be used to provide a content description for accessibility.

[CheckboxColors] from which the box and checkmark colors will be obtained.

Boolean flag indicating the enabled state of the [Checkbox] (affects the color).

Callback to be invoked when Checkbox is clicked. If null, then this is passive and relies entirely on a higher-level component to control the state (such as [ToggleChip] or [SplitToggleChip]).

onCheckedChange

When also providing [onCheckedChange], the [MutableInteractionSource] representing the stream of [Interaction]s for the "toggleable" tap area - can be used to customise the appearance / behavior of the Checkbox

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

Checkbox

A slot for providing the chip'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.

label

Will be called when the user clicks the chip

A slot for providing the chip'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.

secondaryLabel

A slot for providing the chip's icon. The contents are expected to be a horizontally and vertically aligned icon of size [ChipDefaults.IconSize] or [ChipDefaults.LargeIconSize]. In order to correctly render when the Chip is not enabled the icon must set its alpha value to [LocalContentAlpha].

[ChipColors] that will be used to resolve the background and content color for this chip in different states. See [ChipDefaults.chipColors]. Defaults to [ChipDefaults.primaryChipColors]

Controls the enabled state of the chip. When `false`, this chip will not be clickable

The [MutableInteractionSource] representing the stream of [Interaction]s for this Chip. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this Chip in different [Interaction]s.

The spacing values to apply internally between the container and the conten

Chip

Modifier to be applied to the CircularProgressIndicator

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

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 (top of the screen)

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]

endAngle

indicatorColor

The color of the background progress track.

trackColor

The stroke width for the progress indicator

strokeWidth

Material Design circular progress indicator

CircularProgressIndicator

Increases the transparent clickable area around the background, defaults to [ButtonDefaults.CompactButtonBackgroundPadding]

backgroundPadding

The content displayed on the [CompactButton] such as text, icon or image

CompactButton

A slot for providing the chip's main label. The contents are expected to be text which is "start" aligned if there is an icon preset and "center" aligned if not.

A slot for providing the chip's icon. The contents are expected to be a horizontally and vertically aligned icon of size [ChipDefaults.SmallIconSize] when used with a label or [ChipDefaults.IconSize] when used as the only content in the CompactChip. In order to correctly render when the Chip is not enabled the icon must set its alpha value to [LocalContentAlpha].

CompactChip

Event invoked when the dialog has been shown for [durationMillis].

onTimeout

An optional slot for displaying an icon or image.

The number of milliseconds for which the dialog is displayed, must be positive. Suggested values are [DialogDefaults.ShortDurationMillis], [DialogDefaults.LongDurationMillis] or [DialogDefaults.IndefiniteDurationMillis].

durationMillis

[Color] representing the background color for this dialog.

Icon [Color] that defaults to the [contentColor], unless specifically overridden.

A slot for the dialog title, expected to be one line of text

[Confirmation] lays out the content for an opinionated confirmation screen that displays a message to the user for [durationMillis].

Confirmation

Controls whether to display the [Dialog]. Set to true initially to trigger an 'intro' animation and display the [Dialog]. Subsequently, setting to false triggers an 'outro' animation, then [Dialog] calls [onDismissRequest] and hides itself.

showDialog

Executes when the user dismisses the dialog. Must remove the dialog from the composition.

onDismissRequest

The scroll state for the dialog so that the scroll position can be displayed.

Typically platform specific properties to further configure the dialog.

properties

Slot for dialog content such as [Alert] or [Confirmation]

[Dialog] displays a full-screen dialog, layered over any other content.

Dialog

The state object of a [HorizontalPageIndicator] to be used to observe the Pager's state.

pageIndicatorState

Modifier to be applied to the [HorizontalPageIndicator]

The style of [HorizontalPageIndicator] - may be linear or curved. By default determined by the screen shape.

indicatorStyle

The color of the selected [HorizontalPageIndicator] item

selectedColor

The color of unselected [HorizontalPageIndicator] items. Defaults to [selectedColor] with 30% alpha

unselectedColor

The size of each [HorizontalPageIndicator] item in [Dp]

indicatorSize

The spacing between indicator items in [Dp]

spacing

The shape of each [HorizontalPageIndicator] item. Defaults to [CircleShape

indicatorShape

A horizontal indicator for a Pager, representing the currently active page and total pages drawn using a [Shape].

HorizontalPageIndicator

imageVector

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

contentDescription

Tint to be applied to [imageVector]. If [Color.Unspecified] is provided, then no  tint is applie

tint

Icon component that draws [imageVector] using [tint], defaulting to [LocalContentColor].

Icon

Current value of the Slider. If outside of [valueRange] provided, value will be coerced to this range.

value

onValueChange

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

steps

A slot for an icon which is placed on the decrease (start) button

decreaseIcon

A slot for an icon which is placed on the increase (end) button

increaseIcon

Controls the enabled state of the slider. When `false`, this slider will not be clickable

Range of values that Slider value can take. Passed [value] will be coerced to this range

valueRange

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 8 [steps] as it might affect user experience. By default true if number of [steps] is <=8.

segmented

[InlineSliderColors] that will be used to resolve the background and content color for this slider in different state

[InlineSlider] allows users to make a selection from a range of values.

InlineSlider

The background color to apply - typically Color.Transparent

A slot based composable for creating a list header item.

ListHeader

A complete definition of the Wear Material Color theme for this hierarchy

A set of text styles to be used as this hierarchy's typography system

typography

A set of shapes to be used by the components in this hierarch

shapes

MaterialTheme

[ButtonColors] that will be used to resolve the background and content color for this button in different states. See [ButtonDefaults.outlinedButtonColors].

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.

shape

[ButtonBorder] that will be used to resolve the button border in different states. See [ButtonDefaults.outlinedButtonBorder].

border

The content displayed on the [OutlinedButton] such as text, icon or image

OutlinedButton

[ChipColors] that will be used to resolve the background and content color for this chip in different states.

The spacing values to apply internally between the container and the content

Defines the chip's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme

[ChipBorder] that will be used to resolve the chip border in different states

OutlinedChip

The content displayed on the [OutlinedCompactButton] such as text, icon or image

OutlinedCompactButton

[ChipColors] that will be used to resolve the background and content color for this chip in different states. See [ChipDefaults.outlinedChipColors]. Defaults to [ChipDefaults.primaryChipColors]

[ChipBorder] that will be used to resolve the border for this chip in different states. See [ChipDefaults.outlinedChipBorder]

OutlinedCompactChip

state

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.

readOnly

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

readOnlyLabel

The parameters to configure the scaling and transparency effects for the component. See [ScalingParams]

scalingParams

The amount of separation in [Dp] between items. Can be negative, which can be useful for Text if it has plenty of whitespace.

separation

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.

gradientRatio

Should be the color outside of the Picker, so there is continuity.

gradientColor

flingBehavior

A block which describes the content. Inside this block you can reference [PickerScope.selectedOption] and other properties in [PickerScope]. 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

option

Picker

We extracted all components found in the Wear Material library in one place. Explore all available and add them to your project.

Jetpack Compose Wear Material components

CircularProgressIndicator

Bring your next idea to life with Compose UI