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

androidx.compose.material

Interfaces

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.

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.

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.

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.

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))

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))

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

Unit
BackdropScaffold(modifier: Modifier = Modifier, backdropScaffoldState: BackdropScaffoldState = rememberBackdropState(Concealed), gesturesEnabled: Boolean = true, peekHeight: Dp = BackdropConstants.DefaultPeekHeight, headerHeight: Dp = BackdropConstants.DefaultHeaderHeight, persistentAppBar: Boolean = true, stickyFrontLayer: Boolean = true, backLayerBackgroundColor: Color = MaterialTheme.colors.primary, backLayerContentColor: Color = contentColorFor(backLayerBackgroundColor), frontLayerShape: Shape = BackdropConstants.DefaultFrontLayerShape, frontLayerElevation: Dp = BackdropConstants.DefaultFrontLayerElevation, frontLayerBackgroundColor: Color = MaterialTheme.colors.surface, frontLayerContentColor: Color = contentColorFor(frontLayerBackgroundColor), frontLayerScrimColor: Color = BackdropConstants.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 = MaterialTheme.colors.onSurface .copy(alpha = DrawerConstants.ScrimDefaultOpacity), 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 = contentColor(), unselectedContentColor: Color = EmphasisAmbient.current.medium.applyEmphasis( selectedContentColor ))

A BottomNavigationItem represents a singular primary destination in your application.

Unit
Button(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, elevation: Dp = ButtonConstants.defaultAnimatedElevation(interactionState, enabled).value, 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, checkedColor: Color = MaterialTheme.colors.secondary, uncheckedColor: Color = MaterialTheme.colors.onSurface, disabledColor: Color = MaterialTheme.colors.onSurface, checkMarkColor: Color = MaterialTheme.colors.surface)

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, 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.defaultAnimatedElevation(interactionState).value)

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.defaultAnimatedElevation(interactionState).value, 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, icon: () -> Unit)

IconButton is a clickable icon, used to represent actions.

Unit
IconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, 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
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 = MaterialTheme.colors.onSurface .copy(alpha = DrawerConstants.ScrimDefaultOpacity), 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 = currentTextStyle(), 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 = {}, 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 = currentTextStyle(), 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 = {}, 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 contentColor.

Unit
RadioButton(selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, selectedColor: Color = MaterialTheme.colors.secondary, unselectedColor: Color = RadioButtonConstants.defaultUnselectedColor, disabledColor: Color = RadioButtonConstants.defaultDisabledColor)

Component to represent two states, selected and not selected.

Unit
Scaffold(modifier: Modifier = Modifier, scaffoldState: ScaffoldState = rememberScaffoldState(), topBar: () -> Unit = null, bottomBar: () -> Unit = null, snackbarHost: (SnackbarHostState) -> Unit = { SnackbarHost(it) }, floatingActionButton: () -> Unit = null, floatingActionButtonPosition: FabPosition = FabPosition.End, isFloatingActionButtonDocked: Boolean = false, drawerContent: ColumnScope.() -> Unit = null, drawerShape: Shape = MaterialTheme.shapes.large, drawerElevation: Dp = DrawerConstants.DefaultElevation, drawerBackgroundColor: Color = MaterialTheme.colors.surface, drawerContentColor: Color = contentColorFor(drawerBackgroundColor), drawerScrimColor: Color = MaterialTheme.colors.onSurface .copy(alpha = DrawerConstants.ScrimDefaultOpacity), 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 = {}, 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, 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 = contentColor(), unselectedContentColor: Color = EmphasisAmbient.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 = contentColor(), unselectedContentColor: Color = EmphasisAmbient.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 = currentTextStyle(), 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 = {}, 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 = currentTextStyle(), 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 = {}, 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, checkedColor: Color = MaterialTheme.colors.secondary, uncheckedColor: Color = MaterialTheme.colors.onSurface, disabledColor: Color = MaterialTheme.colors.onSurface, checkMarkColor: Color = MaterialTheme.colors.surface)

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
rememberBackdropState(initialValue: BackdropValue, animationSpec: AnimationSpec<Float> = SwipeableConstants.DefaultAnimationSpec, confirmStateChange: (BackdropValue) -> Boolean = { true }, snackbarHostState: SnackbarHostState = 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.

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.

ScaffoldState
rememberScaffoldState(drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed), snackbarHostState: SnackbarHostState = SnackbarHostState(), isDrawerGesturesEnabled: Boolean = true)

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

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>, thresholds: (from: T, to: T) -> ThresholdConfig, orientation: Orientation, enabled: Boolean = true, reverseDirection: Boolean = false, interactionState: InteractionState? = null, 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)
): 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.

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)
): 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.

BackdropScaffold

@Composable fun BackdropScaffold(
    modifier: Modifier = Modifier,
    backdropScaffoldState: BackdropScaffoldState = rememberBackdropState(Concealed),
    gesturesEnabled: Boolean = true,
    peekHeight: Dp = BackdropConstants.DefaultPeekHeight,
    headerHeight: Dp = BackdropConstants.DefaultHeaderHeight,
    persistentAppBar: Boolean = true,
    stickyFrontLayer: Boolean = true,
    backLayerBackgroundColor: Color = MaterialTheme.colors.primary,
    backLayerContentColor: Color = contentColorFor(backLayerBackgroundColor),
    frontLayerShape: Shape = BackdropConstants.DefaultFrontLayerShape,
    frontLayerElevation: Dp = BackdropConstants.DefaultFrontLayerElevation,
    frontLayerBackgroundColor: Color = MaterialTheme.colors.surface,
    frontLayerContentColor: Color = contentColorFor(frontLayerBackgroundColor),
    frontLayerScrimColor: Color = BackdropConstants.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.

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

A simple example of a backdrop looks like this:

import androidx.compose.foundation.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.rememberBackdropState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

val selection = remember { mutableStateOf(1) }
val backdropScaffoldState = rememberBackdropState(Concealed)
BackdropScaffold(
    backdropScaffoldState = backdropScaffoldState,
    appBar = {
        TopAppBar(
            title = { Text("Backdrop") },
            navigationIcon = {
                if (backdropScaffoldState.isConcealed) {
                    IconButton(onClick = { backdropScaffoldState.reveal() }) {
                        Icon(Icons.Default.Menu)
                    }
                } else {
                    IconButton(onClick = { backdropScaffoldState.conceal() }) {
                        Icon(Icons.Default.Close)
                    }
                }
            },
            elevation = 0.dp,
            backgroundColor = Color.Transparent
        )
    },
    backLayerContent = {
        LazyColumnFor((1..5).toList()) {
            ListItem(
                Modifier.clickable {
                    selection.value = it
                    backdropScaffoldState.conceal()
                },
                text = { Text("Select $it") }
            )
        }
    },
    frontLayerContent = {
        Box(
            Modifier.fillMaxSize(),
            gravity = ContentGravity.Center
        ) {
            Text("Selection: ${selection.value}")
        }
    }
)
To show a snackbar, use BackdropScaffoldState.snackbarHostState:
import androidx.compose.foundation.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.rememberBackdropState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope

val scope = rememberCoroutineScope()
val selection = remember { mutableStateOf(1) }
val backdropScaffoldState = rememberBackdropState(Concealed)
BackdropScaffold(
    backdropScaffoldState = backdropScaffoldState,
    appBar = {
        TopAppBar(
            title = { Text("Backdrop") },
            navigationIcon = {
                if (backdropScaffoldState.isConcealed) {
                    IconButton(onClick = { backdropScaffoldState.reveal() }) {
                        Icon(Icons.Default.Menu)
                    }
                } else {
                    IconButton(onClick = { backdropScaffoldState.conceal() }) {
                        Icon(Icons.Default.Close)
                    }
                }
            },
            actions = {
                var clickCount by remember { mutableStateOf(0) }
                IconButton(onClick = {
                    // show snackbar as a suspend function
                    scope.launch {
                        backdropScaffoldState.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
                    backdropScaffoldState.conceal()
                },
                text = { Text("Select $it") }
            )
        }
    },
    frontLayerContent = {
        Box(
            Modifier.fillMaxSize(),
            gravity = ContentGravity.Center
        ) {
            Text("Selection: ${selection.value}")
        }
    }
)
Parameters
modifier: Modifier = Modifier Optional Modifier for the entire backdrop.
backdropScaffoldState: BackdropScaffoldState = rememberBackdropState(Concealed) The state of the backdrop.
gesturesEnabled: Boolean = true Whether or not the backdrop can be interacted with by gestures.
peekHeight: Dp = BackdropConstants.DefaultPeekHeight The height of the visible part of the back layer when it is concealed.
headerHeight: Dp = BackdropConstants.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 = BackdropConstants.DefaultFrontLayerShape The shape of the front layer.
frontLayerElevation: Dp = BackdropConstants.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 = BackdropConstants.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 backdrop.
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 = MaterialTheme.colors.onSurface .copy(alpha = DrawerConstants.ScrimDefaultOpacity),
    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 = MaterialTheme.colors.onSurface .copy(alpha = DrawerConstants.ScrimDefaultOpacity) 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 = contentColor(),
    unselectedContentColor: Color = EmphasisAmbient.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 = contentColor() the color of the text label and icon when this item is selected, and the color of the ripple.
unselectedContentColor: Color = EmphasisAmbient.current.medium.applyEmphasis( selectedContentColor ) the color of the text label and icon when this item is not selected

Button

@Composable fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionState: InteractionState = remember { InteractionState() },
    elevation: Dp = ButtonConstants.defaultAnimatedElevation(interactionState, enabled).value,
    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.defaultAnimatedElevation(interactionState, enabled).value The z-coordinate at which to place this button. This controls the size of the shadow below the button. See ButtonConstants.defaultAnimatedElevation 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,
    checkedColor: Color = MaterialTheme.colors.secondary,
    uncheckedColor: Color = MaterialTheme.colors.onSurface,
    disabledColor: Color = MaterialTheme.colors.onSurface,
    checkMarkColor: Color = MaterialTheme.colors.surface
): 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
checkedColor: Color = MaterialTheme.colors.secondary color of the box when it is checked
uncheckedColor: Color = MaterialTheme.colors.onSurface color of the box border when it is unchecked
disabledColor: Color = MaterialTheme.colors.onSurface color for the checkbox to appear when disabled
checkMarkColor: Color = MaterialTheme.colors.surface color of the check mark of the Checkbox

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),
    dropdownModifier: Modifier = Modifier,
    dropdownContent: ColumnScope.() -> Unit
): Unit

A Material Design dropdown menu.

The menu has a toggle, which is the element generating the menu. For example, this can be an icon which, when tapped, triggers the menu. The content of the DropdownMenu can be DropdownMenuItems, as well as custom content. DropdownMenuItem can be used to achieve items as defined by the Material Design spec. onDismissRequest will be called when the menu should close - for example when there is a tap outside the menu, or when the back key is pressed. The menu will do a best effort to be fully visible on screen. It will try to expand horizontally, depending on layout direction, to the end of the toggle, then to the start of the toggle, and then screen end-aligned. Vertically, it will try to expand to the bottom of the toggle, then from the top of the toggle, and then screen top-aligned. A dropdownOffset can be provided to adjust the positioning of the menu for cases when the layout bounds of the toggle do not coincide with its visual bounds.

Example usage:

import androidx.compose.foundation.Icon
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.Divider
import androidx.compose.material.DropdownMenu
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material.IconButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var expanded by remember { mutableStateOf(false) }

val iconButton = @Composable {
    IconButton(onClick = { expanded = true }) {
        Icon(Icons.Default.MoreVert)
    }
}
DropdownMenu(
    expanded = expanded,
    onDismissRequest = { expanded = false },
    toggle = iconButton,
    toggleModifier = Modifier.fillMaxSize().wrapContentSize(Alignment.TopStart)
) {
    DropdownMenuItem(onClick = { /* Handle refresh! */ }) {
        Text("Refresh")
    }
    DropdownMenuItem(onClick = { /* Handle settings! */ }) {
        Text("Settings")
    }
    Divider()
    DropdownMenuItem(onClick = { /* Handle send feedback! */ }) {
        Text("Send Feedback")
    }
}
Parameters
toggle: () -> Unit The element generating the menu
expanded: Boolean Whether the menu is currently open or dismissed
onDismissRequest: () -> Unit Called when the menu should be dismiss
toggleModifier: Modifier = Modifier The modifier to be applied to the toggle
dropdownOffset: Position = Position(0.dp, 0.dp) Offset to be added to the position of the menu
dropdownModifier: Modifier = Modifier Modifier to be applied to the menu content
@Composable fun DropdownMenuItem(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    content: () -> Unit
): Unit

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

Example usage:

import androidx.compose.foundation.Icon
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.Divider
import androidx.compose.material.DropdownMenu
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material.IconButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var expanded by remember { mutableStateOf(false) }

val iconButton = @Composable {
    IconButton(onClick = { expanded = true }) {
        Icon(Icons.Default.MoreVert)
    }
}
DropdownMenu(
    expanded = expanded,
    onDismissRequest = { expanded = false },
    toggle = iconButton,
    toggleModifier = Modifier.fillMaxSize().wrapContentSize(Alignment.TopStart)
) {
    DropdownMenuItem(onClick = { /* Handle refresh! */ }) {
        Text("Refresh")
    }
    DropdownMenuItem(onClick = { /* Handle settings! */ }) {
        Text("Settings")
    }
    Divider()
    DropdownMenuItem(onClick = { /* Handle send feedback! */ }) {
        Text("Send Feedback")
    }
}
Parameters
onClick: () -> Unit Called when the menu item was clicked
modifier: Modifier = Modifier The modifier to be applied to the menu item
enabled: Boolean = true Controls the enabled state of the menu item - when false, the menu item will not be clickable and onClick will not be invoked

ExtendedFloatingActionButton

@Composable fun 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.defaultAnimatedElevation(interactionState).value
): Unit

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

This extended FAB contains text and an optional icon that will be placed at the start. See FloatingActionButton for a FAB that just contains some content, typically an icon.

import androidx.compose.foundation.Icon
import androidx.compose.foundation.Text
import androidx.compose.material.ExtendedFloatingActionButton

ExtendedFloatingActionButton(
    icon = { Icon(Icons.Filled.Favorite) },
    text = { Text("ADD TO BASKET") },
    onClick = { /*do something*/ }
)
If you want FAB’s container to have a fluid width (to be defined by its relationship to somethingelse on screen, such as screen width or the layout grid) just apply an appropriate modifier.For example to fill the whole available width you can do:
import androidx.compose.foundation.Icon
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.ExtendedFloatingActionButton

ExtendedFloatingActionButton(
    icon = { Icon(Icons.Filled.Favorite) },
    text = { Text("FLUID FAB") },
    onClick = { /*do something*/ },
    modifier = Modifier.fillMaxWidth()
)
Parameters
text: () -> Unit Text label displayed inside this FAB
onClick: () -> Unit will be called when user clicked on this FAB. The FAB will be disabled when it is null.
modifier: Modifier = Modifier Modifier to be applied to this FAB
icon: () -> Unit = null Optional icon for this FAB, typically this will be a androidx.compose.foundation.Icon.
interactionState: InteractionState = remember { InteractionState() } the InteractionState representing the different Interactions present on this FAB. You can create and pass in your own remembered InteractionState if you want to read the InteractionState and customize the appearance / behavior of this FAB in different Interactions, such as customizing how the elevation of this FAB changes when it is Interaction.Pressed.
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)) The Shape of this FAB
backgroundColor: Color = MaterialTheme.colors.secondary The background color. Use Color.Transparent to have no color
contentColor: Color = contentColorFor(backgroundColor) The preferred content color. Will be used by text and iconography
elevation: Dp = FloatingActionButtonConstants.defaultAnimatedElevation(interactionState).value The z-coordinate at which to place this FAB. This controls the size of the shadow below the button. See FloatingActionButtonConstants.defaultAnimatedElevation for the default elevation that animates between Interactions.

FloatingActionButton

@Composable fun 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.defaultAnimatedElevation(interactionState).value,
    icon: () -> Unit
): Unit

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

This FAB is typically used with an androidx.compose.foundation.Icon:

import androidx.compose.foundation.Icon
import androidx.compose.material.FloatingActionButton

FloatingActionButton(onClick = { /*do something*/ }) {
    Icon(Icons.Filled.Favorite)
}
See ExtendedFloatingActionButton for an extended FAB that contains text and an optional icon.
Parameters
onClick: () -> Unit will be called when user clicked on this FAB. The FAB will be disabled when it is null.
modifier: Modifier = Modifier Modifier to be applied to this FAB.
interactionState: InteractionState = remember { InteractionState() } the InteractionState representing the different Interactions present on this FAB. You can create and pass in your own remembered InteractionState if you want to read the InteractionState and customize the appearance / behavior of this FAB in different Interactions, such as customizing how the elevation of this FAB changes when it is Interaction.Pressed.
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)) The Shape of this FAB
backgroundColor: Color = MaterialTheme.colors.secondary The background color. Use Color.Transparent to have no color
contentColor: Color = contentColorFor(backgroundColor) The preferred content color for content inside this FAB
elevation: Dp = FloatingActionButtonConstants.defaultAnimatedElevation(interactionState).value The z-coordinate at which to place this FAB. This controls the size of the shadow below the FAB. See FloatingActionButtonConstants.defaultAnimatedElevation for the default elevation that animates between Interactions.
icon: () -> Unit the content of this FAB

IconButton

@Composable fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    icon: () -> Unit
): Unit

IconButton is a clickable icon, used to represent actions. An IconButton has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines. icon is centered inside the IconButton.

This component is typically used inside an App Bar for the navigation icon / actions. See App Bar documentation for samples of this.

icon should typically be an androidx.compose.foundation.Icon, using an icon from androidx.compose.material.icons.Icons. If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp.

import androidx.compose.foundation.Icon
import androidx.compose.material.IconButton

IconButton(onClick = { /* doSomething() */ }) {
    Icon(Icons.Filled.Favorite)
}
Parameters
onClick: () -> Unit the lambda to be invoked when this icon is pressed
modifier: Modifier = Modifier optional Modifier for this IconButton
enabled: Boolean = true whether or not this IconButton will handle input events and appear enabled for semantics purposes
icon: () -> Unit the content (icon) to be drawn inside the IconButton. This is typically an androidx.compose.foundation.Icon.

IconToggleButton

@Composable fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    icon: () -> Unit
): 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.

import androidx.compose.animation.animate
import androidx.compose.foundation.Icon
import androidx.compose.material.IconToggleButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color

var checked by remember { mutableStateOf(false) }

IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
    val tint = animate(if (checked) Color(0xFFEC407A) else Color(0xFFB0BEC5))
    Icon(Icons.Filled.Favorite, tint = tint)
}
Parameters
checked: Boolean whether this IconToggleButton is currently checked
onCheckedChange: (Boolean) -> Unit callback to be invoked when this icon is selected
modifier: Modifier = Modifier optional Modifier for this IconToggleButton
enabled: Boolean = true enabled whether or not this IconToggleButton will handle input events and appear enabled for semantics purposes
icon: () -> Unit the content (icon) to be drawn inside the IconToggleButton. This is typically an androidx.compose.foundation.Icon.

LinearProgressIndicator

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

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

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.LinearProgressIndicator
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) {
    LinearProgressIndicator(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.
backgroundColor: Color = color.copy(alpha = DefaultIndicatorBackgroundOpacity) The color of the background behind the indicator, visible when the progress has not reached that area of the overall indicator yet.

LinearProgressIndicator

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

An indeterminate linear 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.
backgroundColor: Color = color.copy(alpha = DefaultIndicatorBackgroundOpacity) The color of the background behind the indicator, visible when the progress has not reached that area of the overall indicator yet.

ListItem

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

Material Design implementation of list items.

To make this ListItem clickable, use Modifier.clickable. To add a background to the ListItem, wrap it with a Surface.

This component can be used to achieve the list item templates existing in the spec. For example:

  • one-line items
import androidx.compose.foundation.Icon
import androidx.compose.foundation.Image
import androidx.compose.foundation.Text
import androidx.compose.foundation.clickable
import androidx.compose.foundation.contentColor
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Divider
import androidx.compose.material.ListItem

Column {
    ListItem(text = { Text("One line list item with no icon") })
    Divider()
    ListItem(
        text = { Text("One line list item with 24x24 icon") },
        icon = { Image(icon24x24, colorFilter = ColorFilter.tint(contentColor())) }
    )
    Divider()
    ListItem(
        text = { Text("One line list item with 40x40 icon") },
        icon = { Image(icon40x40, colorFilter = ColorFilter.tint(contentColor())) }
    )
    Divider()
    ListItem(
        text = { Text("One line list item with 56x56 icon") },
        icon = { Image(icon56x56, colorFilter = ColorFilter.tint(contentColor())) }
    )
    Divider()
    ListItem(
        text = { Text("One line clickable list item") },
        icon = { Image(icon56x56, colorFilter = ColorFilter.tint(contentColor())) },
        modifier = Modifier.clickable { }
    )
    Divider()
    ListItem(
        text = { Text("One line list item with trailing icon") },
        trailing = { Icon(vectorIcon) }
    )
    Divider()
    ListItem(
        text = { Text("One line list item") },
        icon = { Image(icon40x40, colorFilter = ColorFilter.tint(contentColor())) },
        trailing = { Icon(vectorIcon) }
    )
    Divider()
}
  • two-line items
import androidx.compose.foundation.Image
import androidx.compose.foundation.Text
import androidx.compose.foundation.contentColor
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Checkbox
import androidx.compose.material.Divider
import androidx.compose.material.ListItem
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

Column {
    ListItem(
        text = { Text("Two line list item") },
        secondaryText = { Text("Secondary text") }
    )
    Divider()
    ListItem(
        text = { Text("Two line list item") },
        overlineText = { Text("OVERLINE") }
    )
    Divider()
    ListItem(
        text = { Text("Two line list item with 24x24 icon") },
        secondaryText = { Text("Secondary text") },
        icon = { Image(icon24x24, colorFilter = ColorFilter.tint(contentColor())) }
    )
    Divider()
    ListItem(
        text = { Text("Two line list item with 40x40 icon") },
        secondaryText = { Text("Secondary text") },
        icon = { Image(icon40x40, colorFilter = ColorFilter.tint(contentColor())) }
    )
    Divider()
    ListItem(
        text = { Text("Two line list item with 40x40 icon") },
        secondaryText = { Text("Secondary text") },
        trailing = { Text("meta") },
        icon = { Image(icon40x40, colorFilter = ColorFilter.tint(contentColor())) }
    )
    Divider()
    var checked by remember { mutableStateOf(false) }
    ListItem(
        text = { Text("Two line list item") },
        secondaryText = { Text("Secondary text") },
        icon = { Image(icon40x40, colorFilter = ColorFilter.tint(contentColor())) },
        trailing = {
            Checkbox(checked, onCheckedChange = { checked = !checked })
        }
    )
    Divider()
}
  • three-line items
import androidx.compose.foundation.Icon
import androidx.compose.foundation.Image
import androidx.compose.foundation.Text
import androidx.compose.foundation.contentColor
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Divider
import androidx.compose.material.ListItem

Column {
    ListItem(
        text = { Text("Three line list item") },
        secondaryText = {
            Text(
                "This is a long secondary text for the current list item, " +
                        "displayed on two lines"
            )
        },
        singleLineSecondaryText = false,
        trailing = { Text("meta") }
    )
    Divider()
    ListItem(
        text = { Text("Three line list item") },
        overlineText = { Text("OVERLINE") },
        secondaryText = { Text("Secondary text") }
    )
    Divider()
    ListItem(
        text = { Text("Three line list item with 24x24 icon") },
        secondaryText = {
            Text(
                "This is a long secondary text for the current list item " +
                        "displayed on two lines"
            )
        },
        singleLineSecondaryText = false,
        icon = { Image(icon24x24, colorFilter = ColorFilter.tint(contentColor())) }
    )
    Divider()
    ListItem(
        text = { Text("Three line list item with trailing icon") },
        secondaryText = {
            Text(
                "This is a long secondary text for the current list" +
                        " item, displayed on two lines"
            )
        },
        singleLineSecondaryText = false,
        trailing = { Icon(vectorIcon) }
    )
    Divider()
    ListItem(
        text = { Text("Three line list item") },
        overlineText = { Text("OVERLINE") },
        secondaryText = { Text("Secondary text") },
        trailing = { Text("meta") }
    )
    Divider()
}
Parameters
modifier: Modifier = Modifier Modifier to be applied to the list item
icon: () -> Unit = null The leading supporting visual of the list item
secondaryText: () -> Unit = null The secondary text of the list item
singleLineSecondaryText: Boolean = true Whether the secondary text is single line
overlineText: () -> Unit = null The text displayed above the primary text
trailing: () -> Unit = null The trailing meta text or meta icon of the list item
text: () -> Unit The primary text of the list item

MaterialTheme

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

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

Material components such as Button and Checkbox use values provided here when retrieving default values.

It defines colors as specified in the Material Color theme creation spec, typography defined in the Material Type Scale spec, and shapes defined in the Shape scheme.

All values may be set by providing this component with the colors, typography, and shapes attributes. Use this to configure the overall theme of elements within this MaterialTheme.

Any values that are not set will inherit the current value from the theme, falling back to the defaults if there is no parent MaterialTheme. This allows using a MaterialTheme at the top of your application, and then separate MaterialTheme(s) for different screens / parts of your UI, overriding only the parts of the theme definition that need to change.

import androidx.compose.foundation.Text
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Typography
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle

val lightColors = lightColors(
    primary = Color(0xFF1EB980)
)

val darkColors = darkColors(
    primary = Color(0xFF66ffc7)
)

val colors = if (isSystemInDarkTheme()) darkColors else lightColors

val typography = Typography(
    h1 = TextStyle(
        fontWeight = FontWeight.W100,
        fontSize = 96.sp
    ),
    button = TextStyle(
        fontWeight = FontWeight.W600,
        fontSize = 14.sp
    )
)

MaterialTheme(colors = colors, typography = typography) {
    val currentTheme = if (MaterialTheme.colors.isLight) "light" else "dark"
    ExtendedFloatingActionButton(
        text = { Text("FAB with text style and color from $currentTheme theme") },
        onClick = {}
    )
}
Parameters
colors: Colors = MaterialTheme.colors A complete definition of the Material Color theme for this hierarchy
typography: Typography = MaterialTheme.typography A set of text styles to be used as this hierarchy's typography system
shapes: Shapes = MaterialTheme.shapes A set of shapes to be used by the components in this hierarchy

ModalDrawerLayout

@Composable fun 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 = MaterialTheme.colors.onSurface .copy(alpha = DrawerConstants.ScrimDefaultOpacity),
    bodyContent: () -> Unit
): Unit

Navigation drawers provide access to destinations in your app.

Modal navigation drawers block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.

See BottomDrawerLayout for a layout that introduces a bottom drawer, suitable when using bottom navigation.

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.Button
import androidx.compose.material.ModalDrawerLayout
import androidx.compose.material.rememberDrawerState

val drawerState = rememberDrawerState(DrawerValue.Closed)
ModalDrawerLayout(
    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) ">>> Swipe >>>" else "<<< Swipe <<<")
            Spacer(Modifier.preferredHeight(20.dp))
            Button(onClick = { drawerState.open() }) {
                Text("Click to open")
            }
        }
    }
)
Parameters
drawerContent: ColumnScope.() -> Unit composable that represents content inside the drawer
modifier: Modifier = Modifier optional modifier for the drawer
drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed) state of 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
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 = MaterialTheme.colors.onSurface .copy(alpha = DrawerConstants.ScrimDefaultOpacity) 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 width

OutlinedButton

@Composable inline fun 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
): Unit

Material Design implementation of a Material Outlined Button.

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but are not the primary action in an app.

Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons.

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

OutlinedButton(onClick = { /* Do something! */ }) {
    Text("Outlined Button")
}
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 = 0.dp The z-coordinate at which to place this button. This controls the size of the shadow below the button
shape: Shape = MaterialTheme.shapes.small Defines the button's shape as well as its shadow
border: BorderStroke? = ButtonConstants.defaultOutlinedBorder Border to draw around the button
backgroundColor