Google is committed to advancing racial equity for Black communities. See how.

androidx.compose.material

Interfaces

ElevationOverlay

An ElevationOverlay is an overlay applied to the background color of Surface components, used to emphasize elevation in dark theme, where shadows are not as visible.

Emphasis

Emphasis allows certain parts of a component to be accentuated, or shown with lower contrast to reflect importance / state inside a component.

EmphasisLevels

EmphasisLevels represents the different levels of Emphasis that can be applied to a component.

SnackbarData

Interface to represent one particular Snackbar as a piece of the SnackbarHostState

ThresholdConfig

Interface to compute a threshold between two anchors/states in a swipeable.

Classes

BackdropScaffoldState

State of the BackdropScaffold composable.

BottomDrawerState

State of the BottomDrawerLayout composable.

BottomSheetScaffoldState

State of the BottomSheetScaffold composable.

BottomSheetState

State of the persistent bottom sheet in BottomSheetScaffold.

Colors

Collection of colors in the Material color specification

DismissState

State of the SwipeToDismiss composable.

DrawerState

State of the ModalDrawerLayout composable.

FixedThreshold

A fixed threshold will be at an offset away from the first anchor.

FractionalThreshold

A fractional threshold will be at a fraction of the way between the two anchors.

ModalBottomSheetState

State of the ModalBottomSheetLayout composable.

ResistanceConfig

Specifies how resistance is calculated in swipeable.

ScaffoldState

State for Scaffold composable component.

Shapes

Components are grouped into shape categories based on their size.

SnackbarHostState

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

SwipeableState

State of the swipeable modifier.

SwipeProgress

Collects information about the ongoing swipe or animation in swipeable.

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.

Typography

Class holding typography definitions as defined by the Material typography specification.

Annotations

ExperimentalMaterialApi

Enums

BackdropValue

Possible values of BackdropScaffoldState.

BottomDrawerValue

Possible values of BottomDrawerState.

BottomSheetValue

Possible values of BottomSheetState.

DismissDirection

The directions in which a SwipeToDismiss can be dismissed.

DismissValue

Possible values of DismissState.

DrawerValue

Possible values of DrawerState.

FabPosition

The possible positions for a FloatingActionButton attached to a Scaffold.

ModalBottomSheetValue

Possible values of ModalBottomSheetState.

SnackbarDuration

Possible durations of the Snackbar in SnackbarHost

SnackbarResult

Possible results of the SnackbarHostState.showSnackbar call

Top-level constants summary

const Float

Top-level functions summary

Unit
AlertDialog(onDismissRequest: () -> Unit, confirmButton: () -> Unit, modifier: Modifier = Modifier, dismissButton: () -> Unit = null, title: () -> Unit = null, text: () -> Unit = null, shape: Shape = MaterialTheme.shapes.medium, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), properties: DialogProperties? = null)

Alert dialog is a Dialog which interrupts the user with urgent information, details or actions.

Unit
AlertDialog(onDismissRequest: () -> Unit, buttons: () -> Unit, modifier: Modifier = Modifier, title: () -> Unit = null, text: () -> Unit = null, shape: Shape = MaterialTheme.shapes.medium, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), properties: DialogProperties? = null)

Alert dialog is a Dialog which interrupts the user with urgent information, details or actions.

Unit
BackdropScaffold(modifier: Modifier = Modifier, scaffoldState: BackdropScaffoldState = rememberBackdropScaffoldState(Concealed), gesturesEnabled: Boolean = true, peekHeight: Dp = BackdropScaffoldConstants.DefaultPeekHeight, headerHeight: Dp = BackdropScaffoldConstants.DefaultHeaderHeight, persistentAppBar: Boolean = true, stickyFrontLayer: Boolean = true, backLayerBackgroundColor: Color = MaterialTheme.colors.primary, backLayerContentColor: Color = contentColorFor(backLayerBackgroundColor), frontLayerShape: Shape = BackdropScaffoldConstants.DefaultFrontLayerShape, frontLayerElevation: Dp = BackdropScaffoldConstants.DefaultFrontLayerElevation, frontLayerBackgroundColor: Color = MaterialTheme.colors.surface, frontLayerContentColor: Color = contentColorFor(frontLayerBackgroundColor), frontLayerScrimColor: Color = BackdropScaffoldConstants.DefaultFrontLayerScrimColor, snackbarHost: (SnackbarHostState) -> Unit = { SnackbarHost(it) }, appBar: () -> Unit, backLayerContent: () -> Unit, frontLayerContent: () -> Unit)

A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.

Unit
BottomAppBar(modifier: Modifier = Modifier, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), cutoutShape: Shape? = null, elevation: Dp = BottomAppBarElevation, content: RowScope.() -> Unit)

A BottomAppBar displays actions relating to the current screen and is placed at the bottom of the screen.

Unit
BottomDrawerLayout(drawerContent: ColumnScope.() -> Unit, modifier: Modifier = Modifier, drawerState: BottomDrawerState = rememberBottomDrawerState(BottomDrawerValue.Closed), gesturesEnabled: Boolean = true, drawerShape: Shape = MaterialTheme.shapes.large, drawerElevation: Dp = DrawerConstants.DefaultElevation, drawerBackgroundColor: Color = MaterialTheme.colors.surface, drawerContentColor: Color = contentColorFor(drawerBackgroundColor), scrimColor: Color = DrawerConstants.defaultScrimColor, bodyContent: () -> Unit)

Navigation drawers provide access to destinations in your app.

Unit
BottomNavigation(modifier: Modifier = Modifier, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), elevation: Dp = BottomNavigationElevation, content: RowScope.() -> Unit)

BottomNavigation is a component placed at the bottom of the screen that represents primary destinations in your application.

Unit
BottomNavigationItem(icon: () -> Unit, selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, label: () -> Unit = emptyContent(), alwaysShowLabels: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, selectedContentColor: Color = AmbientContentColor.current, unselectedContentColor: Color = AmbientEmphasisLevels.current.medium.applyEmphasis( selectedContentColor ))

A BottomNavigationItem represents a singular primary destination in your application.

Unit
BottomSheetScaffold(sheetContent: ColumnScope.() -> Unit, modifier: Modifier = Modifier, scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(), topBar: () -> Unit = null, snackbarHost: (SnackbarHostState) -> Unit = { SnackbarHost(it) }, floatingActionButton: () -> Unit = null, floatingActionButtonPosition: FabPosition = FabPosition.End, sheetGesturesEnabled: Boolean = true, sheetShape: Shape = MaterialTheme.shapes.large, sheetElevation: Dp = BottomSheetScaffoldConstants.DefaultSheetElevation, sheetBackgroundColor: Color = MaterialTheme.colors.surface, sheetContentColor: Color = contentColorFor(sheetBackgroundColor), sheetPeekHeight: Dp = BottomSheetScaffoldConstants.DefaultSheetPeekHeight, drawerContent: ColumnScope.() -> Unit = null, drawerGesturesEnabled: Boolean = true, drawerShape: Shape = MaterialTheme.shapes.large, drawerElevation: Dp = DrawerConstants.DefaultElevation, drawerBackgroundColor: Color = MaterialTheme.colors.surface, drawerContentColor: Color = contentColorFor(drawerBackgroundColor), drawerScrimColor: Color = DrawerConstants.defaultScrimColor, backgroundColor: Color = MaterialTheme.colors.background, contentColor: Color = contentColorFor(backgroundColor), bodyContent: (PaddingValues) -> Unit)

Standard bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting with both regions.

Unit
Button(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, elevation: Dp = ButtonConstants.animateDefaultElevation(interactionState, enabled), shape: Shape = MaterialTheme.shapes.small, border: BorderStroke? = null, backgroundColor: Color = ButtonConstants.defaultButtonBackgroundColor(enabled), contentColor: Color = ButtonConstants.defaultButtonContentColor( enabled, contentColorFor(backgroundColor) ), contentPadding: PaddingValues = ButtonConstants.DefaultContentPadding, content: RowScope.() -> Unit)

Material Design implementation of a Material Contained Button.

Unit
Card(modifier: Modifier = Modifier, shape: Shape = MaterialTheme.shapes.medium, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), border: BorderStroke? = null, elevation: Dp = 1.dp, content: () -> Unit)

Cards are Surfaces that display content and actions on a single topic.

Unit
Checkbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, checkedColor: Color = MaterialTheme.colors.secondary, uncheckedColor: Color = CheckboxConstants.defaultUncheckedColor)

A component that represents two states (checked / unchecked).

Unit
CircularProgressIndicator(@FloatRange(0.0, 1.0) progress: Float, modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, strokeWidth: Dp = ProgressIndicatorConstants.DefaultStrokeWidth)

A determinate circular progress indicator that represents progress by drawing an arc ranging from 0 to 360 degrees.

Unit
CircularProgressIndicator(modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, strokeWidth: Dp = ProgressIndicatorConstants.DefaultStrokeWidth)

An indeterminate circular progress indicator that represents continual progress without a defined start or end point.

Unit
Divider(modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha), thickness: Dp = 1.dp, startIndent: Dp = 0.dp)

A divider is a thin line that groups content in lists and layouts

Unit
DropdownMenu(toggle: () -> Unit, expanded: Boolean, onDismissRequest: () -> Unit, toggleModifier: Modifier = Modifier, dropdownOffset: Position = Position(0.dp, 0.dp), dropdownModifier: Modifier = Modifier, dropdownContent: ColumnScope.() -> Unit)

A Material Design dropdown menu.

Unit
DropdownMenuItem(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, content: () -> Unit)

A dropdown menu item, as defined by the Material Design spec.

Unit
ExtendedFloatingActionButton(text: () -> Unit, onClick: () -> Unit, modifier: Modifier = Modifier, icon: () -> Unit = null, interactionState: InteractionState = remember { InteractionState() }, shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)), backgroundColor: Color = MaterialTheme.colors.secondary, contentColor: Color = contentColorFor(backgroundColor), elevation: Dp = FloatingActionButtonConstants.animateDefaultElevation(interactionState))

A floating action button (FAB) is a button that represents the primary action of a screen.

Unit
FloatingActionButton(onClick: () -> Unit, modifier: Modifier = Modifier, interactionState: InteractionState = remember { InteractionState() }, shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)), backgroundColor: Color = MaterialTheme.colors.secondary, contentColor: Color = contentColorFor(backgroundColor), elevation: Dp = FloatingActionButtonConstants.animateDefaultElevation(interactionState), icon: () -> Unit)

A floating action button (FAB) is a button that represents the primary action of a screen.

Unit
IconButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, icon: () -> Unit)

IconButton is a clickable icon, used to represent actions.

Unit
IconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, icon: () -> Unit)

An IconButton with two states, for icons that can be toggled 'on' and 'off', such as a bookmark icon, or a navigation icon that opens a drawer.

Unit
LinearProgressIndicator(@FloatRange(0.0, 1.0) progress: Float, modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, backgroundColor: Color = color.copy(alpha = DefaultIndicatorBackgroundOpacity))

A determinate linear progress indicator that represents progress by drawing a horizontal line.

Unit
LinearProgressIndicator(modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, backgroundColor: Color = color.copy(alpha = DefaultIndicatorBackgroundOpacity))

An indeterminate linear progress indicator that represents continual progress without a defined start or end point.

Unit
ListItem(modifier: Modifier = Modifier, icon: () -> Unit = null, secondaryText: () -> Unit = null, singleLineSecondaryText: Boolean = true, overlineText: () -> Unit = null, trailing: () -> Unit = null, text: () -> Unit)

Material Design implementation of list items.

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

A MaterialTheme defines the styling principles from the Material design specification.

Unit
ModalBottomSheetLayout(sheetContent: ColumnScope.() -> Unit, modifier: Modifier = Modifier, sheetState: ModalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden), sheetShape: Shape = MaterialTheme.shapes.large, sheetElevation: Dp = ModalBottomSheetConstants.DefaultElevation, sheetBackgroundColor: Color = MaterialTheme.colors.surface, sheetContentColor: Color = contentColorFor(sheetBackgroundColor), scrimColor: Color = ModalBottomSheetConstants.DefaultScrimColor, content: () -> Unit)

Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen.

Unit
ModalDrawerLayout(drawerContent: ColumnScope.() -> Unit, modifier: Modifier = Modifier, drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed), gesturesEnabled: Boolean = true, drawerShape: Shape = MaterialTheme.shapes.large, drawerElevation: Dp = DrawerConstants.DefaultElevation, drawerBackgroundColor: Color = MaterialTheme.colors.surface, drawerContentColor: Color = contentColorFor(drawerBackgroundColor), scrimColor: Color = DrawerConstants.defaultScrimColor, bodyContent: () -> Unit)

Navigation drawers provide access to destinations in your app.

Unit
OutlinedButton(noinline onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, elevation: Dp = 0.dp, shape: Shape = MaterialTheme.shapes.small, border: BorderStroke? = ButtonConstants.defaultOutlinedBorder, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = ButtonConstants.defaultOutlinedButtonContentColor(enabled), contentPadding: PaddingValues = ButtonConstants.DefaultContentPadding, noinline content: RowScope.() -> Unit)

Material Design implementation of a Material Outlined Button.

Unit
OutlinedTextField(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, textStyle: TextStyle = AmbientTextStyle.current, label: () -> Unit = null, placeholder: () -> Unit = null, leadingIcon: () -> Unit = null, trailingIcon: () -> Unit = null, isErrorValue: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardType: KeyboardType = KeyboardType.Text, imeAction: ImeAction = ImeAction.Unspecified, onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> }, onTextInputStarted: (SoftwareKeyboardController) -> Unit = {}, interactionState: InteractionState = remember { InteractionState() }, activeColor: Color = MaterialTheme.colors.primary, inactiveColor: Color = MaterialTheme.colors.onSurface, errorColor: Color = MaterialTheme.colors.error)

Material Design implementation of an Outlined TextField

Unit
OutlinedTextField(value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, textStyle: TextStyle = AmbientTextStyle.current, label: () -> Unit = null, placeholder: () -> Unit = null, leadingIcon: () -> Unit = null, trailingIcon: () -> Unit = null, isErrorValue: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardType: KeyboardType = KeyboardType.Text, imeAction: ImeAction = ImeAction.Unspecified, onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> }, onTextInputStarted: (SoftwareKeyboardController) -> Unit = {}, interactionState: InteractionState = remember { InteractionState() }, activeColor: Color = MaterialTheme.colors.primary, inactiveColor: Color = MaterialTheme.colors.onSurface, errorColor: Color = MaterialTheme.colors.error)

Material Design implementation of an Outlined TextField

Unit
ProvideEmphasis(emphasis: Emphasis, content: () -> Unit)

Applies emphasis to content, by modifying the value of AmbientContentColor.

Unit
RadioButton(selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, color: Color = RadioButtonConstants.animateDefaultColor(selected, enabled))

Component to represent two states, selected and not selected.

Unit
Scaffold(modifier: Modifier = Modifier, scaffoldState: ScaffoldState = rememberScaffoldState(), topBar: () -> Unit = emptyContent(), bottomBar: () -> Unit = emptyContent(), snackbarHost: (SnackbarHostState) -> Unit = { SnackbarHost(it) }, floatingActionButton: () -> Unit = emptyContent(), floatingActionButtonPosition: FabPosition = FabPosition.End, isFloatingActionButtonDocked: Boolean = false, drawerContent: ColumnScope.() -> Unit = null, drawerGesturesEnabled: Boolean = true, drawerShape: Shape = MaterialTheme.shapes.large, drawerElevation: Dp = DrawerConstants.DefaultElevation, drawerBackgroundColor: Color = MaterialTheme.colors.surface, drawerContentColor: Color = contentColorFor(drawerBackgroundColor), drawerScrimColor: Color = DrawerConstants.defaultScrimColor, backgroundColor: Color = MaterialTheme.colors.background, contentColor: Color = contentColorFor(backgroundColor), bodyContent: (PaddingValues) -> Unit)

Scaffold implements the basic material design visual layout structure.

Unit
ScrollableTabRow(selectedTabIndex: Int, modifier: Modifier = Modifier, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), edgePadding: Dp = TabConstants.DefaultScrollableTabRowPadding, indicator: (tabPositions: List<TabPosition>) -> Unit = { tabPositions -> TabConstants.DefaultIndicator( Modifier.defaultTabIndicatorOffset(tabPositions[selectedTabIndex]) ) }, divider: () -> Unit = { TabConstants.DefaultDivider() }, tabs: () -> Unit)

A ScrollableTabRow contains a row of Tabs, and displays an indicator underneath the currently selected tab.

Unit
Slider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, @IntRange(0) steps: Int = 0, onValueChangeEnd: () -> Unit = {}, interactionState: InteractionState = remember { InteractionState() }, thumbColor: Color = MaterialTheme.colors.primary, activeTrackColor: Color = MaterialTheme.colors.primary, inactiveTrackColor: Color = activeTrackColor.copy(alpha = InactiveTrackColorAlpha), activeTickColor: Color = MaterialTheme.colors.onPrimary.copy(alpha = TickColorAlpha), inactiveTickColor: Color = activeTrackColor.copy(alpha = TickColorAlpha))

Sliders allow users to make selections from a range of values.

Unit
Snackbar(modifier: Modifier = Modifier, action: () -> Unit = null, actionOnNewLine: Boolean = false, shape: Shape = MaterialTheme.shapes.small, backgroundColor: Color = SnackbarConstants.defaultBackgroundColor, contentColor: Color = MaterialTheme.colors.surface, elevation: Dp = 6.dp, text: () -> Unit)

Snackbars provide brief messages about app processes at the bottom of the screen.

Unit
Snackbar(snackbarData: SnackbarData, modifier: Modifier = Modifier, actionOnNewLine: Boolean = false, shape: Shape = MaterialTheme.shapes.small, backgroundColor: Color = SnackbarConstants.defaultBackgroundColor, contentColor: Color = MaterialTheme.colors.surface, actionColor: Color = SnackbarConstants.defaultActionPrimaryColor, elevation: Dp = 6.dp)

Snackbars provide brief messages about app processes at the bottom of the screen.

Unit
SnackbarHost(hostState: SnackbarHostState, modifier: Modifier = Modifier, snackbar: (SnackbarData) -> Unit = { Snackbar(it) })

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

Unit
Surface(modifier: Modifier = Modifier, shape: Shape = RectangleShape, color: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(color), border: BorderStroke? = null, elevation: Dp = 0.dp, content: () -> Unit)

Material surface is the central metaphor in material design.

Unit
SwipeToDismiss(state: DismissState, modifier: Modifier = Modifier, directions: Set<DismissDirection> = setOf(EndToStart, StartToEnd), dismissThresholds: (DismissDirection) -> ThresholdConfig = { FractionalThreshold(0.5f) }, background: RowScope.() -> Unit, dismissContent: RowScope.() -> Unit)

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

Unit
Switch(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, color: Color = MaterialTheme.colors.secondaryVariant)

A Switch is a two state toggleable component that provides on/off like options

Unit
Tab(selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, text: () -> Unit = emptyContent(), icon: () -> Unit = emptyContent(), interactionState: InteractionState = remember { InteractionState() }, selectedContentColor: Color = AmbientContentColor.current, unselectedContentColor: Color = AmbientEmphasisLevels.current.medium.applyEmphasis( selectedContentColor ))

A Tab represents a single page of content using a text label and/or icon.

Unit
Tab(selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, interactionState: InteractionState = remember { InteractionState() }, selectedContentColor: Color = AmbientContentColor.current, unselectedContentColor: Color = AmbientEmphasisLevels.current.medium.applyEmphasis( selectedContentColor ), content: ColumnScope.() -> Unit)

Generic Tab overload that is not opinionated about content / color.

Unit
TabRow(selectedTabIndex: Int, modifier: Modifier = Modifier, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), indicator: (tabPositions: List<TabPosition>) -> Unit = { tabPositions -> TabConstants.DefaultIndicator( Modifier.defaultTabIndicatorOffset(tabPositions[selectedTabIndex]) ) }, divider: () -> Unit = { TabConstants.DefaultDivider() }, tabs: () -> Unit)

A TabRow contains a row of Tabs, and displays an indicator underneath the currently selected tab.

Unit
TextButton(noinline onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, elevation: Dp = 0.dp, shape: Shape = MaterialTheme.shapes.small, border: BorderStroke? = null, backgroundColor: Color = Color.Transparent, contentColor: Color = ButtonConstants.defaultTextButtonContentColor(enabled), contentPadding: PaddingValues = ButtonConstants.DefaultTextContentPadding, noinline content: RowScope.() -> Unit)

Material Design implementation of a Material Text Button.

Unit
TextField(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, textStyle: TextStyle = AmbientTextStyle.current, label: () -> Unit = null, placeholder: () -> Unit = null, leadingIcon: () -> Unit = null, trailingIcon: () -> Unit = null, isErrorValue: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardType: KeyboardType = KeyboardType.Text, imeAction: ImeAction = ImeAction.Unspecified, onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> }, onTextInputStarted: (SoftwareKeyboardController) -> Unit = {}, interactionState: InteractionState = remember { InteractionState() }, activeColor: Color = MaterialTheme.colors.primary, inactiveColor: Color = MaterialTheme.colors.onSurface, errorColor: Color = MaterialTheme.colors.error, backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContainerAlpha), shape: Shape = MaterialTheme.shapes.small.copy(bottomLeft = ZeroCornerSize, bottomRight = ZeroCornerSize))

Material Design implementation of a Filled TextField

Unit
TextField(value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, textStyle: TextStyle = AmbientTextStyle.current, label: () -> Unit = null, placeholder: () -> Unit = null, leadingIcon: () -> Unit = null, trailingIcon: () -> Unit = null, isErrorValue: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardType: KeyboardType = KeyboardType.Text, imeAction: ImeAction = ImeAction.Unspecified, onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> }, onTextInputStarted: (SoftwareKeyboardController) -> Unit = {}, interactionState: InteractionState = remember { InteractionState() }, activeColor: Color = MaterialTheme.colors.primary, inactiveColor: Color = MaterialTheme.colors.onSurface, errorColor: Color = MaterialTheme.colors.error, backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContainerAlpha), shape: Shape = MaterialTheme.shapes.small.copy(bottomLeft = ZeroCornerSize, bottomRight = ZeroCornerSize))

Material Design implementation of a Filled TextField

Unit
TopAppBar(title: () -> Unit, modifier: Modifier = Modifier, navigationIcon: () -> Unit = null, actions: RowScope.() -> Unit = {}, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), elevation: Dp = TopAppBarElevation)

A TopAppBar displays information and actions relating to the current screen and is placed at the top of the screen.

Unit
TopAppBar(modifier: Modifier = Modifier, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), elevation: Dp = TopAppBarElevation, content: RowScope.() -> Unit)

A TopAppBar displays information and actions relating to the current screen and is placed at the top of the screen.

Unit
TriStateCheckbox(state: ToggleableState, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, checkMarkColor: Color = CheckboxConstants.animateDefaultCheckmarkColor(state), boxColor: Color = CheckboxConstants.animateDefaultBoxColor(state, enabled), borderColor: Color = CheckboxConstants.animateDefaultBorderColor(state, enabled))

A TriStateCheckbox is a toggleable component that provides checked / unchecked / indeterminate options.

Color

Tries to match color to a color in the current Colors, and then returns the corresponding on color.

Colors
darkColors(primary: Color = Color(0xFFBB86FC), primaryVariant: Color = Color(0xFF3700B3), secondary: Color = Color(0xFF03DAC6), background: Color = Color(0xFF121212), surface: Color = Color(0xFF121212), error: Color = Color(0xFFCF6679), onPrimary: Color = Color.Black, onSecondary: Color = Color.Black, onBackground: Color = Color.White, onSurface: Color = Color.White, onError: Color = Color.Black)

Creates a complete color definition for the Material color specification using the default dark theme values.

Colors
lightColors(primary: Color = Color(0xFF6200EE), primaryVariant: Color = Color(0xFF3700B3), secondary: Color = Color(0xFF03DAC6), secondaryVariant: Color = Color(0xFF018786), background: Color = Color.White, surface: Color = Color.White, error: Color = Color(0xFFB00020), onPrimary: Color = Color.White, onSecondary: Color = Color.Black, onBackground: Color = Color.Black, onSurface: Color = Color.Black, onError: Color = Color.White)

Creates a complete color definition for the Material color specification using the default light theme values.

BackdropScaffoldState
rememberBackdropScaffoldState(initialValue: BackdropValue, clock: AnimationClockObservable = AnimationClockAmbient.current, animationSpec: AnimationSpec<Float> = SwipeableConstants.DefaultAnimationSpec, confirmStateChange: (BackdropValue) -> Boolean = { true }, snackbarHostState: SnackbarHostState = remember { SnackbarHostState() })

Create and remember a BackdropScaffoldState with the default animation clock.

BottomDrawerState
rememberBottomDrawerState(initialValue: BottomDrawerValue, confirmStateChange: (BottomDrawerValue) -> Boolean = { true })

Create and remember a BottomDrawerState with the default animation clock.

BottomSheetScaffoldState
rememberBottomSheetScaffoldState(drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed), bottomSheetState: BottomSheetState = rememberBottomSheetState(BottomSheetValue.Collapsed), snackbarHostState: SnackbarHostState = remember { SnackbarHostState() })

Create and remember a BottomSheetScaffoldState.

BottomSheetState
rememberBottomSheetState(initialValue: BottomSheetValue, animationSpec: AnimationSpec<Float> = SwipeableConstants.DefaultAnimationSpec, confirmStateChange: (BottomSheetValue) -> Boolean = { true })

Create a BottomSheetState and remember it.

DismissState
rememberDismissState(initialValue: DismissValue = Default, confirmStateChange: (DismissValue) -> Boolean = { true })

Create and remember a DismissState with the default animation clock.

DrawerState
rememberDrawerState(initialValue: DrawerValue, confirmStateChange: (DrawerValue) -> Boolean = { true })

Create and remember a DrawerState with the default animation clock.

ModalBottomSheetState
rememberModalBottomSheetState(initialValue: ModalBottomSheetValue, clock: AnimationClockObservable = AnimationClockAmbient.current, animationSpec: AnimationSpec<Float> = SwipeableConstants.DefaultAnimationSpec, confirmStateChange: (ModalBottomSheetValue) -> Boolean = { true })

Create a ModalBottomSheetState and remember it against the clock.

ScaffoldState
rememberScaffoldState(drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed), snackbarHostState: SnackbarHostState = remember { SnackbarHostState() })

Creates a ScaffoldState with the default animation clock and memoizes it.

SwipeableState<T>
rememberSwipeableState(initialValue: T, animationSpec: AnimationSpec<Float> = DefaultAnimationSpec, confirmStateChange: (newValue: T) -> Boolean = { true })

Create and remember a SwipeableState with the default animation clock.

Top-level properties summary

ProvidableAmbient<ElevationOverlay?>

Ambient containing the ElevationOverlay used by Surface components.

Ambient<EmphasisLevels>

Ambient containing the current EmphasisLevels in this hierarchy.

Extension functions summary

For AnimatedValue
Unit
AnimatedValue<Dp, *>.animateElevation(from: Interaction? = null, to: Interaction? = null, target: Dp)

Animates the Dp value of this between from and tos, to target.

For Colors
Color

Tries to match color to a color in this Colors, and then returns the corresponding on color.

For Modifier
Modifier
Modifier.swipeable(state: SwipeableState<T>, anchors: Map<Float, T>, orientation: Orientation, enabled: Boolean = true, reverseDirection: Boolean = false, interactionState: InteractionState? = null, thresholds: (from: T, to: T) -> ThresholdConfig = { _, _ -> FixedThreshold(56.dp) }, resistance: ResistanceConfig? = defaultResistanceConfig(anchors.keys), velocityThreshold: Dp = DefaultVelocityThreshold)

Enable swipe gestures between a set of predefined states.

Extension properties summary

For Colors
Color

primarySurface represents the background color of components that are Colors.primary in light theme, and Colors.surface in dark theme, such as androidx.compose.material.TabRow and androidx.compose.material.TopAppBar.

Top-level constants

ContainerAlpha

const val ContainerAlpha: Float
Value: 0.12f

Top-level functions

AlertDialog

@Composable fun AlertDialog(
    onDismissRequest: () -> Unit,
    confirmButton: () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: () -> Unit = null,
    title: () -> Unit = null,
    text: () -> Unit = null,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    properties: DialogProperties? = null
): Unit

Alert dialog is a Dialog which interrupts the user with urgent information, details or actions.

The dialog will position its buttons based on the available space. By default it will try to place them horizontally next to each other and fallback to horizontal placement if not enough space is available. There is also another version of this composable that has a slot for buttons to provide custom buttons layout.

Sample of dialog:

import androidx.compose.foundation.Text
import androidx.compose.material.AlertDialog
import androidx.compose.material.TextButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

val openDialog = remember { mutableStateOf(true) }

if (openDialog.value) {
    AlertDialog(
        onDismissRequest = {
            // Dismiss the dialog when the user clicks outside the dialog or on the back
            // button. If you want to disable that functionality, simply use an empty
            // onCloseRequest.
            openDialog.value = false
        },
        title = {
            Text(text = "Title")
        },
        text = {
            Text(
                "This area typically contains the supportive text " +
                    "which presents the details regarding the Dialog's purpose."
            )
        },
        confirmButton = {
            TextButton(
                onClick = {
                    openDialog.value = false
                }
            ) {
                Text("Confirm")
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    openDialog.value = false
                }
            ) {
                Text("Dismiss")
            }
        }
    )
}
Parameters
onDismissRequest: () -> Unit Executes when the user tries to dismiss the Dialog by clicking outside or pressing the back button. This is not called when the dismiss button is clicked.
confirmButton: () -> Unit A button which is meant to confirm a proposed action, thus resolving what triggered the dialog. The dialog does not set up any events for this button so they need to be set up by the caller.
modifier: Modifier = Modifier Modifier to be applied to the layout of the dialog.
dismissButton: () -> Unit = null A button which is meant to dismiss the dialog. The dialog does not set up any events for this button so they need to be set up by the caller.
title: () -> Unit = null The title of the Dialog which should specify the purpose of the Dialog. The title is not mandatory, because there may be sufficient information inside the text. Provided text style will be Typography.h6.
text: () -> Unit = null The text which presents the details regarding the Dialog's purpose. Provided text style will be Typography.body1.
shape: Shape = MaterialTheme.shapes.medium Defines the Dialog's shape
backgroundColor: Color = MaterialTheme.colors.surface The background color of the dialog.
contentColor: Color = contentColorFor(backgroundColor) The preferred content color provided by this dialog to its children.
properties: DialogProperties? = null Typically platform specific properties to further configure the dialog.

AlertDialog

@Composable fun AlertDialog(
    onDismissRequest: () -> Unit,
    buttons: () -> Unit,
    modifier: Modifier = Modifier,
    title: () -> Unit = null,
    text: () -> Unit = null,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    properties: DialogProperties? = null
): Unit

Alert dialog is a Dialog which interrupts the user with urgent information, details or actions.

This function can be used to fully customize the button area, e.g. with:

import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.AlertDialog
import androidx.compose.material.Button
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

val openDialog = remember { mutableStateOf(true) }

if (openDialog.value) {
    AlertDialog(
        onDismissRequest = {
            openDialog.value = false
        },
        title = {
            Text(text = "Title")
        },
        text = {
            Text(
                "This area typically contains the supportive text " +
                    "which presents the details regarding the Dialog's purpose."
            )
        },
        buttons = {
            Row(
                modifier = Modifier.padding(all = 8.dp),
                horizontalArrangement = Arrangement.Center
            ) {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = { openDialog.value = false }
                ) {
                    Text("Dismiss")
                }
            }
        }
    )
}
Parameters
onDismissRequest: () -> Unit Executes when the user tries to dismiss the Dialog by clicking outside or pressing the back button. This is not called when the dismiss button is clicked.
buttons: () -> Unit Function that emits the layout with the buttons.
modifier: Modifier = Modifier Modifier to be applied to the layout of the dialog.
title: () -> Unit = null The title of the Dialog which should specify the purpose of the Dialog. The title is not mandatory, because there may be sufficient information inside the text. Provided text style will be Typography.h6.
text: () -> Unit = null The text which presents the details regarding the Dialog's purpose. Provided text style will be Typography.body1.
shape: Shape = MaterialTheme.shapes.medium Defines the Dialog's shape.
backgroundColor: Color = MaterialTheme.colors.surface The background color of the dialog.
contentColor: Color = contentColorFor(backgroundColor) The preferred content color provided by this dialog to its children.
properties: DialogProperties? = null Typically platform specific properties to further configure the dialog.

BackdropScaffold

@Composable fun BackdropScaffold(
    modifier: Modifier = Modifier,
    scaffoldState: BackdropScaffoldState = rememberBackdropScaffoldState(Concealed),
    gesturesEnabled: Boolean = true,
    peekHeight: Dp = BackdropScaffoldConstants.DefaultPeekHeight,
    headerHeight: Dp = BackdropScaffoldConstants.DefaultHeaderHeight,
    persistentAppBar: Boolean = true,
    stickyFrontLayer: Boolean = true,
    backLayerBackgroundColor: Color = MaterialTheme.colors.primary,
    backLayerContentColor: Color = contentColorFor(backLayerBackgroundColor),
    frontLayerShape: Shape = BackdropScaffoldConstants.DefaultFrontLayerShape,
    frontLayerElevation: Dp = BackdropScaffoldConstants.DefaultFrontLayerElevation,
    frontLayerBackgroundColor: Color = MaterialTheme.colors.surface,
    frontLayerContentColor: Color = contentColorFor(frontLayerBackgroundColor),
    frontLayerScrimColor: Color = BackdropScaffoldConstants.DefaultFrontLayerScrimColor,
    snackbarHost: (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    appBar: () -> Unit,
    backLayerContent: () -> Unit,
    frontLayerContent: () -> Unit
): Unit

A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content. It is composed of two surfaces: a back layer and a front layer. The back layer displays actions and context, and these control and inform the front layer's content.

This component provides an API to put together several material components to construct your screen. For a similar component which implements the basic material design layout strategy with app bars, floating action buttons and navigation drawers, use the standard Scaffold. For similar component that uses a bottom sheet as the centerpiece of the screen, use BottomSheetScaffold.

Either the back layer or front layer can be active at a time. When the front layer is active, it sits at an offset below the top of the screen. This is the peekHeight and defaults to 56dp which is the default app bar height. When the front layer is inactive, it sticks to the height of the back layer's content if stickyFrontLayer is set to true and the height of the front layer exceeds the headerHeight, and otherwise it minimizes to the headerHeight. To switch between the back layer and front layer, you can either swipe on the front layer if gesturesEnabled is set to true or use any of the methods in BackdropScaffoldState.

The scaffold also contains an app bar, which by default is placed above the back layer's content. If persistentAppBar is set to false, then the backdrop will not show the app bar when the back layer is revealed; instead it will switch between the app bar and the provided content with an animation. For best results, the peekHeight should match the app bar height. To show a snackbar, use the method showSnackbar of BackdropScaffoldState.snackbarHostState.

A simple example of a backdrop scaffold looks like this:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.Icon
import androidx.compose.foundation.Text
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumnFor
import androidx.compose.material.BackdropScaffold
import androidx.compose.material.IconButton
import androidx.compose.material.ListItem
import androidx.compose.material.TopAppBar
import androidx.compose.material.rememberBackdropScaffoldState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope

val scope = rememberCoroutineScope()
val selection = remember { mutableStateOf(1) }
val scaffoldState = rememberBackdropScaffoldState(BackdropValue.Concealed)
BackdropScaffold(
    scaffoldState = scaffoldState,
    appBar = {
        TopAppBar(
            title = { Text("Backdrop scaffold") },
            navigationIcon = {
                if (scaffoldState.isConcealed) {
                    IconButton(onClick = { scaffoldState.reveal() }) {
                        Icon(Icons.Default.Menu)
                    }
                } else {
                    IconButton(onClick = { scaffoldState.conceal() }) {
                        Icon(Icons.Default.Close)
                    }
                }
            },
            actions = {
                var clickCount by remember { mutableStateOf(0) }
                IconButton(
                    onClick = {
                        // show snackbar as a suspend function
                        scope.launch {
                            scaffoldState.snackbarHostState
                                .showSnackbar("Snackbar #${++clickCount}")
                        }
                    }
                ) {
                    Icon(Icons.Default.Favorite)
                }
            },
            elevation = 0.dp,
            backgroundColor = Color.Transparent
        )
    },
    backLayerContent = {
        LazyColumnFor((1..5).toList()) {
            ListItem(
                Modifier.clickable {
                    selection.value = it
                    scaffoldState.conceal()
                },
                text = { Text("Select $it") }
            )
        }
    },
    frontLayerContent = {
        Box(
            Modifier.fillMaxSize(),
            alignment = Alignment.Center
        ) {
            Text("Selection: ${selection.value}")
        }
    }
)
Parameters
modifier: Modifier = Modifier Optional Modifier for the root of the scaffold.
scaffoldState: BackdropScaffoldState = rememberBackdropScaffoldState(Concealed) The state of the scaffold.
gesturesEnabled: Boolean = true Whether or not the backdrop can be interacted with by gestures.
peekHeight: Dp = BackdropScaffoldConstants.DefaultPeekHeight The height of the visible part of the back layer when it is concealed.
headerHeight: Dp = BackdropScaffoldConstants.DefaultHeaderHeight The minimum height of the front layer when it is inactive.
persistentAppBar: Boolean = true Whether the app bar should be shown when the back layer is revealed. By default, it will always be shown above the back layer's content. If this is set to false, the back layer will automatically switch between the app bar and its content with an animation.
stickyFrontLayer: Boolean = true Whether the front layer should stick to the height of the back layer.
backLayerBackgroundColor: Color = MaterialTheme.colors.primary The background color of the back layer.
backLayerContentColor: Color = contentColorFor(backLayerBackgroundColor) The preferred content color provided by the back layer to its children. Defaults to the matching onFoo color for backLayerBackgroundColor, or if that is not a color from the theme, this will keep the same content color set above the back layer.
frontLayerShape: Shape = BackdropScaffoldConstants.DefaultFrontLayerShape The shape of the front layer.
frontLayerElevation: Dp = BackdropScaffoldConstants.DefaultFrontLayerElevation The elevation of the front layer.
frontLayerBackgroundColor: Color = MaterialTheme.colors.surface The background color of the front layer.
frontLayerContentColor: Color = contentColorFor(frontLayerBackgroundColor) The preferred content color provided by the back front to its children. Defaults to the matching onFoo color for frontLayerBackgroundColor, or if that is not a color from the theme, this will keep the same content color set above the front layer.
frontLayerScrimColor: Color = BackdropScaffoldConstants.DefaultFrontLayerScrimColor The color of the scrim applied to the front layer when the back layer is revealed. If you set this to Color.Transparent, then a scrim will not be applied and interaction with the front layer will not be blocked when the back layer is revealed.
snackbarHost: (SnackbarHostState) -> Unit = { SnackbarHost(it) } The component hosting the snackbars shown inside the scaffold.
appBar: () -> Unit App bar for the back layer. Make sure that the peekHeight is equal to the height of the app bar, so that the app bar is fully visible. Consider using TopAppBar but set the elevation to 0dp and background color to transparent as a surface is already provided.
backLayerContent: () -> Unit The content of the back layer.
frontLayerContent: () -> Unit The content of the front layer.

BottomAppBar

@Composable fun BottomAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    cutoutShape: Shape? = null,
    elevation: Dp = BottomAppBarElevation,
    content: RowScope.() -> Unit
): Unit

A BottomAppBar displays actions relating to the current screen and is placed at the bottom of the screen. It can also optionally display a FloatingActionButton, which is either overlaid on top of the BottomAppBar, or inset, carving a cutout in the BottomAppBar.

See BottomAppBar anatomy for the recommended content depending on the FloatingActionButton position.

import androidx.compose.foundation.Icon
import androidx.compose.foundation.layout.Spacer
import androidx.compose.material.BottomAppBar
import androidx.compose.material.IconButton

BottomAppBar {
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Menu)
    }
    // The actions should be at the end of the BottomAppBar
    Spacer(Modifier.weight(1f, true))
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Favorite)
    }
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Favorite)
    }
}
Parameters
backgroundColor: Color = MaterialTheme.colors.primarySurface The background color for the BottomAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(backgroundColor) The preferred content color provided by this BottomAppBar to its children. Defaults to either the matching onFoo color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this BottomAppBar.
cutoutShape: Shape? = null the shape of the cutout that will be added to the BottomAppBar - this should typically be the same shape used inside the FloatingActionButton, when BottomAppBar and FloatingActionButton are being used together in Scaffold. This shape will be drawn with an offset around all sides. If null, where will be no cutout.
elevation: Dp = BottomAppBarElevation the elevation of this BottomAppBar.
content: RowScope.() -> Unit the content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.

BottomDrawerLayout

@Composable fun BottomDrawerLayout(
    drawerContent: ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    drawerState: BottomDrawerState = rememberBottomDrawerState(BottomDrawerValue.Closed),
    gesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerConstants.DefaultElevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    scrimColor: Color = DrawerConstants.defaultScrimColor,
    bodyContent: () -> Unit
): Unit

Navigation drawers provide access to destinations in your app.

Bottom navigation drawers are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.

These drawers open upon tapping the navigation menu icon in the bottom app bar. They are only for use on mobile.

See ModalDrawerLayout for a layout that introduces a classic from-the-side drawer.

import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.preferredHeight
import androidx.compose.material.BottomDrawerLayout
import androidx.compose.material.Button
import androidx.compose.material.rememberBottomDrawerState

val drawerState = rememberBottomDrawerState(BottomDrawerValue.Closed)
BottomDrawerLayout(
    drawerState = drawerState,
    drawerContent = {
        Button(
            modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 16.dp),
            onClick = { drawerState.close() },
            content = { Text("Close Drawer") }
        )
    },
    bodyContent = {
        Column(
            modifier = Modifier.fillMaxSize().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = if (drawerState.isClosed) "▲▲▲ Pull up ▲▲▲" else "▼▼▼ Drag down ▼▼▼")
            Spacer(Modifier.preferredHeight(20.dp))
            Button(onClick = { drawerState.open() }) {
                Text("Click to open")
            }
        }
    }
)
Parameters
drawerState: BottomDrawerState = rememberBottomDrawerState(BottomDrawerValue.Closed) state of the drawer
modifier: Modifier = Modifier optional modifier for the drawer
gesturesEnabled: Boolean = true whether or not drawer can be interacted by gestures
drawerShape: Shape = MaterialTheme.shapes.large shape of the drawer sheet
drawerElevation: Dp = DrawerConstants.DefaultElevation drawer sheet elevation. This controls the size of the shadow below the drawer sheet
drawerContent: ColumnScope.() -> Unit composable that represents content inside the drawer
drawerBackgroundColor: Color = MaterialTheme.colors.surface background color to be used for the drawer sheet
drawerContentColor: Color = contentColorFor(drawerBackgroundColor) color of the content to use inside the drawer sheet. Defaults to either the matching onFoo color for drawerBackgroundColor, or, if it is not a color from the theme, this will keep the same value set above this Surface.
scrimColor: Color = DrawerConstants.defaultScrimColor color of the scrim that obscures content when the drawer is open
bodyContent: () -> Unit content of the rest of the UI
Exceptions
IllegalStateException when parent has Float.POSITIVE_INFINITY height

BottomNavigation

@Composable fun BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationElevation,
    content: RowScope.() -> Unit
): Unit

BottomNavigation is a component placed at the bottom of the screen that represents primary destinations in your application.

BottomNavigation should contain multiple BottomNavigationItems, each representing a singular destination.

A simple example looks like:

import androidx.compose.foundation.Icon
import androidx.compose.foundation.Text
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")

BottomNavigation {
    items.forEachIndexed { index, item ->
        BottomNavigationItem(
            icon = { Icon(Icons.Filled.Favorite) },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index }
        )
    }
}

See BottomNavigationItem for configuration specific to each item, and not the overall BottomNavigation component.

For more information, see Bottom Navigation

Parameters
modifier: Modifier = Modifier optional Modifier for this BottomNavigation
backgroundColor: Color = MaterialTheme.colors.primarySurface The background color for this BottomNavigation
contentColor: Color = contentColorFor(backgroundColor) The preferred content color provided by this BottomNavigation to its children. Defaults to either the matching onFoo color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this BottomNavigation.
elevation: Dp = BottomNavigationElevation elevation for this BottomNavigation
content: RowScope.() -> Unit destinations inside this BottomNavigation, this should contain multiple BottomNavigationItems

BottomNavigationItem

@Composable fun BottomNavigationItem(
    icon: () -> Unit,
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    label: () -> Unit = emptyContent(),
    alwaysShowLabels: Boolean = true,
    interactionState: InteractionState = remember { InteractionState() },
    selectedContentColor: Color = AmbientContentColor.current,
    unselectedContentColor: Color = AmbientEmphasisLevels.current.medium.applyEmphasis( selectedContentColor )
): Unit

A BottomNavigationItem represents a singular primary destination in your application.

The recommended configuration for a BottomNavigationItem depends on how many items there are inside a BottomNavigation:

  • Three destinations: Display icons and text labels for all destinations.
  • Four destinations: Active destinations display an icon and text label. Inactive destinations display icons, and text labels are recommended.
  • Five destinations: Active destinations display an icon and text label. Inactive destinations use icons, and use text labels if space permits.

A BottomNavigationItem always shows text labels (if it exists) when selected. Showing text labels if not selected is controlled by alwaysShowLabels.

Parameters
icon: () -> Unit icon for this item, typically this will be a androidx.compose.foundation.Icon
selected: Boolean whether this item is selected
onClick: () -> Unit the callback to be invoked when this item is selected
modifier: Modifier = Modifier optional Modifier for this item
label: () -> Unit = emptyContent() optional text label for this item
alwaysShowLabels: Boolean = true whether to always show labels for this item. If false, labels will only be shown when this item is selected.
interactionState: InteractionState = remember { InteractionState() } the InteractionState representing the different Interactions present on this BottomNavigationItem. You can create and pass in your own remembered InteractionState if you want to read the InteractionState and customize the appearance / behavior of this BottomNavigationItem in different Interactions.
selectedContentColor: Color = AmbientContentColor.current the color of the text label and icon when this item is selected, and the color of the ripple.
unselectedContentColor: Color = AmbientEmphasisLevels.current.medium.applyEmphasis( selectedContentColor ) the color of the text label and icon when this item is not selected

BottomSheetScaffold

@Composable fun BottomSheetScaffold(
    sheetContent: ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
    topBar: () -> Unit = null,
    snackbarHost: (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: () -> Unit = null,
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    sheetGesturesEnabled: Boolean = true,
    sheetShape: Shape = MaterialTheme.shapes.large,
    sheetElevation: Dp = BottomSheetScaffoldConstants.DefaultSheetElevation,
    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
    sheetPeekHeight: Dp = BottomSheetScaffoldConstants.DefaultSheetPeekHeight,
    drawerContent: ColumnScope.() -> Unit = null,
    drawerGesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerConstants.DefaultElevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    drawerScrimColor: Color = DrawerConstants.defaultScrimColor,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    bodyContent: (PaddingValues) -> Unit
): Unit

Standard bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting with both regions. They are commonly used to keep a feature or secondary content visible on screen when content in main UI region is frequently scrolled or panned.

This component provides an API to put together several material components to construct your screen. For a similar component which implements the basic material design layout strategy with app bars, floating action buttons and navigation drawers, use the standard Scaffold. For similar component that uses a backdrop as the centerpiece of the screen, use BackdropScaffold.

A simple example of a bottom sheet scaffold looks like this:

import androidx.compose.foundation.Icon
import androidx.compose.foundation.ScrollableColumn
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.preferredHeight
import androidx.compose.material.BottomSheetScaffold
import androidx.compose.material.Button
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.IconButton
import androidx.compose.material.TopAppBar
import androidx.compose.material.rememberBottomSheetScaffoldState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope

val scope = rememberCoroutineScope()
val scaffoldState = rememberBottomSheetScaffoldState()
BottomSheetScaffold(
    sheetContent = {
        Box(
            Modifier.fillMaxWidth().preferredHeight(128.dp),
            alignment = Alignment.Center
        ) {
            Text("Swipe up to expand sheet")
        }
        Column(
            Modifier.fillMaxWidth().padding(64.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Sheet content")
            Spacer(Modifier.preferredHeight(20.dp))
            Button(onClick = { scaffoldState.bottomSheetState.collapse() }) {
                Text("Click to collapse sheet")
            }
        }
    },
    scaffoldState = scaffoldState,
    topBar = {
        TopAppBar(
            title = { Text("Bottom sheet scaffold") },
            navigationIcon = {
                IconButton(onClick = { scaffoldState.drawerState.open() }) {
                    Icon(Icons.Default.Menu)
                }
            }
        )
    },
    floatingActionButton = {
        var clickCount by remember { mutableStateOf(0) }
        FloatingActionButton(
            onClick = {
                // show snackbar as a suspend function
                scope.launch {
                    scaffoldState.snackbarHostState.showSnackbar("Snackbar #${++clickCount}")
                }
            }
        ) {
            Icon(Icons.Default.Favorite)
        }
    },
    floatingActionButtonPosition = FabPosition.End,
    sheetPeekHeight = 128.dp,
    drawerContent = {
        Column(
            Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Drawer content")
            Spacer(Modifier.preferredHeight(20.dp))
            Button(onClick = { scaffoldState.drawerState.close() }) {
                Text("Click to close drawer")
            }
        }
    }
) { innerPadding ->
    ScrollableColumn(contentPadding = innerPadding) {
        repeat(100) {
            Box(
                Modifier
                    .fillMaxWidth()
                    .preferredHeight(50.dp)
                    .background(colors[it % colors.size])
            )
        }
    }
}
Parameters
sheetContent: ColumnScope.() -> Unit The content of the bottom sheet.
modifier: Modifier = Modifier An optional Modifier for the root of the scaffold.
scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState() The state of the scaffold.
topBar: () -> Unit = null An optional top app bar.
snackbarHost: (SnackbarHostState) -> Unit = { SnackbarHost(it) } The composable hosting the snackbars shown inside the scaffold.
floatingActionButton: () -> Unit = null An optional floating action button.
floatingActionButtonPosition: FabPosition = FabPosition.End The position of the floating action button.
sheetGesturesEnabled: Boolean = true Whether the bottom sheet can be interacted with by gestures.
sheetShape: Shape = MaterialTheme.shapes.large The shape of the bottom sheet.
sheetElevation: Dp = BottomSheetScaffoldConstants.DefaultSheetElevation The elevation of the bottom sheet.
sheetBackgroundColor: Color = MaterialTheme.colors.surface The background color of the bottom sheet.
sheetContentColor: Color = contentColorFor(sheetBackgroundColor) The preferred content color provided by the bottom sheet to its children. Defaults to the matching onFoo color for sheetBackgroundColor, or if that is not a color from the theme, this will keep the same content color set above the bottom sheet.
sheetPeekHeight: Dp = BottomSheetScaffoldConstants.DefaultSheetPeekHeight The height of the bottom sheet when it is collapsed.
drawerContent: ColumnScope.() -> Unit = null The content of the drawer sheet.
drawerGesturesEnabled: Boolean = true Whether the drawer sheet can be interacted with by gestures.
drawerShape: Shape = MaterialTheme.shapes.large The shape of the drawer sheet.
drawerElevation: Dp = DrawerConstants.DefaultElevation The elevation of the drawer sheet.
drawerBackgroundColor: Color = MaterialTheme.colors.surface The background color of the drawer sheet.
drawerContentColor: Color = contentColorFor(drawerBackgroundColor) The preferred content color provided by the drawer sheet to its children. Defaults to the matching onFoo color for drawerBackgroundColor, or if that is not a color from the theme, this will keep the same content color set above the drawer sheet.
drawerScrimColor: Color = DrawerConstants.defaultScrimColor The color of the scrim that is applied when the drawer is open.
bodyContent: (PaddingValues) -> Unit The main content of the screen. You should use the provided PaddingValues to properly offset the content, so that it is not obstructed by the bottom sheet when collapsed.

Button

@Composable fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionState: InteractionState = remember { InteractionState() },
    elevation: Dp = ButtonConstants.animateDefaultElevation(interactionState, enabled),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    backgroundColor: Color = ButtonConstants.defaultButtonBackgroundColor(enabled),
    contentColor: Color = ButtonConstants.defaultButtonContentColor( enabled, contentColorFor(backgroundColor) ),
    contentPadding: PaddingValues = ButtonConstants.DefaultContentPadding,
    content: RowScope.() -> Unit
): Unit

Material Design implementation of a Material Contained Button.

Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

To make a button clickable, you must provide an onClick. If no onClick is provided, this button will display itself as disabled.

The default text style for internal Text components will be set to Typography.button. Text color will try to match the correlated color for the background color. For example if the background color is set to Colors.primary then the text will by default use Colors.onPrimary.

import androidx.compose.foundation.Text
import androidx.compose.material.Button

Button(onClick = { /* Do something! */ }) {
    Text("Button")
}
If you need to add an icon just put it inside the content slot together with a spacingand a text:
import androidx.compose.foundation.Icon
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button

Button(onClick = { /* Do something! */ }) {
    Icon(Icons.Filled.Favorite, Modifier.size(ButtonConstants.DefaultIconSize))
    Spacer(Modifier.size(ButtonConstants.DefaultIconSpacing))
    Text("Like")
}
Parameters
onClick: () -> Unit Will be called when the user clicks the button
modifier: Modifier = Modifier Modifier to be applied to the button
enabled: Boolean = true Controls the enabled state of the button. When false, this button will not be clickable
interactionState: InteractionState = remember { InteractionState() } the InteractionState representing the different Interactions present on this Button. You can create and pass in your own remembered InteractionState if you want to read the InteractionState and customize the appearance / behavior of this Button in different Interactions, such as customizing how the elevation of this Button changes when it is Interaction.Pressed.
elevation: Dp = ButtonConstants.animateDefaultElevation(interactionState, enabled) The z-coordinate at which to place this button. This controls the size of the shadow below the button. See ButtonConstants.animateDefaultElevation for the default elevation that animates between Interactions.
shape: Shape = MaterialTheme.shapes.small Defines the button's shape as well as its shadow
border: BorderStroke? = null Border to draw around the button
backgroundColor: Color = ButtonConstants.defaultButtonBackgroundColor(enabled) The background color. Use Color.Transparent to have no color
contentColor: Color = ButtonConstants.defaultButtonContentColor( enabled, contentColorFor(backgroundColor) ) The preferred content color. Will be used by text and iconography
contentPadding: PaddingValues = ButtonConstants.DefaultContentPadding The spacing values to apply internally between the container and the content

Card

@Composable fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.medium,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    border: BorderStroke? = null,
    elevation: Dp = 1.dp,
    content: () -> Unit
): Unit

Cards are Surfaces that display content and actions on a single topic.

import androidx.compose.foundation.Text
import androidx.compose.material.Card

Card {
    Text("Card Content")
}
Parameters
modifier: Modifier = Modifier Modifier to be applied to the layout of the card.
shape: Shape = MaterialTheme.shapes.medium Defines the surface's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.
backgroundColor: Color = MaterialTheme.colors.surface The background color.
contentColor: Color = contentColorFor(backgroundColor) The preferred content color provided by this Surface to its children. Defaults to either the matching onFoo color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this Surface.
border: BorderStroke? = null Optional border to draw on top of the card
elevation: Dp = 1.dp The z-coordinate at which to place this surface. This controls the size of the shadow below the surface.

Checkbox

@Composable fun Checkbox(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionState: InteractionState = remember { InteractionState() },
    checkedColor: Color = MaterialTheme.colors.secondary,
    uncheckedColor: Color = CheckboxConstants.defaultUncheckedColor
): Unit

A component that represents two states (checked / unchecked).

import androidx.compose.material.Checkbox
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

val checkedState = remember { mutableStateOf(true) }
Checkbox(
    checked = checkedState.value,
    onCheckedChange = { checkedState.value = it }
)

See Also

Parameters
checked: Boolean whether Checkbox is checked or unchecked
onCheckedChange: (Boolean) -> Unit callback to be invoked when checkbox is being clicked, therefore the change of checked state in requested.
modifier: Modifier = Modifier Modifier to be applied to the layout of the checkbox
enabled: Boolean = true enabled whether or not this Checkbox will handle input events and appear enabled for semantics purposes
interactionState: InteractionState = remember { InteractionState() } the InteractionState representing the different Interactions present on this Checkbox. You can create and pass in your own remembered InteractionState if you want to read the InteractionState and customize the appearance / behavior of this Checkbox in different Interactions.
checkedColor: Color = MaterialTheme.colors.secondary color of the box of the Checkbox when checked. See TriStateCheckbox to fully customize the color of the checkmark / box / border in different states.
uncheckedColor: Color = CheckboxConstants.defaultUncheckedColor color of the border of the Checkbox when not checked. See TriStateCheckbox to fully customize the color of the checkmark / box / border in different states.

CircularProgressIndicator

@Composable fun CircularProgressIndicator(
    @FloatRange(0.0, 1.0) progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorConstants.DefaultStrokeWidth
): Unit

A determinate circular progress indicator that represents progress by drawing an arc ranging from 0 to 360 degrees.

By default there is no animation between progress values. You can use ProgressIndicatorConstants.DefaultProgressAnimationSpec as the default recommended AnimationSpec when animating progress, such as in the following example:

import androidx.compose.animation.animate
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.OutlinedButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var progress by remember { mutableStateOf(0.1f) }
val animatedProgress = animate(
    target = progress,
    animSpec = ProgressIndicatorConstants.DefaultProgressAnimationSpec
)

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    CircularProgressIndicator(progress = animatedProgress)
    Spacer(Modifier.height(30.dp))
    OutlinedButton(
        onClick = {
            if (progress < 1f) progress += 0.1f
        }
    ) {
        Text("Increase")
    }
}
Parameters
progress: Float The progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range.
color: Color = MaterialTheme.colors.primary The color of the progress indicator.
strokeWidth: Dp = ProgressIndicatorConstants.DefaultStrokeWidth The stroke width for the progress indicator.

CircularProgressIndicator

@Composable fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorConstants.DefaultStrokeWidth
): Unit

An indeterminate circular progress indicator that represents continual progress without a defined start or end point.

Parameters
color: Color = MaterialTheme.colors.primary The color of the progress indicator.
strokeWidth: Dp = ProgressIndicatorConstants.DefaultStrokeWidth The stroke width for the progress indicator.

Divider

@Composable fun Divider(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
    thickness: Dp = 1.dp,
    startIndent: Dp = 0.dp
): Unit

A divider is a thin line that groups content in lists and layouts

Parameters
color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha) color of the divider line
thickness: Dp = 1.dp thickness of the divider line, 1 dp is used by default
startIndent: Dp = 0.dp start offset of this line, no offset by default
@Composable fun DropdownMenu(
    toggle: () -> Unit,
    expanded: Boolean,
    onDismissRequest: () -> Unit,
    toggleModifier: Modifier = Modifier,
    dropdownOffset: Position = Position(0.dp, 0.dp),