androidx.compose.material3

Build Jetpack Compose UIs with Material 3 Expressive, the latest evolution of Material Design. M3 Expressive includes research-backed updates to theming, components, motion, typography, and more — all designed to help you make engaging and desirable products that users love. M3 Expressive compliments the Android 16 visual style and system UI.

Material Expressive image

In this page, you'll find documentation for types, properties, and functions available in the androidx.compose.material3 package.

For more information, check out Material Design 3 in Compose.

Overview

Theming

APIs Description
Material Theming MaterialTheme M3 theme
Color scheme ColorScheme M3 color scheme
lightColorScheme M3 light color scheme
darkColorScheme M3 dark color scheme
Dynamic color dynamicLightColorScheme M3 dynamic light color scheme
dynamicDarkColorScheme M3 dynamic dark color scheme
Typography Typography M3 typography
Shape Shapes M3 shape

Components

APIs Description
Badge Badge M3 badge
BadgedBox M3 badged box
Bottom app bar BottomAppBar M3 bottom app bar
Bottom sheet BottomSheetScaffold M3 bottom sheet
ModalBottomSheet M3 modal bottom sheet
Buttons Button M3 filled button
ElevatedButton M3 elevated button
FilledTonalButton M3 filled tonal button
OutlinedButton M3 outlined button
TextButton M3 text button
Cards Card M3 filled card
ElevatedCard M3 elevated card
OutlinedCard M3 outlined card
Checkbox Checkbox M3 checkbox
TriStateCheckbox M3 indeterminate checkbox
Chips AssistChip M3 assist chip
ElevatedAssistChip M3 elevated assist chip
FilterChip M3 filter chip
ElevatedFilterChip M3 elevated filter chip
InputChip M3 input chip
SuggestionChip M3 suggestion chip
ElevatedSuggestionChip M3 elevated suggestion chip
Date Picker DatePicker M3 date picker
DatePickerDialog M3 date picker embeeded in dialog
DateRangePicker M3 date range picker
Dialogs AlertDialog M3 basic dialog
Dividers HorizontalDivider M3 horizontal divider
VerticalDivider M3 vertical divider
Extended FAB ExtendedFloatingActionButton M3 extended FAB
FAB FloatingActionButton M3 FAB
SmallFloatingActionButton M3 small FAB
LargeFloatingActionButton M3 large FAB
Icon button IconButton M3 standard icon button
IconToggleButton M3 standard icon toggle button
FilledIconButton M3 filled icon button
FilledIconToggleButton M3 filled icon toggle button
FilledTonalIconButton M3 filled tonal icon button
FilledTonalIconToggleButton M3 filled tonal icon toggle button
OutlinedIconButton M3 outlined icon button
OutlinedIconToggleButton M3 outlined icon toggle button
Lists ListItem M3 list item
Menus DropdownMenu M3 menu
DropdownMenuItem M3 menu item
ExposedDropdownMenuBox M3 exposed dropdown menu
Navigation bar NavigationBar M3 navigation bar
NavigationBarItem M3 navigation bar item
Navigation drawer ModalNavigationDrawer M3 modal navigation drawer
ModalDrawerSheet M3 modal drawer sheet
PermanentNavigationDrawer M3 permanent standard navigation drawer
PermanentDrawerSheet M3 permanent standard drawer sheet
DismissibleNavigationDrawer M3 dismissible standard navigation drawer
DismissibleDrawerSheet M3 dismissible standard drawer sheet
NavigationDrawerItem M3 navigation drawer item
Navigation rail NavigationRail M3 navigation rail
NavigationRailItem M3 navigation rail item
Progress indicators LinearProgressIndicator M3 linear progress indicator
CircularProgressIndicator M3 circular progress indicator
Radio button RadioButton M3 radio button
Search Bar SearchBar M3 search bar
DockedSearchBar M3 docked search bar
Segmented Button SegmentedButton M3 segmented button
SingleChoiceSegmentedButtonRow M3 single choice segmented button row
MultiChoiceSegmentedButtonRow M3 multiple choice segmented button row
Sliders Slider M3 slider
RangeSlider M3 range slider
Snackbars Snackbar M3 snackbar
Swipe to Dismiss SwipeToDismiss M3 swipe to dismiss
Switch Switch M3 switch
Tabs Tab M3 tab
LeadingIconTab M3 leading icon tab
TabRowDefaults.PrimaryIndicator M3 primary tab indicator
PrimaryTabRow M3 primary tab row
TabRowDefaults.SecondaryIndicator M3 secondary tab indicator
SecondaryTabRow M3 secondary tab row
TabRow M3 fixed tab row
ScrollableTabRow M3 scrollable tab row
Text fields TextField M3 filled text field
OutlinedTextField M3 outlined text field
Time Picker TimePicker M3 time picker
TimeInput M3 time input
Tool tip PlainTooltipBox M3 plain tool tip
RichTooltipBox M3 rich tool tip
Top app bar TopAppBar M3 small top app bar
CenterAlignedTopAppBar M3 center-aligned top app bar
MediumTopAppBar M3 medium top app bar
LargeTopAppBar M3 large top app bar

Surfaces and layout

APIs Description
Surfaces Surface M3 surface
Scaffold Scaffold M3 layout

Icons and text

APIs Description
Icon Icon M3 icon
Text Text M3 text

Also check out the androidx.compose.material.icons package.

Interfaces

AppBarColumnScope

DSL scope for building the content of an AppBarColumn.
Cmn
AppBarRowScope

DSL scope for building the content of an AppBarRow.
Cmn
AppBarScope

DSL scope for building the content of an AppBarRow and AppBarColumn.
Cmn
BasicAlertDialogOverride

Interface that allows libraries to override the behavior of the BasicAlertDialog component.
Cmn
BottomAppBarScrollBehavior

A BottomAppBarScrollBehavior defines how a bottom app bar should behave when the content under it is scrolled.
Cmn
BottomAppBarState

A state object that can be hoisted to control and observe the bottom app bar state.
Cmn
ButtonGroupScope

Button group scope used to indicate a Modifier.weight and Modifier.animateWidth of a child element.
Cmn
DatePickerFormatter

A date formatter interface used by DatePicker.
Cmn
DatePickerState

A state object that can be hoisted to observe the date picker state.
Cmn
DateRangePickerState

A state object that can be hoisted to observe the date range picker state.
Cmn
FloatingActionButtonMenuScope

Scope for the children of FloatingActionButtonMenu
Cmn
FloatingToolbarScrollBehavior

A FloatingToolbarScrollBehavior defines how a floating toolbar should behave when the content under it is scrolled.
Cmn
FloatingToolbarState

A state object that can be hoisted to control and observe the floating toolbar state.
Cmn
HorizontalFloatingToolbarOverride

Interface that allows libraries to override the behavior of the HorizontalFloatingToolbar component.
Cmn
HorizontalFloatingToolbarWithFabOverride

Interface that allows libraries to override the behavior of the HorizontalFloatingToolbar component that includes a Floating Action Button.
Cmn
ModalWideNavigationRailOverride

Interface that allows libraries to override the behavior of the ModalWideNavigationRail component.
Cmn
MotionScheme

A motion scheme provides all the FiniteAnimationSpecs for a MaterialTheme.
Cmn
MultiChoiceSegmentedButtonRowScope

Scope for the children of a MultiChoiceSegmentedButtonRow
Cmn
NavigationBarOverride

Interface that allows libraries to override the behavior of the NavigationBar component.
Cmn
NavigationDrawerItemColors

Represents the colors of the various elements of a drawer item.
Cmn
NavigationRailOverride

Interface that allows libraries to override the behavior of the NavigationRail component.
Cmn
SearchBarScrollBehavior

A SearchBarScrollBehavior defines how a search bar should behave when the content beneath it is scrolled.
Cmn
SelectableDates

An interface that controls the selectable dates and years in the date pickers UI.
Cmn
ShortNavigationBarOverride

Interface that allows libraries to override the behavior of the ShortNavigationBar component.
Cmn
SingleChoiceSegmentedButtonRowScope

Scope for the children of a SingleChoiceSegmentedButtonRow
Cmn
SingleRowTopAppBarOverride

Interface that allows libraries to override the behavior of single-row TopAppBar components.
Cmn
SnackbarData

Interface to represent the data of one particular Snackbar as a piece of the SnackbarHostState.
Cmn
SnackbarVisuals

Interface to represent the visuals of one particular Snackbar as a piece of the SnackbarData.
Cmn
TabIndicatorScope

Scope for the composable used to render a Tab indicator, this can be used for more complex indicators requiring layout information about the tabs like TabRowDefaults.PrimaryIndicator and TabRowDefaults.SecondaryIndicator
Cmn
TextFieldLabelScope

Scope for the label of a TextField or OutlinedTextField.
Cmn
TimePickerState

A state object that can be hoisted to observe the time picker state.
Cmn
ToggleFloatingActionButtonScope

Scope for the children of ToggleFloatingActionButton
Cmn
TooltipScope

Tooltip scope for TooltipBox to be used to obtain the LayoutCoordinates of the anchor content, and to draw a caret for the tooltip.
Cmn
TooltipState

The state that is associated with a TooltipBox.
Cmn
TopAppBarScrollBehavior

A TopAppBarScrollBehavior defines how an app bar should behave when the content under it is scrolled.
Cmn
TwoRowsTopAppBarOverride

Interface that allows libraries to override the behavior of two-row TopAppBar components.
Cmn
VerticalFloatingToolbarOverride

Interface that allows libraries to override the behavior of the VerticalFloatingToolbar component.
Cmn
VerticalFloatingToolbarWithFabOverride

Interface that allows libraries to override the behavior of the VerticalFloatingToolbar component.
Cmn
WideNavigationRailOverride

Interface that allows libraries to override the behavior of the WideNavigationRail component.
Cmn
WideNavigationRailState

A state object that can be hoisted to observe the wide navigation rail state.
Cmn

Classes

AppBarMenuState

State class for the overflow menu in AppBarRow and AppBarColumn.
Cmn
AppBarWithSearchColors

Represents the colors used by an AppBarWithSearch.
Cmn
BasicAlertDialogOverrideScope

Parameters available to BasicAlertDialog.
Cmn
BottomSheetScaffoldState

State of the BottomSheetScaffold composable.
Cmn
ButtonColors

Represents the container and content colors used in a button in different states.
Cmn
ButtonElevation

Represents the elevation for a button in different states.
Cmn
ButtonGroupMenuState

State class for the overflow menu in ButtonGroup.
Cmn
ButtonShapes

The shapes that will be used in buttons.
Cmn
CalendarLocale

Represents a Locale for the calendar.
Cmn
android
CardColors

Represents the container and content colors used in a card in different states.
Cmn
CardElevation

Represents the elevation for a card in different states.
Cmn
CheckboxColors

Represents the colors used by the three different sections (checkmark, box, and border) of a Checkbox or TriStateCheckbox in different states.
Cmn
ChipBorder

This class is deprecated. Maintained for binary compatibility.
Cmn
ChipColors

Represents the container and content colors used in a clickable chip in different states.
Cmn
ChipElevation

Represents the elevation used in a selectable chip in different states.
Cmn
ColorScheme

A color scheme holds all the named color parameters for a MaterialTheme.
Cmn
DatePickerColors

Represents the colors used by the date picker.
Cmn
DefaultTooltipCaretShape

Default Shape of the caret used by tooltips.
Cmn
DisplayMode

Represents the different modes that a date picker can be at.
Cmn
DragHandleColors

Specifies the colors that will be used in a drag handle in different states.
Cmn
DragHandleShapes

Specifies the shapes that will be used in a drag handle in different states.
Cmn
DragHandleSizes

Specifies the sizes that will be used in a drag handle in different states.
Cmn
DrawerState

State of the ModalNavigationDrawer and DismissibleNavigationDrawer composable.
Cmn
ExitAlwaysFloatingToolbarScrollBehavior

A FloatingToolbarScrollBehavior that adjusts its properties to affect the size of a floating toolbar.
Cmn
ExposedDropdownMenuAnchorType

The type of element that can serve as a dropdown menu anchor.
Cmn
ExposedDropdownMenuBoxScope

Scope for ExposedDropdownMenuBox.
Cmn
FabPosition

The possible positions for a FloatingActionButton attached to a Scaffold.
Cmn
FloatingActionButtonElevation

Represents the tonal and shadow elevation for a floating action button in different states.
Cmn
FloatingToolbarColors

Represents the container and content colors used in a the various floating toolbars.
Cmn
FloatingToolbarExitDirection

The possible directions for a HorizontalFloatingToolbar or VerticalFloatingToolbar, used to determine the exit direction when a FloatingToolbarScrollBehavior is attached.
Cmn
FloatingToolbarHorizontalFabPosition

The possible positions for a FloatingActionButton attached to a HorizontalFloatingToolbar
Cmn
FloatingToolbarVerticalFabPosition

The possible positions for a FloatingActionButton attached to a VerticalFloatingToolbar
Cmn
HorizontalFloatingToolbarOverrideScope

Parameters available to HorizontalFloatingToolbar.
Cmn
HorizontalFloatingToolbarWithFabOverrideScope

Parameters available to the HorizontalFloatingToolbar that includes a Floating Action Button.
Cmn
IconButtonColors

Represents the container and content colors used in an icon button in different states.
Cmn
IconButtonDefaults.IconButtonWidthOption

Class that describes the different supported widths of the IconButton.
Cmn
IconButtonShapes

The shapes that will be used in icon buttons.
Cmn
IconToggleButtonColors

Represents the container and content colors used in a toggleable icon button in different states.
Cmn
IconToggleButtonShapes

The shapes that will be used in toggle buttons.
Cmn
ListItemColors

Represents the colors of a list item in different states.
Cmn
ListItemElevation

Represents the elevation of a list item in different states.
Cmn
ListItemShapes

Represents the shapes of a list item in different states.
Cmn
MaterialShapes

Holds predefined Material Design shapes as RoundedPolygons that can be used at various components as they are, or as part of a Morph.
Cmn
MaterialTheme.Values

Material 3 contains different theme subsystems to allow visual customization across a UI hierarchy.
Cmn
MenuGroupShapes

Represents the shapes used for a DropdownMenuGroup.
Cmn
MenuItemColors

Represents the text and icon colors used in a menu item at different states.
Cmn
MenuItemShapes

Represents the shapes used for a DropdownMenuItem in its various states.
Cmn
ModalBottomSheetProperties

Properties used to customize the behavior of a ModalBottomSheet.
Cmn
android
ModalWideNavigationRailOverrideScope

Parameters available to ModalWideNavigationRail.
Cmn
ModalWideNavigationRailProperties

Properties used to customize the behavior of a ModalWideNavigationRail.
Cmn
android
NavigationBarItemColors

Represents the colors of the various elements of a navigation item.
Cmn
NavigationBarOverrideScope

Parameters available to NavigationBar.
Cmn
NavigationItemColors

Represents the colors of the various elements of a navigation item.
Cmn
NavigationItemIconPosition

Class that describes the different supported icon positions of the navigation item.
Cmn
NavigationRailItemColors

Represents the colors of the various elements of a navigation item.
Cmn
NavigationRailOverrideScope

Parameters available to NavigationRail.
Cmn
RadioButtonColors

Represents the color used by a RadioButton in different states.
Cmn
RangeSliderState

Class that holds information about RangeSlider's active range.
Cmn
RichTooltipColors
Cmn
RippleConfiguration

Configuration for ripple appearance, provided using LocalRippleConfiguration.
Cmn
SearchBarColors

Represents the colors used by a search bar.
Cmn
SearchBarState

The state of a search bar.
Cmn
SegmentedButtonColors

The different colors used in parts of the SegmentedButton in different states
Cmn
SelectableChipColors

Represents the container and content colors used in a selectable chip in different states.
Cmn
SelectableChipElevation

Represents the elevation used in a selectable chip in different states.
Cmn
Shapes

Material surfaces can be displayed in different shapes.
Cmn
SheetState

State of a sheet composable, such as ModalBottomSheet
Cmn
ShortNavigationBarArrangement

Class that describes the different supported item arrangements of the ShortNavigationBar.
Cmn
ShortNavigationBarOverrideScope

Parameters available to ShortNavigationBar.
Cmn
SingleRowTopAppBarOverrideScope

Parameters available to SingleRowTopAppBar.
Cmn
SliderColors

Represents the color used by a Slider in different states.
Cmn
SliderPositions

This class is deprecated. Not necessary with the introduction of Slider state
Cmn
SliderState

Class that holds information about Slider's active range.
Cmn
SnackbarHostState

State of the SnackbarHost, which controls the queue and the current Snackbar being shown inside the SnackbarHost.
Cmn
SplitButtonShapes

The shapes that will be used in SplitButtonLayout.
Cmn
SwipeToDismissBoxState

State of the SwipeToDismissBox composable.
Cmn
SwitchColors

Represents the colors used by a Switch in different states
Cmn
TabPosition

Data class that contains information about a tab's position on screen, used for calculating where to place the indicator that shows which tab is selected.
Cmn
TextFieldColors

Represents the colors of the input text, container, and content (including label, placeholder, leading and trailing icons) used in a text field in different states.
Cmn
TextFieldLabelPosition

The position of the label with respect to the text field.
Cmn
TextFieldLabelPosition.Above

The label is positioned above and outside the text field container.
Cmn
TextFieldLabelPosition.Attached

The default label position according to the Material specification.
Cmn
TimePickerColors

Represents the colors used by a TimePicker in different states
Cmn
TimePickerDisplayMode

Represents the display mode for the content of a TimePickerDialog.
Cmn
TimePickerLayoutType

Represents the different configurations for the layout of the Time Picker
Cmn
TimePickerSelectionMode

The selection mode for the time picker
Cmn
ToggleButtonColors

Represents the container and content colors used in a toggle button in different states.
Cmn
ToggleButtonShapes

The shapes that will be used in toggle buttons.
Cmn
TooltipAnchorPosition
Cmn
TopAppBarColors

Represents the colors used by a top app bar in different states.
Cmn
TopAppBarState

A state object that can be hoisted to control and observe the top app bar state.
Cmn
TwoRowsTopAppBarOverrideScope

Parameters available to TwoRowsTopAppBar.
Cmn
Typography

The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.
Cmn
VerticalFloatingToolbarOverrideScope

Parameters available to VerticalFloatingToolbar.
Cmn
VerticalFloatingToolbarWithFabOverrideScope

Parameters available to VerticalFloatingToolbar that includes a floating action button (FAB).
Cmn
WideNavigationRailColors

Represents the colors of the various elements of a wide navigation rail.
Cmn
WideNavigationRailOverrideScope

Parameters available to WideNavigationRail.
Cmn

Objects

AlertDialogDefaults

Contains default values used for AlertDialog and BasicAlertDialog.
Cmn
AssistChipDefaults

Contains the baseline values used by AssistChip.
Cmn
BadgeDefaults

Default values used for Badge implementations.
Cmn
BottomAppBarDefaults

Contains default values used for the bottom app bar implementations.
Cmn
BottomSheetDefaults

Contains the default values used by ModalBottomSheet and BottomSheetScaffold.
Cmn
ButtonDefaults

Contains the default values used by all 5 button types.
Cmn
ButtonGroupDefaults

Default values used by ButtonGroup
Cmn
CardDefaults

Contains the default values used by all card types.
Cmn
CheckboxDefaults

Defaults used in Checkbox and TriStateCheckbox.
Cmn
ComposeMaterial3Flags

The object holding the feature flags.
Cmn
DatePickerDefaults

Contains default values used by the DatePicker.
Cmn
DateRangePickerDefaults

Contains default values used by the DateRangePicker.
Cmn
DefaultBasicAlertDialogOverride

This override provides the default behavior of the BasicAlertDialog component.
Cmn
DefaultHorizontalFloatingToolbarOverride

Provides the default behavior of the HorizontalFloatingToolbar component.
Cmn
DefaultHorizontalFloatingToolbarWithFabOverride

Provides the default behavior of the HorizontalFloatingToolbar component that includes a Floating Action Button.
Cmn
DefaultModalWideNavigationRailOverride

This override provides the default behavior of the ModalWideNavigationRail component.
Cmn
DefaultNavigationBarOverride

This override provides the default behavior of the NavigationBar component.
Cmn
DefaultNavigationRailOverride

This override provides the default behavior of the NavigationRail component.
Cmn
DefaultShortNavigationBarOverride

This override provides the default behavior of the ShortNavigationBar component.
Cmn
DefaultSingleRowTopAppBarOverride

Provides the default behavior of the SingleRowTopAppBar component.
Cmn
DefaultTwoRowsTopAppBarOverride

Provides the default behavior of the TwoRowsTopAppBar component.
Cmn
DefaultVerticalFloatingToolbarOverride

This override provides the default behavior of the VerticalFloatingToolbar component.
Cmn
DefaultVerticalFloatingToolbarWithFabOverride

This override provides the default behavior of the VerticalFloatingToolbar with FAB component.
Cmn
DefaultWideNavigationRailOverride

This override provides the default behavior of the WideNavigationRail component.
Cmn
DividerDefaults

Default values for Divider
Cmn
DrawerDefaults

Object to hold default values for ModalNavigationDrawer
Cmn
ExposedDropdownMenuDefaults

Contains default values used by Exposed Dropdown Menu.
Cmn
FilterChipDefaults

Contains the baseline values used by FilterChip.
Cmn
FloatingActionButtonDefaults

Contains the default values used by FloatingActionButton
Cmn
FloatingToolbarDefaults

Contains default values used for the floating toolbar implementations.
Cmn
IconButtonDefaults

Contains the default values for all four icon and icon toggle button types.
Cmn
InputChipDefaults

Contains the baseline values used by an InputChip.
Cmn
ListItemDefaults

Contains the default values used by list items.
Cmn
LoadingIndicatorDefaults

Contains default values by the LoadingIndicator.
Cmn
MaterialTheme

Contains functions to access the current theme values provided at the call site's position in the hierarchy.
Cmn
MenuDefaults

Contains default values used for DropdownMenu and DropdownMenuItem.
Cmn
ModalBottomSheetDefaults

Default values for ModalBottomSheet
Cmn
android
ModalWideNavigationRailDefaults

This object is deprecated. Deprecated in favor of default values in WideNavigationRailDefaults
Cmn
NavigationBarDefaults

Defaults used in NavigationBar.
Cmn
NavigationBarItemDefaults

Defaults used in NavigationBarItem.
Cmn
NavigationDrawerItemDefaults

Defaults used in NavigationDrawerItem.
Cmn
NavigationRailDefaults

Defaults used in NavigationRail
Cmn
NavigationRailItemDefaults

Defaults used in NavigationRailItem.
Cmn
OutlinedTextFieldDefaults

Contains the default values used by OutlinedTextField.
Cmn
ProgressIndicatorDefaults

Contains the default values used for LinearProgressIndicator and CircularProgressIndicator.
Cmn
RadioButtonDefaults

Defaults used in RadioButton.
Cmn
RippleDefaults

Default values used by ripple.
Cmn
ScaffoldDefaults

Object containing various default values for Scaffold component.
Cmn
ScrimDefaults

Object containing default values for the Scrim component.
Cmn
SearchBarDefaults

Defaults used in SearchBar and DockedSearchBar.
Cmn
SegmentedButtonDefaults
Cmn
ShapeDefaults

Contains the default values used by Shapes
Cmn
ShortNavigationBarDefaults

Defaults used in ShortNavigationBar.
Cmn
ShortNavigationBarItemDefaults

Defaults used in ShortNavigationBarItem.
Cmn
SliderDefaults

Object to hold defaults used by Slider
Cmn
SnackbarDefaults

Contains the default values used for Snackbar.
Cmn
SplitButtonDefaults

Contains default values used by SplitButtonLayout and its style variants.
Cmn
SuggestionChipDefaults

Contains the baseline values used by SuggestionChip.
Cmn
SwipeToDismissBoxDefaults

Contains default values for SwipeToDismissBox and SwipeToDismissBoxState.
Cmn
SwitchDefaults

Contains the default values used by Switch
Cmn
TabRowDefaults

Contains default implementations and values used for TabRow.
Cmn
TextFieldDefaults

Contains the default values used by TextField.
Cmn
TimePickerDefaults

Contains the default values used by TimePicker
Cmn
TimePickerDialogDefaults

Default properties for a TimePickerDialog
Cmn
ToggleButtonDefaults

Contains the default values for all five toggle button types.
Cmn
ToggleFloatingActionButtonDefaults

Contains the default values used by ToggleFloatingActionButton
Cmn
TooltipDefaults

Tooltip defaults that contain default values for both PlainTooltip and RichTooltip
Cmn
TopAppBarDefaults

Contains default values used for the top app bar implementations.
Cmn
VerticalDragHandleDefaults

Contains the baseline values used by a VerticalDragHandle.
Cmn
WavyProgressIndicatorDefaults

Contains the default values used for wavy progress indicators
Cmn
WideNavigationRailDefaults

Defaults used in WideNavigationRail.
Cmn
WideNavigationRailItemDefaults

Defaults used in WideNavigationRailItem.
Cmn

Annotations

ExperimentalMaterial3Api
Cmn
ExperimentalMaterial3ComponentOverrideApi
Cmn
ExperimentalMaterial3ExpressiveApi
Cmn

Enums

DrawerValue

Possible values of DrawerState.
Cmn
SearchBarValue

Possible values of SearchBarState.
Cmn
SheetValue

Possible values of SheetState.
Cmn
SnackbarDuration

Possible durations of the Snackbar in SnackbarHost
Cmn
SnackbarResult

Possible results of the SnackbarHostState.showSnackbar call
Cmn
SwipeToDismissBoxValue

The directions in which a SwipeToDismissBox can be dismissed.
Cmn
WideNavigationRailValue

Possible values of WideNavigationRailState.
Cmn

Composables

AlertDialog

Basic alert dialog dialog
Cmn
android
AppBarColumn

An AppBarColumn arranges its children in a vertical sequence, and if any children overflow the constraints, an overflow indicator is displayed.
Cmn
AppBarOverflowIndicator

Default overflow indicator for an AppBarRow and AppBarColumn.
Cmn
AppBarRow

An AppBarRow arranges its children in a horizontal sequence, and if any children overflow the constraints, an overflow indicator is displayed.
Cmn
AppBarWithSearch

Material Design search
Cmn
AssistChip

Material Design assist chip
Cmn
Badge

A badge represents dynamic information such as a number of pending requests in a navigation bar.
Cmn
BadgedBox

Material Design badge box.
Cmn
BasicAlertDialog

Basic alert dialog dialog
Cmn
BottomAppBar

Material Design bottom app bar
Cmn
BottomSheet

Material Design bottom sheet
Cmn
BottomSheetScaffold

Material Design standard bottom sheet scaffold
Cmn
Button

Material Design button
Cmn
ButtonGroup

A layout composable that places its children in a horizontal sequence.
Cmn
Card

Material Design filled card
Cmn
CenterAlignedTopAppBar

Material Design center-aligned small top app bar
Cmn
Checkbox

Material Design checkbox
Cmn
CircularProgressIndicator

Material Design determinate circular progress indicator
Cmn
CircularWavyProgressIndicator

Material Design indeterminate circular progress indicator
Cmn
ContainedLoadingIndicator

A Material Design contained loading indicator.
Cmn
DatePicker

Material Design date picker
Cmn
DatePickerDialog

Material Design date picker dialog
Cmn
android
DateRangePicker

Material Design date range picker
Cmn
DismissibleDrawerSheet

Content inside of a dismissible navigation drawer.
Cmn
DismissibleNavigationDrawer

Material Design navigation drawer
Cmn
Divider
Cmn
DockedSearchBar

Material Design search
Cmn
DropdownMenu

Material Design dropdown menu
Cmn
android
DropdownMenuGroup

Material Design dropdown menu
Cmn
DropdownMenuItem

Material Design dropdown menu
Cmn
android
DropdownMenuPopup

Material Design dropdown menu
Cmn
android
ElevatedAssistChip

Material Design elevated assist chip
Cmn
ElevatedButton

Material Design elevated button
Cmn
ElevatedCard

Material Design elevated card
Cmn
ElevatedFilterChip

Material Design elevated filter chip
Cmn
ElevatedSuggestionChip

Material Design elevated suggestion chip
Cmn
ElevatedToggleButton

TODO link to mio page when available.
Cmn
ExpandedDockedSearchBar

ExpandedDockedSearchBar represents a search bar that is currently expanding or in the expanded state, showing search results.
Cmn
ExpandedDockedSearchBarWithGap

ExpandedDockedSearchBarWithGap represents a search bar that is currently expanding or in the expanded state, showing search results.
Cmn
ExpandedFullScreenContainedSearchBar

ExpandedFullScreenContainedSearchBar represents a search bar that is currently expanding or in the expanded state, showing search results, preserving the collapsed shape of the inputField without divider.
Cmn
ExpandedFullScreenSearchBar

ExpandedFullScreenSearchBar represents a search bar that is currently expanding or in the expanded state, showing search results.
Cmn
ExposedDropdownMenuBox

Material Design exposed dropdown menu
Cmn
ExtendedFloatingActionButton

Material Design extended floating action button
Cmn
FilledIconButton

Material Design filled icon button
Cmn
FilledIconToggleButton

Material Design filled icon button
Cmn
FilledTonalButton

Material Design filled tonal button
Cmn
FilledTonalIconButton

Material Design filled tonal icon button
Cmn
FilledTonalIconToggleButton

Material Design filled tonal icon toggle button
Cmn
FilterChip

Material Design filter chip
Cmn
FlexibleBottomAppBar

Material Design flexible bottom app bar
Cmn
FloatingActionButton

Material Design floating action button
Cmn
FloatingActionButtonMenu

FAB Menus should be used in conjunction with a ToggleFloatingActionButton to provide additional choices to the user after clicking a FAB.
Cmn
FloatingActionButtonMenuItem

FAB Menu Items should be used within a FloatingActionButtonMenu to provide additional choices to the user after clicking a FAB.
Cmn
HorizontalDivider

Material Design divider
Cmn
HorizontalFloatingToolbar

A horizontal floating toolbar displays navigation and key actions in a Row.
Cmn
Icon

A Material Design icon component that draws bitmap using tint, with a default value of LocalContentColor.
Cmn
IconButton

Material Design standard icon button
Cmn
IconToggleButton

Material Design standard icon toggle button
Cmn
InputChip

Material Design input chip
Cmn
Label

Label component that will append a label to content.
Cmn
LargeExtendedFloatingActionButton

Material Design large extended floating action button
Cmn
LargeFlexibleTopAppBar

Material Design large flexible top app bar
Cmn
LargeFloatingActionButton

Material Design large floating action button
Cmn
LargeTopAppBar

Material Design large top app bar
Cmn
LeadingIconTab

Material Design tab
Cmn
LinearProgressIndicator

Material Design indeterminate linear progress indicator
Cmn
LinearWavyProgressIndicator

Material Design indeterminate linear wavy progress indicator
Cmn
ListItem

Material Design list item
Cmn
LoadingIndicator

A Material Design loading indicator.
Cmn
MaterialExpressiveTheme

Material Expressive Theming refers to the customization of your Material Design app to better reflect your product’s brand.
Cmn
MaterialTheme

Material Theming refers to the customization of your Material Design app to better reflect your product’s brand.
Cmn
MediumExtendedFloatingActionButton

Material Design medium extended floating action button
Cmn
MediumFlexibleTopAppBar

Material Design medium flexible top app bar
Cmn
MediumFloatingActionButton

Material Design medium floating action button
Cmn
MediumTopAppBar

Material Design medium top app bar
Cmn
ModalBottomSheet

Material Design modal bottom sheet
Cmn
ModalDrawerSheet

Content inside of a modal navigation drawer.
Cmn
ModalNavigationDrawer

Material Design navigation drawer
Cmn
ModalWideNavigationRail

Material design modal wide navigation rail.
Cmn
MultiChoiceSegmentedButtonRow

Material Design segmented button
Cmn
NavigationBar

Material Design bottom navigation bar
Cmn
NavigationBarItem

Material Design navigation bar item.
Cmn
NavigationDrawerItem

Material Design navigation drawer item.
Cmn
NavigationRail

Material Design bottom navigation rail
Cmn
NavigationRailItem

Material Design navigation rail item.
Cmn
OutlinedButton

Material Design outlined button
Cmn
OutlinedCard

Material Design outlined card
Cmn
OutlinedIconButton

Material Design outlined icon button
Cmn
OutlinedIconToggleButton

Material Design outlined icon toggle button
Cmn
OutlinedSecureTextField

Material Design outlined text field for secure content
Cmn
OutlinedTextField

Material Design outlined text field
Cmn
OutlinedToggleButton

TODO link to mio page when available.
Cmn
PermanentDrawerSheet

Content inside of a permanent navigation drawer.
Cmn
PermanentNavigationDrawer

Material Design navigation permanent drawer
Cmn
PlainTooltip

Plain tooltip that provides a descriptive message.
Cmn
PrimaryScrollableTabRow

Material Design scrollable primary tabs
Cmn
PrimaryTabRow

Material Design fixed primary tabs
Cmn
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.
Cmn
RadioButton

Material Design radio button
Cmn
RangeSlider

Material Design range slider
Cmn
RichTooltip

Rich text tooltip that allows the user to pass in a title, text, and action.
Cmn
Scaffold

Material Design layout
Cmn
Scrim

A Scrim that obscures content behind a modal surface.
Cmn
ScrollableTabRow

Material Design tabs
Cmn
SearchBar

Material Design search
Cmn
SecondaryScrollableTabRow

Material Design scrollable secondary tabs
Cmn
SecondaryTabRow

Material Design fixed secondary tabs
Cmn
SecureTextField

Material Design filled text field for secure content
Cmn
SegmentedButton

Material Design segmented Button
Cmn
SegmentedListItem

Material Design segmented list item
Cmn
ShortNavigationBar

Material Design short navigation bar.
Cmn
ShortNavigationBarItem

Material Design short navigation bar item.
Cmn
SingleChoiceSegmentedButtonRow

Material Design segmented button
Cmn
Slider

Material Design slider
Cmn
SmallExtendedFloatingActionButton

Material Design small extended floating action button
Cmn
SmallFloatingActionButton

Material Design small floating action button
Cmn
Snackbar

Material Design snackbar
Cmn
SnackbarHost

Host for Snackbars to be used in Scaffold to properly show, hide and dismiss items based on Material specification and the hostState.
Cmn
SplitButtonLayout

A SplitButtonLayout let user define a button group consisting of 2 buttons.
Cmn
SuggestionChip

Material Design suggestion chip
Cmn
Surface

Material surface is the central metaphor in material design.
Cmn
SwipeToDismissBox

A composable that can be dismissed by swiping left or right.
Cmn
Switch

Material Design switch
Cmn
Tab

Material Design tab
Cmn
TabRow

Material Design tabs
Cmn
Text

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

Material Design text button
Cmn
TextField

Material Design filled text field
Cmn
TimeInput

Time pickers help users select and set a specific time.
Cmn
TimePicker

Material Design time picker
Cmn
TimePickerDialog

Material Design time picker dialog
Cmn
ToggleButton

TODO link to mio page when available.
Cmn
ToggleFloatingActionButton

Toggleable FAB supports animating its container size, corner radius, and color when it is toggled, and should be used in conjunction with a FloatingActionButtonMenu to provide additional choices to the user after clicking the FAB.
Cmn
TonalToggleButton

TODO link to mio page when available.
Cmn
TooltipBox

Material TooltipBox that wraps a composable with a tooltip.
Cmn
TopAppBar

Material Design small top app bar
Cmn
TopSearchBar

Material Design search
Cmn
TriStateCheckbox

Material Design checkbox
Cmn
TwoRowsTopAppBar

A basic two-rows Material Design top app bar.
Cmn
VerticalDivider

Material Design divider
Cmn
VerticalDragHandle

Material Design drag handle
Cmn
VerticalFloatingToolbar

A vertical floating toolbar displays navigation and key actions in a Column.
Cmn
VerticalSlider

Material Design slider
Cmn
WideNavigationRail

Material design wide navigation rail.
Cmn
WideNavigationRailItem

Material Design wide navigation rail item.
Cmn
contentColorFor

The Material color system contains pairs of colors that are typically used for the background and content color inside a component.
Cmn
rememberBottomAppBarState

Creates a BottomAppBarState that is remembered across compositions.
Cmn
rememberBottomSheetScaffoldState

Create and remember a BottomSheetScaffoldState.
Cmn
rememberContainedSearchBarState

Create and remember a SearchBarState to use in conjunction with ExpandedFullScreenContainedSearchBar.
Cmn
rememberDatePickerState
Cmn
android
rememberDateRangePickerState
Cmn
android
rememberDrawerState

Create and remember a DrawerState.
Cmn
rememberFloatingToolbarState

Creates a FloatingToolbarState that is remembered across compositions.
Cmn
rememberModalBottomSheetState

Create and remember a SheetState for ModalBottomSheet.
Cmn
rememberRangeSliderState

Creates a SliderState that is remembered across compositions.
Cmn
rememberSearchBarState

Create and remember a SearchBarState.
Cmn
rememberSliderState

Creates a SliderState that is remembered across compositions.
Cmn
rememberStandardBottomSheetState

Create and remember a SheetState for BottomSheetScaffold.
Cmn
rememberSwipeToDismissBoxState

Create and remember a SwipeToDismissBoxState.
Cmn
rememberTimePickerState

Creates a TimePickerState for a time picker that is remembered across compositions and configuration changes.
Cmn
rememberTooltipState

Create and remember the default TooltipState for TooltipBox.
Cmn
rememberTopAppBarState

Creates a TopAppBarState that is remembered across compositions.
Cmn
rememberWideNavigationRailState

Create and remember a WideNavigationRailState.
Cmn
rememberWithGapSearchBarState

Create and remember a SearchBarState to use in conjunction with ExpandedDockedSearchBarWithGap.
Cmn
toPath

Returns a Path that is remembered across compositions for this RoundedPolygon.
Cmn
toShape

Returns a Shape that is remembered across compositions for this RoundedPolygon.
Cmn

Modifiers

animateFloatingActionButton

Apply this modifier to a FloatingActionButton to show or hide it with an animation, typically based on the app's main content scrolling.
Cmn
minimumInteractiveComponentSize

Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller.
Cmn

Type aliases

CalendarLocale

Represents a Locale for the calendar.
android
MenuAnchorType

This type alias is deprecated. Renamed to ExposedDropdownMenuAnchorType
Cmn

Top-level functions summary

BottomAppBarState
@ExperimentalMaterial3Api
BottomAppBarState(
    initialHeightOffsetLimit: Float,
    initialHeightOffset: Float,
    initialContentOffset: Float
)

Creates a BottomAppBarState.
Cmn
DatePickerState
@RequiresApi(value = 26)
DatePickerState(
    locale: Locale,
    initialSelectedDate: LocalDate?,
    initialDisplayedMonth: YearMonth?,
    yearRange: IntRange,
    initialDisplayMode: DisplayMode,
    selectableDates: SelectableDates
)

Creates a DatePickerState.
android
DatePickerState
DatePickerState(
    locale: CalendarLocale,
    initialSelectedDateMillis: Long?,
    initialDisplayedMonthMillis: Long?,
    yearRange: IntRange,
    initialDisplayMode: DisplayMode,
    selectableDates: SelectableDates
)

Creates a DatePickerState.
Cmn
DateRangePickerState
@RequiresApi(value = 26)
DateRangePickerState(
    locale: Locale,
    initialSelectedStartDate: LocalDate?,
    initialSelectedEndDate: LocalDate?,
    initialDisplayedMonth: YearMonth?,
    yearRange: IntRange,
    initialDisplayMode: DisplayMode,
    selectableDates: SelectableDates
)

Creates a DateRangePickerState.
android
DateRangePickerState
DateRangePickerState(
    locale: CalendarLocale,
    initialSelectedStartDateMillis: Long?,
    initialSelectedEndDateMillis: Long?,
    initialDisplayedMonthMillis: Long?,
    yearRange: IntRange,
    initialDisplayMode: DisplayMode,
    selectableDates: SelectableDates
)

Creates a DateRangePickerState.
Cmn
FloatingToolbarState
@ExperimentalMaterial3ExpressiveApi
FloatingToolbarState(
    initialOffsetLimit: Float,
    initialOffset: Float,
    initialContentOffset: Float
)

Creates a FloatingToolbarState.
Cmn
TimePickerState
@ExperimentalMaterial3Api
TimePickerState(initialHour: Int, initialMinute: Int, is24Hour: Boolean)

Factory function for the default implementation of TimePickerState should be used in most cases.
Cmn
TooltipState
TooltipState(
    initialIsVisible: Boolean,
    isPersistent: Boolean,
    mutatorMutex: MutatorMutex
)

Constructor extension function for TooltipState
Cmn
ColorScheme
darkColorScheme(
    primary: Color,
    onPrimary: Color,
    primaryContainer: Color,
    onPrimaryContainer: Color,
    inversePrimary: Color,
    secondary: Color,
    onSecondary: Color,
    secondaryContainer: Color,
    onSecondaryContainer: Color,
    tertiary: Color,
    onTertiary: Color,
    tertiaryContainer: Color,
    onTertiaryContainer: Color,
    background: Color,
    onBackground: Color,
    surface: Color,
    onSurface: Color,
    surfaceVariant: Color,
    onSurfaceVariant: Color,
    surfaceTint: Color,
    inverseSurface: Color,
    inverseOnSurface: Color,
    error: Color,
    onError: Color,
    errorContainer: Color,
    onErrorContainer: Color,
    outline: Color,
    outlineVariant: Color,
    scrim: Color,
    surfaceBright: Color,
    surfaceContainer: Color,
    surfaceContainerHigh: Color,
    surfaceContainerHighest: Color,
    surfaceContainerLow: Color,
    surfaceContainerLowest: Color,
    surfaceDim: Color,
    primaryFixed: Color,
    primaryFixedDim: Color,
    onPrimaryFixed: Color,
    onPrimaryFixedVariant: Color,
    secondaryFixed: Color,
    secondaryFixedDim: Color,
    onSecondaryFixed: Color,
    onSecondaryFixedVariant: Color,
    tertiaryFixed: Color,
    tertiaryFixedDim: Color,
    onTertiaryFixed: Color,
    onTertiaryFixedVariant: Color
)

Returns a dark Material color scheme.
Cmn
ColorScheme
@RequiresApi(value = 31)
dynamicDarkColorScheme(context: Context)

Creates a dark dynamic color scheme.
android
ColorScheme

Creates a light dynamic color scheme.
android
ColorScheme

Returns a light Material color scheme.
Cmn
ColorScheme
lightColorScheme(
    primary: Color,
    onPrimary: Color,
    primaryContainer: Color,
    onPrimaryContainer: Color,
    inversePrimary: Color,
    secondary: Color,
    onSecondary: Color,
    secondaryContainer: Color,
    onSecondaryContainer: Color,
    tertiary: Color,
    onTertiary: Color,
    tertiaryContainer: Color,
    onTertiaryContainer: Color,
    background: Color,
    onBackground: Color,
    surface: Color,
    onSurface: Color,
    surfaceVariant: Color,
    onSurfaceVariant: Color,
    surfaceTint: Color,
    inverseSurface: Color,
    inverseOnSurface: Color,
    error: Color,
    onError: Color,
    errorContainer: Color,
    onErrorContainer: Color,
    outline: Color,
    outlineVariant: Color,
    scrim: Color,
    surfaceBright: Color,
    surfaceContainer: Color,
    surfaceContainerHigh: Color,
    surfaceContainerHighest: Color,
    surfaceContainerLow: Color,
    surfaceContainerLowest: Color,
    surfaceDim: Color,
    primaryFixed: Color,
    primaryFixedDim: Color,
    onPrimaryFixed: Color,
    onPrimaryFixedVariant: Color,
    secondaryFixed: Color,
    secondaryFixedDim: Color,
    onSecondaryFixed: Color,
    onSecondaryFixedVariant: Color,
    tertiaryFixed: Color,
    tertiaryFixedDim: Color,
    onTertiaryFixed: Color,
    onTertiaryFixedVariant: Color
)

Returns a light Material color scheme.
Cmn
IndicationNodeFactory
ripple(bounded: Boolean, radius: Dp, color: Color)

Creates a Ripple using the provided values and values inferred from the theme.
Cmn
IndicationNodeFactory
ripple(color: ColorProducer, bounded: Boolean, radius: Dp)

Creates a Ripple using the provided values and values inferred from the theme.
Cmn
Boolean

Whether components should have a denser spacing and sizing due to a precision pointer being present.
Cmn

Extension functions summary

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.
Cmn
YearMonth

Returns a YearMonth representation of the displayed month in this DatePickerState.
android
YearMonth

Returns a YearMonth representation of the displayed month in this DateRangePickerState.
android
LocalDate?

Returns a LocalDate representation of the selected date in this DatePickerState, or null in case there is no selection.
android
LocalDate?

Returns a LocalDate representation of the selected end date in this DateRangePickerState, or null in case there is no selection.
android
LocalDate?

Returns a LocalDate representation of the selected start date in this DateRangePickerState, or null in case there is no selection.
android
Unit

Sets the DatePickerState.displayedMonthMillis based on a given YearMonth.
android
Unit

Sets the DateRangePickerState.displayedMonthMillis based on a given YearMonth.
android
Unit

Sets the DatePickerState.selectedDateMillis based on a given LocalDate.
android
Unit
@RequiresApi(value = 26)
DateRangePickerState.setSelection(
    startDate: LocalDate?,
    endDate: LocalDate?
)

Sets the DateRangePickerState start and end dates selection.
android
Color

Computes the surface tonal color at different elevation levels e.g. surface1 through surface5.
Cmn
Path
@ExperimentalMaterial3ExpressiveApi
Morph.toPath(progress: Float, path: Path, startAngle: Int)

Returns a Path for this Morph.
Cmn

Top-level properties summary

ProvidableCompositionLocal<Dp>

CompositionLocal containing the current absolute elevation provided by Surface components.
Cmn
ProvidableCompositionLocal<BasicAlertDialogOverride>

CompositionLocal containing the currently-selected BasicAlertDialogOverride.
Cmn
ProvidableCompositionLocal<Color>

CompositionLocal containing the preferred content color for a given position in the hierarchy.
Cmn
ProvidableCompositionLocal<HorizontalFloatingToolbarOverride>

CompositionLocal containing the currently-selected HorizontalFloatingToolbarOverride.
Cmn
ProvidableCompositionLocal<HorizontalFloatingToolbarWithFabOverride>

CompositionLocal containing the currently-selected HorizontalFloatingToolbarOverride.
Cmn
ProvidableCompositionLocal<Boolean>

This property is deprecated. Use LocalMinimumInteractiveComponentSize with 0.dp to turn off enforcement instead.
Cmn
ProvidableCompositionLocal<Dp>

CompositionLocal that configures the minimum touch target size for Material components (such as Button) to ensure they are accessible.
Cmn
ProvidableCompositionLocal<ModalWideNavigationRailOverride>

CompositionLocal containing the currently-selected ModalWideNavigationRailOverride.
Cmn
ProvidableCompositionLocal<NavigationBarOverride>

CompositionLocal containing the currently-selected NavigationBarOverride.
Cmn
ProvidableCompositionLocal<NavigationRailOverride>

CompositionLocal containing the currently-selected NavigationRailOverride.
Cmn
ProvidableCompositionLocal<RippleConfiguration?>

CompositionLocal used for providing RippleConfiguration down the tree.
Cmn
ProvidableCompositionLocal<ShortNavigationBarOverride>

CompositionLocal containing the currently-selected ShortNavigationBarOverride.
Cmn
ProvidableCompositionLocal<SingleRowTopAppBarOverride>

CompositionLocal containing the currently-selected SingleRowTopAppBarOverride.
Cmn
ProvidableCompositionLocal<TextStyle>

CompositionLocal containing the preferred TextStyle that will be used by Text components by default.
Cmn
ProvidableCompositionLocal<Boolean>

Composition Local used to check if ColorScheme.applyTonalElevation will be applied down the tree.
Cmn
ProvidableCompositionLocal<TwoRowsTopAppBarOverride>

CompositionLocal containing the currently-selected TwoRowsTopAppBarOverride.
Cmn
ProvidableCompositionLocal<VerticalFloatingToolbarOverride>

CompositionLocal containing the currently-selected VerticalFloatingToolbarOverride.
Cmn
ProvidableCompositionLocal<VerticalFloatingToolbarWithFabOverride>

CompositionLocal containing the currently-selected VerticalFloatingToolbarWithFabOverride.
Cmn
ProvidableCompositionLocal<WideNavigationRailOverride>

CompositionLocal containing the currently-selected WideNavigationRailOverride.
Cmn
VerticalAlignmentLine

The vertical AlignmentLine that marks the left of the space added by Modifier.minimumInteractiveComponentSize to meet minimum touch target requirements.
Cmn
HorizontalAlignmentLine

The horizontal AlignmentLine that marks the top of the space added by Modifier.minimumInteractiveComponentSize to meet minimum touch target requirements.
Cmn

Extension properties summary

Boolean

true if the current hourInput represents a valid hour (0-23).
Cmn
Boolean

true if the time input values are valid.
Cmn
Boolean

true if the current minuteInput represents a valid minute (0-59).
Cmn
Boolean

Indicates whether the selected time falls within the period from 12 PM inclusive to 12 AM non inclusive.
Cmn

Top-level functions

BottomAppBarState

Cmn 
@ExperimentalMaterial3Api
fun BottomAppBarState(
    initialHeightOffsetLimit: Float,
    initialHeightOffset: Float,
    initialContentOffset: Float
): BottomAppBarState

Creates a BottomAppBarState.

Parameters
initialHeightOffsetLimit: Float

the initial value for BottomAppBarState.heightOffsetLimit, which represents the pixel limit that a bottom app bar is allowed to collapse when the scrollable content is scrolled
initialHeightOffset: Float

the initial value for BottomAppBarState.heightOffset. The initial offset height offset should be between zero and initialHeightOffsetLimit.
initialContentOffset: Float

the initial value for BottomAppBarState.contentOffset

DatePickerState

android 
@RequiresApi(value = 26)
fun DatePickerState(
    locale: Locale,
    initialSelectedDate: LocalDate?,
    initialDisplayedMonth: YearMonth? = initialSelectedDate?.let { YearMonth.from(it) },
    yearRange: IntRange = DatePickerDefaults.YearRange,
    initialDisplayMode: DisplayMode = DisplayMode.Picker,
    selectableDates: SelectableDates = DatePickerDefaults.AllDates
): DatePickerState

Creates a DatePickerState.

For most cases, you are advised to use the rememberDatePickerState when in a composition.

The initial values are converted to UTC milliseconds at the start of the day (midnight):

Note that in case you provide a locale that is different than the default platform locale, you may need to ensure that the picker's title and headline are localized correctly. The following sample shows one possible way of doing so by applying a local composition of a LocalContext and LocaleConfiguration.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerState
import androidx.compose.material3.Text
import androidx.compose.material3.getSelectedDate
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.runtime.CompositionLocalProvider
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.platform.LocalContext
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp

val preferredLocales = LocaleList.forLanguageTags("HE")
val config = Configuration()
config.setLocales(preferredLocales)
val newContext = LocalContext.current.createConfigurationContext(config)
CompositionLocalProvider(
    LocalContext provides newContext,
    LocalConfiguration provides config,
    LocalLayoutDirection provides LayoutDirection.Rtl,
) {
    Column(
        modifier = Modifier.verticalScroll(rememberScrollState()),
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        // Pre-select a date for January 4, 2020
        // Initialize date picker with the preferred locale. Here we create a state directly,
        // but since the Locale was set at the CompositionLocalProvider through a Configuration,
        // a `val datePickerState = rememberDatePickerState(...)` will have the same effect.
        val datePickerState = remember {
            DatePickerState(
                initialSelectedDate = LocalDate.of(2020, 1, 4),
                // Set to "HE" locale.
                locale = preferredLocales.get(0),
            )
        }
        DatePicker(state = datePickerState, modifier = Modifier.padding(16.dp))

        Text(
            "Selected date: ${datePickerState.getSelectedDate() ?: "no selection"}",
            modifier = Modifier.align(Alignment.CenterHorizontally),
        )
    }
}
Parameters
locale: Locale

the CalendarLocale that will be used when formatting dates, determining the input format, displaying the week-day, determining the first day of the week, and more. Note that in case the provided CalendarLocale differs from the platform's default Locale, you may need to ensure that the picker's title and headline are localized correctly, and in some cases, you may need to apply an RTL layout.
initialSelectedDate: LocalDate?

a LocalDate for an initial date selection. Provide a null to indicate no selection.
initialDisplayedMonth: YearMonth? = initialSelectedDate?.let { YearMonth.from(it) }

an optional YearMonth for an initial month that will be displayed to the user. By default, in case an initialSelectedDate is provided, the initial displayed month would be the month of the selected date. You may provide a different initial month, or null to display the current one.
yearRange: IntRange = DatePickerDefaults.YearRange

an IntRange that holds the year range that the date picker will be limited to
initialDisplayMode: DisplayMode = DisplayMode.Picker

an initial DisplayMode that this state will hold
selectableDates: SelectableDates = DatePickerDefaults.AllDates

a SelectableDates that is consulted to check if a date is allowed. In case a date is not allowed to be selected, it will appear disabled in the UI.
Throws
IllegalArgumentException

if the initial selected date or displayed month represent a year that is out of the year range.
See also
rememberDatePickerState

DatePickerState

Cmn 
fun DatePickerState(
    locale: CalendarLocale,
    initialSelectedDateMillis: Long? = null,
    initialDisplayedMonthMillis: Long? = initialSelectedDateMillis,
    yearRange: IntRange = DatePickerDefaults.YearRange,
    initialDisplayMode: DisplayMode = DisplayMode.Picker,
    selectableDates: SelectableDates = DatePickerDefaults.AllDates
): DatePickerState

Creates a DatePickerState.

For most cases, you are advised to use the rememberDatePickerState when in a composition.

Note that in case you provide a locale that is different than the default platform locale, you may need to ensure that the picker's title and headline are localized correctly. The following sample shows one possible way of doing so by applying a local composition of a LocalContext and LocaleConfiguration.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerState
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.runtime.CompositionLocalProvider
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.platform.LocalContext
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp

val preferredLocales = LocaleList.forLanguageTags("HE")
val config = Configuration()
config.setLocales(preferredLocales)
val newContext = LocalContext.current.createConfigurationContext(config)
CompositionLocalProvider(
    LocalContext provides newContext,
    LocalConfiguration provides config,
    LocalLayoutDirection provides LayoutDirection.Rtl,
) {
    Column(
        modifier = Modifier.verticalScroll(rememberScrollState()),
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        // Pre-select a date for January 4, 2020
        // Initialize date picker with the preferred locale. Here we create a state directly,
        // but since the Locale was set at the CompositionLocalProvider through a Configuration,
        // a `val datePickerState = rememberDatePickerState(...)` will have the same effect.
        val datePickerState = remember {
            DatePickerState(
                initialSelectedDateMillis = 1578096000000,
                // Set to "HE" locale.
                locale = preferredLocales.get(0),
            )
        }
        DatePicker(state = datePickerState, modifier = Modifier.padding(16.dp))

        Text(
            "Selected date timestamp: ${datePickerState.selectedDateMillis ?: "no selection"}",
            modifier = Modifier.align(Alignment.CenterHorizontally),
        )
    }
}
Parameters
locale: CalendarLocale

the CalendarLocale that will be used when formatting dates, determining the input format, displaying the week-day, determining the first day of the week, and more. Note that in case the provided CalendarLocale differs from the platform's default Locale, you may need to ensure that the picker's title and headline are localized correctly, and in some cases, you may need to apply an RTL layout.
initialSelectedDateMillis: Long? = null

timestamp in UTC milliseconds from the epoch that represents an initial selection of a date. Provide a null to indicate no selection. Note that the state's DatePickerState.selectedDateMillis will provide a timestamp that represents the start of the day, which may be different than the provided initialSelectedDateMillis.
initialDisplayedMonthMillis: Long? = initialSelectedDateMillis

timestamp in UTC milliseconds from the epoch that represents an initial selection of a month to be displayed to the user. In case null is provided, the displayed month would be the current one.
yearRange: IntRange = DatePickerDefaults.YearRange

an IntRange that holds the year range that the date picker will be limited to
initialDisplayMode: DisplayMode = DisplayMode.Picker

an initial DisplayMode that this state will hold
selectableDates: SelectableDates = DatePickerDefaults.AllDates

a SelectableDates that is consulted to check if a date is allowed. In case a date is not allowed to be selected, it will appear disabled in the UI.
Throws
IllegalArgumentException

if the initial selected date or displayed month represent a year that is out of the year range.
See also
rememberDatePickerState

DateRangePickerState

android 
@RequiresApi(value = 26)
fun DateRangePickerState(
    locale: Locale,
    initialSelectedStartDate: LocalDate?,
    initialSelectedEndDate: LocalDate?,
    initialDisplayedMonth: YearMonth? = initialSelectedStartDate?.let { YearMonth.from(it) },
    yearRange: IntRange = DatePickerDefaults.YearRange,
    initialDisplayMode: DisplayMode = DisplayMode.Picker,
    selectableDates: SelectableDates = DatePickerDefaults.AllDates
): DateRangePickerState

Creates a DateRangePickerState.

For most cases, you are advised to use the rememberDateRangePickerState when in a composition.

The initial values are converted to UTC milliseconds at the start of the day (midnight):

Note that in case you provide a locale that is different than the default platform locale, you may need to ensure that the picker's title and headline are localized correctly. The following sample shows one possible way of doing so by applying a local composition of a LocalContext and LocaleConfiguration.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerState
import androidx.compose.material3.Text
import androidx.compose.material3.getSelectedDate
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.runtime.CompositionLocalProvider
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.platform.LocalContext
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp

val preferredLocales = LocaleList.forLanguageTags("HE")
val config = Configuration()
config.setLocales(preferredLocales)
val newContext = LocalContext.current.createConfigurationContext(config)
CompositionLocalProvider(
    LocalContext provides newContext,
    LocalConfiguration provides config,
    LocalLayoutDirection provides LayoutDirection.Rtl,
) {
    Column(
        modifier = Modifier.verticalScroll(rememberScrollState()),
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        // Pre-select a date for January 4, 2020
        // Initialize date picker with the preferred locale. Here we create a state directly,
        // but since the Locale was set at the CompositionLocalProvider through a Configuration,
        // a `val datePickerState = rememberDatePickerState(...)` will have the same effect.
        val datePickerState = remember {
            DatePickerState(
                initialSelectedDate = LocalDate.of(2020, 1, 4),
                // Set to "HE" locale.
                locale = preferredLocales.get(0),
            )
        }
        DatePicker(state = datePickerState, modifier = Modifier.padding(16.dp))

        Text(
            "Selected date: ${datePickerState.getSelectedDate() ?: "no selection"}",
            modifier = Modifier.align(Alignment.CenterHorizontally),
        )
    }
}
Parameters
locale: Locale

the CalendarLocale that will be used when formatting dates, determining the input format, displaying the week-day, determining the first day of the week, and more. Note that in case the provided CalendarLocale differs from the platform's default Locale, you may need to ensure that the picker's title and headline are localized correctly, and in some cases, you may need to apply an RTL layout.
initialSelectedStartDate: LocalDate?

a LocalDate that represents an initial selection of a start date. Provide a null to indicate no selection.
initialSelectedEndDate: LocalDate?

a LocalDate that represents an initial selection of an end date. Provide a null to indicate no selection.
initialDisplayedMonth: YearMonth? = initialSelectedStartDate?.let { YearMonth.from(it) }

an optional YearMonth for an initial month that will be displayed to the user. By default, in case an initialSelectedStartDate is provided, the initial displayed month would be the month of the selected date. You may provide a different initial month, or null to display the current one.
yearRange: IntRange = DatePickerDefaults.YearRange

an IntRange that holds the year range that the date picker will be limited to
initialDisplayMode: DisplayMode = DisplayMode.Picker

an initial DisplayMode that this state will hold
selectableDates: SelectableDates = DatePickerDefaults.AllDates

a SelectableDates that is consulted to check if a date is allowed. In case a date is not allowed to be selected, it will appear disabled in the UI
Throws
IllegalArgumentException

if the initial timestamps do not fall within the year range this state is created with, or the end date precedes the start date, or when an end date is provided without a start date (e.g. the start date was null, while the end date was not).
See also
rememberDateRangePickerState

DateRangePickerState

Cmn 
fun DateRangePickerState(
    locale: CalendarLocale,
    initialSelectedStartDateMillis: Long? = null,
    initialSelectedEndDateMillis: Long? = null,
    initialDisplayedMonthMillis: Long? = initialSelectedStartDateMillis,
    yearRange: IntRange = DatePickerDefaults.YearRange,
    initialDisplayMode: DisplayMode = DisplayMode.Picker,
    selectableDates: SelectableDates = DatePickerDefaults.AllDates
): DateRangePickerState

Creates a DateRangePickerState.

For most cases, you are advised to use the rememberDateRangePickerState when in a composition.

Note that in case you provide a locale that is different than the default platform locale, you may need to ensure that the picker's title and headline are localized correctly. The following sample shows one possible way of doing so by applying a local composition of a LocalContext and LocaleConfiguration.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerState
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.runtime.CompositionLocalProvider
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.platform.LocalContext
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp

val preferredLocales = LocaleList.forLanguageTags("HE")
val config = Configuration()
config.setLocales(preferredLocales)
val newContext = LocalContext.current.createConfigurationContext(config)
CompositionLocalProvider(
    LocalContext provides newContext,
    LocalConfiguration provides config,
    LocalLayoutDirection provides LayoutDirection.Rtl,
) {
    Column(
        modifier = Modifier.verticalScroll(rememberScrollState()),
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        // Pre-select a date for January 4, 2020
        // Initialize date picker with the preferred locale. Here we create a state directly,
        // but since the Locale was set at the CompositionLocalProvider through a Configuration,
        // a `val datePickerState = rememberDatePickerState(...)` will have the same effect.
        val datePickerState = remember {
            DatePickerState(
                initialSelectedDateMillis = 1578096000000,
                // Set to "HE" locale.
                locale = preferredLocales.get(0),
            )
        }
        DatePicker(state = datePickerState, modifier = Modifier.padding(16.dp))

        Text(
            "Selected date timestamp: ${datePickerState.selectedDateMillis ?: "no selection"}",
            modifier = Modifier.align(Alignment.CenterHorizontally),
        )
    }
}
Parameters
locale: CalendarLocale

the CalendarLocale that will be used when formatting dates, determining the input format, displaying the week-day, determining the first day of the week, and more. Note that in case the provided CalendarLocale differs from the platform's default Locale, you may need to ensure that the picker's title and headline are localized correctly, and in some cases, you may need to apply an RTL layout.
initialSelectedStartDateMillis: Long? = null

timestamp in UTC milliseconds from the epoch that represents an initial selection of a start date. Provide a null to indicate no selection.
initialSelectedEndDateMillis: Long? = null

timestamp in UTC milliseconds from the epoch that represents an initial selection of an end date. Provide a null to indicate no selection.
initialDisplayedMonthMillis: Long? = initialSelectedStartDateMillis

timestamp in UTC milliseconds from the epoch that represents an initial selection of a month to be displayed to the user. By default, in case an initialSelectedStartDateMillis is provided, the initial displayed month would be the month of the selected date. Otherwise, in case null is provided, the displayed month would be the current one.
yearRange: IntRange = DatePickerDefaults.YearRange

an IntRange that holds the year range that the date picker will be limited to
initialDisplayMode: DisplayMode = DisplayMode.Picker

an initial DisplayMode that this state will hold
selectableDates: SelectableDates = DatePickerDefaults.AllDates

a SelectableDates that is consulted to check if a date is allowed. In case a date is not allowed to be selected, it will appear disabled in the UI
Throws
IllegalArgumentException

if the initial timestamps do not fall within the year range this state is created with, or the end date precedes the start date, or when an end date is provided without a start date (e.g. the start date was null, while the end date was not).
See also
rememberDateRangePickerState

FloatingToolbarState

Cmn 
@ExperimentalMaterial3ExpressiveApi
fun FloatingToolbarState(
    initialOffsetLimit: Float,
    initialOffset: Float,
    initialContentOffset: Float
): FloatingToolbarState

Creates a FloatingToolbarState.

Parameters
initialOffsetLimit: Float

the initial value for FloatingToolbarState.offsetLimit, which represents the pixel limit that a floating toolbar is allowed to collapse when the scrollable content is scrolled.
initialOffset: Float

the initial value for FloatingToolbarState.offset. The initial offset should be between zero and initialOffsetLimit.
initialContentOffset: Float

the initial value for FloatingToolbarState.contentOffset

TimePickerState

Cmn 
@ExperimentalMaterial3Api
fun TimePickerState(initialHour: Int, initialMinute: Int, is24Hour: Boolean): TimePickerState

Factory function for the default implementation of TimePickerState should be used in most cases.

Parameters
initialHour: Int

starting hour for this state, will be displayed in the time picker when launched Ranges from 0 to 23
initialMinute: Int

starting minute for this state, will be displayed in the time picker when launched. Ranges from 0 to 59
is24Hour: Boolean

The format for this time picker. false for 12 hour format with an AM/PM toggle or true for 24 hour format without toggle. Defaults to follow system setting.

TooltipState

Cmn 
fun TooltipState(
    initialIsVisible: Boolean = false,
    isPersistent: Boolean = true,
    mutatorMutex: MutatorMutex = BasicTooltipDefaults.GlobalMutatorMutex
): TooltipState

Constructor extension function for TooltipState

Parameters
initialIsVisible: Boolean = false

the initial value for the tooltip's visibility when drawn.
isPersistent: Boolean = true

Boolean that determines if the tooltip associated with this will be persistent or not. If isPersistent is true, then the tooltip will only be dismissed when the user clicks outside the bounds of the tooltip or if TooltipState.dismiss is called. When isPersistent is false, the tooltip will dismiss after a short duration. Ideally, this should be set to true when there is actionable content being displayed within a tooltip.
mutatorMutex: MutatorMutex = BasicTooltipDefaults.GlobalMutatorMutex

MutatorMutex used to ensure that for all of the tooltips associated with the mutator mutex, only one will be shown on the screen at any time.

darkColorScheme

Cmn 
fun darkColorScheme(
    primary: Color = ColorDarkTokens.Primary,
    onPrimary: Color = ColorDarkTokens.OnPrimary,
    primaryContainer: Color = ColorDarkTokens.PrimaryContainer,
    onPrimaryContainer: Color = ColorDarkTokens.OnPrimaryContainer,
    inversePrimary: Color = ColorDarkTokens.InversePrimary,
    secondary: Color = ColorDarkTokens.Secondary,
    onSecondary: Color = ColorDarkTokens.OnSecondary,
    secondaryContainer: Color = ColorDarkTokens.SecondaryContainer,
    onSecondaryContainer: Color = ColorDarkTokens.OnSecondaryContainer,
    tertiary: Color = ColorDarkTokens.Tertiary,
    onTertiary: Color = ColorDarkTokens.OnTertiary,
    tertiaryContainer: Color = ColorDarkTokens.TertiaryContainer,
    onTertiaryContainer: Color = ColorDarkTokens.OnTertiaryContainer,
    background: Color = ColorDarkTokens.Background,
    onBackground: Color = ColorDarkTokens.OnBackground,
    surface: Color = ColorDarkTokens.Surface,
    onSurface: Color = ColorDarkTokens.OnSurface,
    surfaceVariant: Color = ColorDarkTokens.SurfaceVariant,
    onSurfaceVariant: Color = ColorDarkTokens.OnSurfaceVariant,
    surfaceTint: Color = primary,
    inverseSurface: Color = ColorDarkTokens.InverseSurface,
    inverseOnSurface: Color = ColorDarkTokens.InverseOnSurface,
    error: Color = ColorDarkTokens.Error,
    onError: Color = ColorDarkTokens.OnError,
    errorContainer: Color = ColorDarkTokens.ErrorContainer,
    onErrorContainer: Color = ColorDarkTokens.OnErrorContainer,
    outline: Color = ColorDarkTokens.Outline,
    outlineVariant: Color = ColorDarkTokens.OutlineVariant,
    scrim: Color = ColorDarkTokens.Scrim,
    surfaceBright: Color = ColorDarkTokens.SurfaceBright,
    surfaceContainer: Color = ColorDarkTokens.SurfaceContainer,
    surfaceContainerHigh: Color = ColorDarkTokens.SurfaceContainerHigh,
    surfaceContainerHighest: Color = ColorDarkTokens.SurfaceContainerHighest,
    surfaceContainerLow: Color = ColorDarkTokens.SurfaceContainerLow,
    surfaceContainerLowest: Color = ColorDarkTokens.SurfaceContainerLowest,
    surfaceDim: Color = ColorDarkTokens.SurfaceDim,
    primaryFixed: Color = ColorDarkTokens.PrimaryFixed,
    primaryFixedDim: Color = ColorDarkTokens.PrimaryFixedDim,
    onPrimaryFixed: Color = ColorDarkTokens.OnPrimaryFixed,
    onPrimaryFixedVariant: Color = ColorDarkTokens.OnPrimaryFixedVariant,
    secondaryFixed: Color = ColorDarkTokens.SecondaryFixed,
    secondaryFixedDim: Color = ColorDarkTokens.SecondaryFixedDim,
    onSecondaryFixed: Color = ColorDarkTokens.OnSecondaryFixed,
    onSecondaryFixedVariant: Color = ColorDarkTokens.OnSecondaryFixedVariant,
    tertiaryFixed: Color = ColorDarkTokens.TertiaryFixed,
    tertiaryFixedDim: Color = ColorDarkTokens.TertiaryFixedDim,
    onTertiaryFixed: Color = ColorDarkTokens.OnTertiaryFixed,
    onTertiaryFixedVariant: Color = ColorDarkTokens.OnTertiaryFixedVariant
): ColorScheme

Returns a dark Material color scheme.

dynamicDarkColorScheme

android 
@RequiresApi(value = 31)
fun dynamicDarkColorScheme(context: Context): ColorScheme

Creates a dark dynamic color scheme.

Use this function to create a color scheme based off the system wallpaper. If the developer changes the wallpaper this color scheme will change accordingly. This dynamic scheme is a dark theme variant.

Parameters
context: Context

The context required to get system resource data.

dynamicLightColorScheme

android 
@RequiresApi(value = 31)
fun dynamicLightColorScheme(context: Context): ColorScheme

Creates a light dynamic color scheme.

Use this function to create a color scheme based off the system wallpaper. If the developer changes the wallpaper this color scheme will change accordingly. This dynamic scheme is a light theme variant.

Parameters
context: Context

The context required to get system resource data.

expressiveLightColorScheme

Cmn 
@ExperimentalMaterial3ExpressiveApi
fun expressiveLightColorScheme(): ColorScheme

Returns a light Material color scheme.

The default color scheme for MaterialExpressiveTheme. For dark mode, use darkColorScheme.

Example of MaterialExpressiveTheme toggling expressiveLightColorScheme and darkTheme.

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialExpressiveTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.expressiveLightColorScheme
import androidx.compose.runtime.Composable

@Composable
fun MyMaterialTheme(content: @Composable () -> Unit) {
    MaterialExpressiveTheme(
        colorScheme =
            if (isSystemInDarkTheme()) darkColorScheme() else expressiveLightColorScheme()
    ) {
        content()
    }
}

lightColorScheme

Cmn 
fun lightColorScheme(
    primary: Color = ColorLightTokens.Primary,
    onPrimary: Color = ColorLightTokens.OnPrimary,
    primaryContainer: Color = ColorLightTokens.PrimaryContainer,
    onPrimaryContainer: Color = ColorLightTokens.OnPrimaryContainer,
    inversePrimary: Color = ColorLightTokens.InversePrimary,
    secondary: Color = ColorLightTokens.Secondary,
    onSecondary: Color = ColorLightTokens.OnSecondary,
    secondaryContainer: Color = ColorLightTokens.SecondaryContainer,
    onSecondaryContainer: Color = ColorLightTokens.OnSecondaryContainer,
    tertiary: Color = ColorLightTokens.Tertiary,
    onTertiary: Color = ColorLightTokens.OnTertiary,
    tertiaryContainer: Color = ColorLightTokens.TertiaryContainer,
    onTertiaryContainer: Color = ColorLightTokens.OnTertiaryContainer,
    background: Color = ColorLightTokens.Background,
    onBackground: Color = ColorLightTokens.OnBackground,
    surface: Color = ColorLightTokens.Surface,
    onSurface: Color = ColorLightTokens.OnSurface,
    surfaceVariant: Color = ColorLightTokens.SurfaceVariant,
    onSurfaceVariant: Color = ColorLightTokens.OnSurfaceVariant,
    surfaceTint: Color = primary,
    inverseSurface: Color = ColorLightTokens.InverseSurface,
    inverseOnSurface: Color = ColorLightTokens.InverseOnSurface,
    error: Color = ColorLightTokens.Error,
    onError: Color = ColorLightTokens.OnError,
    errorContainer: Color = ColorLightTokens.ErrorContainer,
    onErrorContainer: Color = ColorLightTokens.OnErrorContainer,
    outline: Color = ColorLightTokens.Outline,
    outlineVariant: Color = ColorLightTokens.OutlineVariant,
    scrim: Color = ColorLightTokens.Scrim,
    surfaceBright: Color = ColorLightTokens.SurfaceBright,
    surfaceContainer: Color = ColorLightTokens.SurfaceContainer,
    surfaceContainerHigh: Color = ColorLightTokens.SurfaceContainerHigh,
    surfaceContainerHighest: Color = ColorLightTokens.SurfaceContainerHighest,
    surfaceContainerLow: Color = ColorLightTokens.SurfaceContainerLow,
    surfaceContainerLowest: Color = ColorLightTokens.SurfaceContainerLowest,
    surfaceDim: Color = ColorLightTokens.SurfaceDim,
    primaryFixed: Color = ColorLightTokens.PrimaryFixed,
    primaryFixedDim: Color = ColorLightTokens.PrimaryFixedDim,
    onPrimaryFixed: Color = ColorLightTokens.OnPrimaryFixed,
    onPrimaryFixedVariant: Color = ColorLightTokens.OnPrimaryFixedVariant,
    secondaryFixed: Color = ColorLightTokens.SecondaryFixed,
    secondaryFixedDim: Color = ColorLightTokens.SecondaryFixedDim,
    onSecondaryFixed: Color = ColorLightTokens.OnSecondaryFixed,
    onSecondaryFixedVariant: Color = ColorLightTokens.OnSecondaryFixedVariant,
    tertiaryFixed: Color = ColorLightTokens.TertiaryFixed,
    tertiaryFixedDim: Color = ColorLightTokens.TertiaryFixedDim,
    onTertiaryFixed: Color = ColorLightTokens.OnTertiaryFixed,
    onTertiaryFixedVariant: Color = ColorLightTokens.OnTertiaryFixedVariant
): ColorScheme

Returns a light Material color scheme.

ripple

Cmn 
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 RippleDefaults.RippleAlpha applied to calculate the final color used to draw the ripple. If Color.Unspecified is provided the color used will be LocalContentColor instead.

ripple

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

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 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 RippleDefaults.RippleAlpha 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.

shouldUsePrecisionPointerComponentSizing

Cmn 
fun shouldUsePrecisionPointerComponentSizing(): Boolean

Whether components should have a denser spacing and sizing due to a precision pointer being present.

Note that this will always return false if the ComposeMaterial3Flags.isPrecisionPointerComponentSizingEnabled flag is not enabled.

See also
isPrecisionPointerComponentSizingEnabled

Extension functions

ColorScheme.contentColorFor

Cmn 
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

DatePickerState.getDisplayedMonth

android 
@RequiresApi(value = 26)
fun DatePickerState.getDisplayedMonth(): YearMonth

Returns a YearMonth representation of the displayed month in this DatePickerState. The returned YearMonth is based on the DatePickerState.displayedMonthMillis, which represents midnight of the first day of the displayed month in UTC milliseconds from the epoch.

Returns
YearMonth

The displayed YearMonth.

DateRangePickerState.getDisplayedMonth

android 
@RequiresApi(value = 26)
fun DateRangePickerState.getDisplayedMonth(): YearMonth

Returns a YearMonth representation of the displayed month in this DateRangePickerState. The returned YearMonth is based on the DateRangePickerState.displayedMonthMillis, which represents midnight of the first day of the displayed month in UTC milliseconds from the epoch.

Returns
YearMonth

The displayed YearMonth.

DatePickerState.getSelectedDate

android 
@RequiresApi(value = 26)
fun DatePickerState.getSelectedDate(): LocalDate?

Returns a LocalDate representation of the selected date in this DatePickerState, or null in case there is no selection.

Returns
LocalDate?

The selected LocalDate, or null if there is no selection.

DateRangePickerState.getSelectedEndDate

android 
@RequiresApi(value = 26)
fun DateRangePickerState.getSelectedEndDate(): LocalDate?

Returns a LocalDate representation of the selected end date in this DateRangePickerState, or null in case there is no selection.

Returns
LocalDate?

The selected end LocalDate, or null if there is no selection.

DateRangePickerState.getSelectedStartDate

android 
@RequiresApi(value = 26)
fun DateRangePickerState.getSelectedStartDate(): LocalDate?

Returns a LocalDate representation of the selected start date in this DateRangePickerState, or null in case there is no selection.

Returns
LocalDate?

The selected start LocalDate, or null if there is no selection.

DatePickerState.setDisplayedMonth

android 
@RequiresApi(value = 26)
fun DatePickerState.setDisplayedMonth(yearMonth: YearMonth): Unit

Sets the DatePickerState.displayedMonthMillis based on a given YearMonth.

Converts the YearMonth to the start of the first day of that month (midnight) in UTC and apply it to the DatePickerState displayedMonthMillis.

Parameters
yearMonth: YearMonth

The YearMonth to display.

DateRangePickerState.setDisplayedMonth

android 
@RequiresApi(value = 26)
fun DateRangePickerState.setDisplayedMonth(yearMonth: YearMonth): Unit

Sets the DateRangePickerState.displayedMonthMillis based on a given YearMonth.

Converts the YearMonth to the start of the first day of that month (midnight) in UTC and apply it to the DateRangePickerState displayedMonthMillis.

Parameters
yearMonth: YearMonth

The YearMonth to display.

DatePickerState.setSelectedDate

android 
@RequiresApi(value = 26)
fun DatePickerState.setSelectedDate(date: LocalDate?): Unit

Sets the DatePickerState.selectedDateMillis based on a given LocalDate.

Converts the LocalDate to the start of the day (midnight) in UTC and apply it to the DatePickerState selectedDateMillis. Setting null clears the selection.

Parameters
date: LocalDate?

The LocalDate to select, or null to clear the selection.

DateRangePickerState.setSelection

android 
@RequiresApi(value = 26)
fun DateRangePickerState.setSelection(
    startDate: LocalDate?,
    endDate: LocalDate?
): Unit

Sets the DateRangePickerState start and end dates selection.

The provided LocalDates are converted to the start of the day (midnight) in UTC and applied to the DateRangePickerState.

The function expects the dates to be within the state's year-range, and for the start date to appear before, or be equal, the end date. Also, if an end date is provided (e.g. not null), a start date is also expected to be provided. In any other case, an IllegalArgumentException is thrown.

Parameters
startDate: LocalDate?

a LocalDate that represents the start date selection. Provide a null to indicate no selection.
endDate: LocalDate?

a LocalDate that represents the end date selection. Provide a null to indicate no selection.
Throws
IllegalArgumentException

in case the given LocalDates do not comply with the expected values specified above.

ColorScheme.surfaceColorAtElevation

Cmn 
fun ColorScheme.surfaceColorAtElevation(elevation: Dp): Color

Computes the surface tonal color at different elevation levels e.g. surface1 through surface5.

Parameters
elevation: Dp

Elevation value used to compute alpha of the color overlay layer.
Returns
Color

the ColorScheme.surface color with an alpha of the ColorScheme.surfaceTint color overlaid on top of it.

Morph.toPath

Cmn 
@ExperimentalMaterial3ExpressiveApi
fun Morph.toPath(progress: Float, path: Path = Path(), startAngle: Int = 0): Path

Returns a Path for this Morph.

Parameters
progress: Float

the Morph's progress
path: Path = Path()

a Path to rewind and set with the new path data. In case provided, this Path would be the returned one.
startAngle: Int = 0

the angle (in degrees) from which to begin drawing the generated path. By default, it is set to 0 degrees, meaning the Path begins drawing at the 3 o'clock position.

Top-level properties

LocalAbsoluteTonalElevation

Cmn 
val LocalAbsoluteTonalElevation: ProvidableCompositionLocal<Dp>

CompositionLocal containing the current absolute elevation provided by Surface components. This absolute elevation is a sum of all the previous elevations. Absolute elevation is only used for calculating surface tonal colors, and is not used for drawing the shadow in a Surface.

LocalBasicAlertDialogOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalBasicAlertDialogOverride: ProvidableCompositionLocal<BasicAlertDialogOverride>

CompositionLocal containing the currently-selected BasicAlertDialogOverride.

LocalContentColor

Cmn 
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.surface, 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.Black if no color has been explicitly set.

LocalHorizontalFloatingToolbarOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalHorizontalFloatingToolbarOverride: ProvidableCompositionLocal<HorizontalFloatingToolbarOverride>

CompositionLocal containing the currently-selected HorizontalFloatingToolbarOverride.

LocalHorizontalFloatingToolbarWithFabOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalHorizontalFloatingToolbarWithFabOverride: ProvidableCompositionLocal<HorizontalFloatingToolbarWithFabOverride>

CompositionLocal containing the currently-selected HorizontalFloatingToolbarOverride.

LocalMinimumInteractiveComponentEnforcement

Cmn
Added in 1.1.0
Deprecated in 1.3.0
@ExperimentalMaterial3Api
val LocalMinimumInteractiveComponentEnforcement: ProvidableCompositionLocal<Boolean>

CompositionLocal that configures whether Material components that have a visual size that is lower than the minimum touch target size for accessibility (such as Button) will include extra space outside the component to ensure that they are accessible. If set to false there will be no extra space, and so it is possible that if the component is placed near the edge of a layout / near to another component without any padding, there will not be enough space for an accessible touch target.

LocalMinimumInteractiveComponentSize

Cmn 
val LocalMinimumInteractiveComponentSize: ProvidableCompositionLocal<Dp>

CompositionLocal that configures the minimum touch target size for Material components (such as Button) to ensure they are accessible. If a component has a visual size that is lower than the minimum touch target size, extra space outside the component will be included. If set to 0.dp, there will be no extra space, and so it is possible that if the component is placed near the edge of a layout / near to another component without any padding, there will not be enough space for an accessible touch target.

LocalModalWideNavigationRailOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalModalWideNavigationRailOverride: ProvidableCompositionLocal<ModalWideNavigationRailOverride>

CompositionLocal containing the currently-selected ModalWideNavigationRailOverride.

LocalNavigationBarOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalNavigationBarOverride: ProvidableCompositionLocal<NavigationBarOverride>

CompositionLocal containing the currently-selected NavigationBarOverride.

LocalNavigationRailOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalNavigationRailOverride: ProvidableCompositionLocal<NavigationRailOverride>

CompositionLocal containing the currently-selected NavigationRailOverride.

LocalRippleConfiguration

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

LocalShortNavigationBarOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalShortNavigationBarOverride: ProvidableCompositionLocal<ShortNavigationBarOverride>

CompositionLocal containing the currently-selected ShortNavigationBarOverride.

LocalSingleRowTopAppBarOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalSingleRowTopAppBarOverride: ProvidableCompositionLocal<SingleRowTopAppBarOverride>

CompositionLocal containing the currently-selected SingleRowTopAppBarOverride.

LocalTextStyle

Cmn 
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

LocalTonalElevationEnabled

Cmn 
val LocalTonalElevationEnabled: ProvidableCompositionLocal<Boolean>

Composition Local used to check if ColorScheme.applyTonalElevation will be applied down the tree.

Setting this value to false will cause all subsequent surfaces down the tree to not apply tonalElevation.

LocalTwoRowsTopAppBarOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalTwoRowsTopAppBarOverride: ProvidableCompositionLocal<TwoRowsTopAppBarOverride>

CompositionLocal containing the currently-selected TwoRowsTopAppBarOverride.

LocalVerticalToolbarOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalVerticalToolbarOverride: ProvidableCompositionLocal<VerticalFloatingToolbarOverride>

CompositionLocal containing the currently-selected VerticalFloatingToolbarOverride.

LocalVerticalToolbarWithFabOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalVerticalToolbarWithFabOverride: ProvidableCompositionLocal<VerticalFloatingToolbarWithFabOverride>

CompositionLocal containing the currently-selected VerticalFloatingToolbarWithFabOverride.

LocalWideNavigationRailOverride

Cmn 
@ExperimentalMaterial3ComponentOverrideApi
val LocalWideNavigationRailOverride: ProvidableCompositionLocal<WideNavigationRailOverride>

CompositionLocal containing the currently-selected WideNavigationRailOverride.

MinimumInteractiveLeftAlignmentLine

Cmn 
val MinimumInteractiveLeftAlignmentLine: VerticalAlignmentLine

The vertical AlignmentLine that marks the left of the space added by Modifier.minimumInteractiveComponentSize to meet minimum touch target requirements.

When a component is smaller than the minimum interactive size (e.g., a 24.dp icon), Modifier.minimumInteractiveComponentSize expands its layout space to at least 48.dp. This alignment line is positioned at the left edge of the original component's visual bounds within that newly expanded space.

This allows other layouts to align to the visual left of the component, ignoring the extra touch-target spacing, which is useful for precise visual alignment.

Note that only a left alignment line are provided. The minimumInteractiveComponentSize centers its content and the space added to the left is symmetrical to the space added to the right, so its position can be inferred.

See also
minimumInteractiveComponentSize
MinimumInteractiveTopAlignmentLine

MinimumInteractiveTopAlignmentLine

Cmn 
val MinimumInteractiveTopAlignmentLine: HorizontalAlignmentLine

The horizontal AlignmentLine that marks the top of the space added by Modifier.minimumInteractiveComponentSize to meet minimum touch target requirements.

When a component is smaller than the minimum interactive size (e.g., a 24.dp icon), Modifier.minimumInteractiveComponentSize expands its layout space to at least 48.dp. This alignment line is positioned at the top edge of the original component's visual bounds within that newly expanded space.

This allows other layouts to align to the visual top of the component, ignoring the extra touch-target spacing, which is useful for precise visual alignment.

Note that only a top alignment line is provided. The minimumInteractiveComponentSize centers its content and the space added to the top is symmetrical to the space added to the bottom, so its position can be inferred.

See also
minimumInteractiveComponentSize
MinimumInteractiveLeftAlignmentLine

Extension properties

TimePickerState.isHourInputValid

Cmn 
val TimePickerState.isHourInputValid: Boolean

true if the current hourInput represents a valid hour (0-23).

TimePickerState.isInputValid

Cmn 
val TimePickerState.isInputValid: Boolean

true if the time input values are valid.

TimePickerState.isMinuteInputValid

Cmn 
val TimePickerState.isMinuteInputValid: Boolean

true if the current minuteInput represents a valid minute (0-59).

TimePickerState.isPm

Cmn 
val TimePickerState.isPm: Boolean

Indicates whether the selected time falls within the period from 12 PM inclusive to 12 AM non inclusive.