The second Android 11 Developer Preview is now available, test it out and share your feedback.

androidx.ui.material

Classes

DataTableChildren

Collects information about the children of a DataTable when its body is executed with a DataTableChildren as argument.

DataTablePagination

Pagination configuration for a DataTable.

DataTableSorting

Sorting configuration for a DataTable.

RadioGroupScope

ScaffoldState

State for Scaffold composable component.

Shapes

Data class holding current shapes for common surfaces like Button or Card.

SliderPosition

State for Slider that represents the Slider value, its bounds and optional amount of steps evenly distributed across the Slider range.

Typography

Data class holding typography definitions as defined by the Material typography specification.

Enums

AlertDialogButtonLayout

An enum which specifies how the buttons are positioned inside the AlertDialog:

DrawerState

Possible states of the drawer

Top-level functions summary

Unit
AlertDialog(onCloseRequest: () -> Unit, title: () -> Unit = null, text: () -> Unit, confirmButton: () -> Unit, dismissButton: () -> Unit = null, buttonLayout: AlertDialogButtonLayout = SideBySide)

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

Unit
AlertDialog(onCloseRequest: () -> Unit, title: () -> Unit = null, text: () -> Unit, buttons: () -> Unit)

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

Unit
BottomAppBar(modifier: Modifier = Modifier.None, color: Color = MaterialTheme.colors().primarySurface, contentColor: Color = contentColorFor(color), fabConfiguration: BottomAppBar.FabConfiguration? = null, cutoutShape: Shape? = null, children: RowScope.() -> Unit)

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

Unit
BottomDrawerLayout(drawerState: DrawerState, onStateChange: (DrawerState) -> Unit, gesturesEnabled: Boolean = true, drawerContent: () -> Unit, bodyContent: () -> Unit)

Navigation drawers provide access to destinations in your app.

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

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

Unit
Button(onClick: () -> Unit, modifier: Modifier = Modifier.None, enabled: Boolean = true, elevation: Dp = 2.dp, shape: Shape = MaterialTheme.shapes().button, border: Border? = null, backgroundColor: Color = MaterialTheme.colors().primary, contentColor: Color = contentColorFor(backgroundColor), innerPadding: EdgeInsets = Button.DefaultInnerPadding, children: () -> Unit)

Material Design implementation of a Material Contained Button.

Unit
Card(modifier: Modifier = Modifier.None, shape: Shape = MaterialTheme.shapes().card, color: Color = MaterialTheme.colors().surface, contentColor: Color = contentColorFor(color), border: Border? = null, elevation: Dp = 1.dp, children: () -> Unit)

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

Unit
Checkbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier.None, color: Color = MaterialTheme.colors().secondary)

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

Unit
CircularProgressIndicator(progress: Float, color: Color = MaterialTheme.colors().primary)

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

Unit
CircularProgressIndicator(color: Color = MaterialTheme.colors().primary)

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

Unit
DataTable(columns: Int, numeric: (Int) -> Boolean = { false }, dataRowHeight: Dp = DataRowHeight, headerRowHeight: Dp = HeaderRowHeight, cellSpacing: EdgeInsets = CellSpacing, border: Border = Border(color = BorderColor, size = BorderWidth), selectedColor: Color = MaterialTheme.colors().primary.copy(alpha = 0.08f), pagination: DataTablePagination? = null, sorting: DataTableSorting? = null, block: DataTableChildren.() -> Unit)

Data tables display information in a grid-like format of rows and columns.

DataTablePagination
DefaultDataTablePagination(initialPage: Int = 0, initialRowsPerPage: Int, availableRowsPerPage: List<Int>)

Creates a pagination configuration for DataTable with the given initial values.

DataTableSorting
DefaultDataTableSorting(initialColumn: Int? = null, initialAscending: Boolean = true, sortableColumns: Set<Int>, onSortRequest: (column: Int, ascending: Boolean) -> Unit)

Creates a sorting configuration for DataTable with the given initial values.

Unit
Divider(modifier: Modifier = Modifier.None, color: Color = MaterialTheme.colors().surface, height: Dp = 1.dp, indent: Dp = 0.dp)

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

Unit
FloatingActionButton(onClick: () -> Unit, modifier: Modifier = Modifier.None, minSize: Dp = FabSize, shape: Shape = CircleShape, color: Color = MaterialTheme.colors().primary, elevation: Dp = 6.dp, children: () -> Unit)

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

Unit
FloatingActionButton(icon: ImageAsset, onClick: () -> Unit, modifier: Modifier = Modifier.None, shape: Shape = CircleShape, color: Color = MaterialTheme.colors().primary, elevation: Dp = 6.dp)

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

Unit
FloatingActionButton(text: String, onClick: () -> Unit, modifier: Modifier = Modifier.None, icon: ImageAsset? = null, textStyle: TextStyle? = null, color: Color = MaterialTheme.colors().primary, elevation: Dp = 6.dp)

An extended FloatingActionButton with an icon and a text.

Unit
IconButton(onClick: () -> Unit, modifier: Modifier = Modifier.None, children: () -> Unit)

IconButton is a clickable icon, used to represent actions.

Unit
IconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier.None, children: () -> 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(progress: Float, color: Color = MaterialTheme.colors().primary)

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

Unit
LinearProgressIndicator(color: Color = MaterialTheme.colors().primary)

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

Unit
ListItem(text: String, icon: ImageAsset? = null, secondaryText: String? = null, singleLineSecondaryText: Boolean = true, overlineText: String? = null, metaText: String? = null, onClick: () -> Unit = null)

Material Design implementation of list items.

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

Material Design implementation of list items.

Unit
MaterialTheme(colors: ColorPalette = lightColorPalette(), typography: Typography = Typography(), children: () -> Unit)

This component defines the styling principles from the Material design specification.

Unit
ModalDrawerLayout(drawerState: DrawerState, onStateChange: (DrawerState) -> Unit, gesturesEnabled: Boolean = true, drawerContent: () -> Unit, bodyContent: () -> Unit)

Navigation drawers provide access to destinations in your app.

Unit
OutlinedButton(noinline onClick: () -> Unit, modifier: Modifier = Modifier.None, enabled: Boolean = true, elevation: Dp = 0.dp, shape: Shape = MaterialTheme.shapes().button, border: Border? = Border( 1.dp, MaterialTheme.colors().onSurface.copy(alpha = OutlinedStrokeOpacity) ), backgroundColor: Color = MaterialTheme.colors().surface, contentColor: Color = MaterialTheme.colors().primary, innerPadding: EdgeInsets = Button.DefaultInnerPadding, noinline children: () -> Unit)

Material Design implementation of a Material Outlined Button.

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

Applies emphasis to children, by modifying the value of contentColor.

Unit
RadioButton(selected: Boolean, onSelect: () -> Unit, color: Color = MaterialTheme.colors().secondary)

Component to represent two states, selected and not selected.

Unit
RadioGroup(children: RadioGroupScope.() -> Unit)

Components for creating mutually exclusive set of RadioButtons.

Unit
RadioGroup(options: List<String>, selectedOption: String?, onSelectedChange: (String) -> Unit, radioColor: Color = MaterialTheme.colors().secondary, textStyle: TextStyle? = null)

Components for creating mutually exclusive set of RadioButton as well as text label for this RadioButtons.

Unit
Scaffold(scaffoldState: ScaffoldState = remember { ScaffoldState() }, topAppBar: () -> Unit = null, bottomAppBar: (BottomAppBar.FabConfiguration?) -> Unit = null, floatingActionButton: () -> Unit = null, floatingActionButtonPosition: Scaffold.FabPosition = FabPosition.End, drawerContent: () -> Unit = null, bodyContent: (Modifier) -> Unit)

Scaffold implements the basic material design visual layout structure.

Unit
Slider(position: SliderPosition, onValueChange: (Float) -> Unit = { position.value = it }, modifier: Modifier = Modifier.None, onValueChangeEnd: () -> Unit = {}, color: Color = MaterialTheme.colors().primary)

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

SliderPosition
SliderPosition(initial: Float = 0f, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, steps: Int = 0)

Create and remember the state for a Slider based on the parameters, using the ambient animation clock.

Unit
Snackbar(text: () -> Unit, action: () -> Unit = null, modifier: Modifier = Modifier.None, actionOnNewLine: Boolean = false)

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

Unit
StaticDrawer(drawerContent: () -> Unit)

Navigation drawers provide access to destinations in your app.

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

The Surface is responsible for:

Unit
Switch(checked: Boolean, onCheckedChange: (Boolean) -> Unit, color: Color = MaterialTheme.colors().secondaryVariant)

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

Unit
Tab(text: () -> Unit = emptyContent(), icon: () -> Unit = emptyContent(), selected: Boolean, onSelected: () -> Unit, activeColor: Color = contentColor(), inactiveColor: Color = MaterialTheme.emphasisLevels().medium.emphasize(activeColor))

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

Unit
Tab(selected: Boolean, onSelected: () -> Unit, children: () -> Unit)

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

Unit
TabRow(items: List<T>, selectedIndex: Int, color: Color = MaterialTheme.colors().primarySurface, contentColor: Color = contentColorFor(color), scrollable: Boolean = false, indicatorContainer: (tabPositions: List<TabRow.TabPosition>) -> Unit = { tabPositions -> TabRow.IndicatorContainer(tabPositions, selectedIndex) { TabRow.Indicator() } }, divider: () -> Unit = { Divider(height = 1.dp, color = contentColor().copy(alpha = DividerOpacity)) }, tab: (Int, T) -> 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.None, enabled: Boolean = true, elevation: Dp = 0.dp, shape: Shape = MaterialTheme.shapes().button, border: Border? = null, backgroundColor: Color = Color.Transparent, contentColor: Color = MaterialTheme.colors().primary, innerPadding: EdgeInsets = TextButton.DefaultInnerPadding, noinline children: () -> Unit)

Material Design implementation of a Material Text Button.

Unit
TopAppBar(title: () -> Unit, modifier: Modifier = Modifier.None, navigationIcon: () -> Unit = null, actions: RowScope.() -> Unit = {}, color: Color = MaterialTheme.colors().primarySurface, contentColor: Color = contentColorFor(color), 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.None, color: Color = MaterialTheme.colors().primarySurface, contentColor: Color = contentColorFor(color), elevation: Dp = TopAppBarElevation, children: RowScope.() -> Unit)

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

Unit
TriStateCheckbox(value: ToggleableState, onClick: () -> Unit, modifier: Modifier = Modifier.None, color: Color = MaterialTheme.colors().secondary)

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

Color

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

ColorPalette
darkColorPalette(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.

ColorPalette
lightColorPalette(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.

Color

Provides a best-effort 'primary' color to be used as the primary color inside a Snackbar.

Top-level properties summary

Ambient<EmphasisLevels>

Ambient containing the current EmphasisLevels in this hierarchy.

Extension functions summary

For RowScope
Unit
RowScope.BottomNavigationItem(icon: () -> Unit, text: () -> Unit = emptyContent(), selected: Boolean, onSelected: () -> Unit, modifier: Modifier = Modifier.None, alwaysShowLabels: Boolean = true, activeColor: Color = contentColor(), inactiveColor: Color = MaterialTheme.emphasisLevels().medium.emphasize(activeColor))

A BottomNavigationItem represents a singular primary destination in your application.

For ColorPalette
Color?

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

Extension properties summary

For ColorPalette
Color

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

Top-level functions

AlertDialog

@Composable fun AlertDialog(
    onCloseRequest: () -> Unit,
    title: () -> Unit = null,
    text: () -> Unit,
    confirmButton: () -> Unit,
    dismissButton: () -> Unit = null,
    buttonLayout: AlertDialogButtonLayout = SideBySide
): Unit

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

There are two different layouts for showing the buttons inside the Alert dialog provided by AlertDialogButtonLayout.

Sample of dialog with side by side buttons:

import androidx.compose.state
import androidx.ui.core.Text
import androidx.ui.material.AlertDialog
import androidx.ui.material.Button

val openDialog = state { true }

if (openDialog.value) {
    AlertDialog(
        onCloseRequest = {
            // Because we are not setting openDialog.value to false here,
            // the user can close this dialog only via one of the buttons we provide.
        },
        title = {
            Text(text = "Title")
        },
        text = {
            Text("This area typically contains the supportive text" +
                    " which presents the details regarding the Dialog's purpose.")
        },
        confirmButton = {
            Button(onClick = {
                openDialog.value = false
            }) {
                Text("Confirm")
            }
        },
        dismissButton = {
            Button(onClick = {
                openDialog.value = false
            }) {
                Text("Dismiss")
            }
        },
        buttonLayout = AlertDialogButtonLayout.SideBySide
    )
}
Sample of dialog with stacked buttons:
import androidx.compose.state
import androidx.ui.core.Text
import androidx.ui.material.AlertDialog
import androidx.ui.material.Button

val openDialog = state { true }

if (openDialog.value) {
    AlertDialog(
        onCloseRequest = {
            // In this example we allow the dialog to be closed by other actions
            // such as taping outside or pressing the back button.
            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 = {
            Button(onClick = {
                openDialog.value = false
            }) {
                Text("Long Confirm Button")
            }
        },
        dismissButton = {
            Button(onClick = {
                openDialog.value = false
            }) {
                Text("Long Dismiss Button")
            }
        },
        buttonLayout = AlertDialogButtonLayout.Stacked
    )
}
Parameters
onCloseRequest: () -> Unit Executes when the user tries to dismiss the Dialog by clicking outside or pressing the back button.
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 The text which presents the details regarding the Dialog's purpose. Provided text style will be Typography.body1.
confirmButton: () -> Unit A button which is meant to confirm a proposed action, thus resolving what triggered the dialog.
dismissButton: () -> Unit = null A button which is meant to dismiss the dialog.
buttonLayout: AlertDialogButtonLayout = SideBySide An enum which specifies how the buttons are positioned inside the dialog: SideBySide or Stacked.

AlertDialog

@Composable fun AlertDialog(
    onCloseRequest: () -> Unit,
    title: () -> Unit = null,
    text: () -> Unit,
    buttons: () -> Unit
): 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.state
import androidx.ui.core.Text
import androidx.ui.layout.Row
import androidx.ui.material.AlertDialog
import androidx.ui.material.Button

val openDialog = state { true }

if (openDialog.value) {
    AlertDialog(
        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.")
        },
        buttons = {
            Row(arrangement = Arrangement.Center) {
                Button(onClick = { openDialog.value = false }) {
                    Text("Button")
                }
            }
        }
    )
}
Parameters
onCloseRequest: () -> Unit Executes when the user tries to dismiss the Dialog by clicking outside or pressing the back button.
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 The text which presents the details regarding the Dialog's purpose. Provided text style will be Typography.body1.
buttons: () -> Unit Function that emits the layout with the buttons

BottomAppBar

@Composable fun BottomAppBar(
    modifier: Modifier = Modifier.None,
    color: Color = MaterialTheme.colors().primarySurface,
    contentColor: Color = contentColorFor(color),
    fabConfiguration: BottomAppBar.FabConfiguration? = null,
    cutoutShape: Shape? = null,
    children: 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.ui.foundation.Icon
import androidx.ui.layout.Spacer
import androidx.ui.material.BottomAppBar
import androidx.ui.material.IconButton

BottomAppBar {
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Menu)
    }
    // The actions should be at the end of the BottomAppBar
    Spacer(LayoutWeight(1f))
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Favorite)
    }
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Favorite)
    }
}
Parameters
color: Color = MaterialTheme.colors().primarySurface The background color for the BottomAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(color) The preferred content color provided by this BottomAppBar to its children. Defaults to either the matching onFoo color for color, or if color is not a color from the theme, this will keep the same value set above this BottomAppBar.
fabConfiguration: BottomAppBar.FabConfiguration? = null The FabConfiguration that controls where the FloatingActionButton is placed inside the BottomAppBar. This is used both to determine the cutout position for BottomAppBar (if cutoutShape is non-null) and to choose proper layout for BottomAppBar. If null, BottomAppBar will show no cutout and no-FAB layout of icons.
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. This shape will be drawn with an offset around all sides. If null, where will be no cutout.
children: RowScope.() -> Unit the children of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.

BottomDrawerLayout

@Composable fun BottomDrawerLayout(
    drawerState: DrawerState,
    onStateChange: (DrawerState) -> Unit,
    gesturesEnabled: Boolean = true,
    drawerContent: () -> Unit,
    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 StaticDrawer for always visible drawer, suitable for tablet or desktop See ModalDrawerLayout for a layout that introduces a classic from-the-side drawer.

import androidx.compose.state
import androidx.ui.material.BottomDrawerLayout

val (state, onStateChange) = state { DrawerState.Closed }
val appContentText =
    if (state == DrawerState.Closed) "▲▲▲ Pull to open ▲▲▲" else "▼▼▼ Drag down to close ▼▼▼"
BottomDrawerLayout(
    drawerState = state,
    onStateChange = onStateChange,
    drawerContent = { YourDrawerContent(onStateChange) },
    bodyContent = { YourAppContent(appContentText, onStateChange) }
)
Parameters
drawerState: DrawerState state of the drawer
onStateChange: (DrawerState) -> Unit lambda to be invoked when the drawer requests to change its state, e.g. when the drawer is being swiped to the new state or when the scrim is clicked
gesturesEnabled: Boolean = true whether or not drawer can be interacted by gestures
drawerContent: () -> Unit composable that represents content inside the drawer
bodyContent: () -> Unit content of the rest of the UI
Exceptions
IllegalStateException when parent has Px.Infinity height

BottomNavigation

@Composable fun BottomNavigation(
    modifier: Modifier = Modifier.None,
    color: Color = MaterialTheme.colors().primarySurface,
    contentColor: Color = contentColorFor(color),
    elevation: Dp = BottomNavigationElevation,
    children: 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.state
import androidx.ui.core.Text
import androidx.ui.foundation.Icon
import androidx.ui.material.BottomNavigation
import androidx.ui.material.BottomNavigationItem

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

BottomNavigation {
    items.forEachIndexed { index, item ->
        BottomNavigationItem(
            icon = { Icon(Icons.Filled.Favorite) },
            text = { Text(item) },
            selected = selectedItem == index,
            onSelected = { 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.None optional Modifier for this BottomNavigation
color: Color = MaterialTheme.colors().primarySurface The background color for this BottomNavigation
contentColor: Color = contentColorFor(color) The preferred content color provided by this BottomNavigation to its children. Defaults to either the matching onFoo color for color, or if color is not a color from the theme, this will keep the same value set above this BottomNavigation.
elevation: Dp = BottomNavigationElevation elevation for this BottomNavigation
children: RowScope.() -> Unit destinations inside this BottomNavigation, this should contain multiple BottomNavigationItems

Button

@Composable fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier.None,
    enabled: Boolean = true,
    elevation: Dp = 2.dp,
    shape: Shape = MaterialTheme.shapes().button,
    border: Border? = null,
    backgroundColor: Color = MaterialTheme.colors().primary,
    contentColor: Color = contentColorFor(backgroundColor),
    innerPadding: EdgeInsets = Button.DefaultInnerPadding,
    children: () -> 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 ColorPalette.primary then the text will by default use ColorPalette.onPrimary.

import androidx.ui.core.Text
import androidx.ui.material.Button

Button(onClick = { /* Do something! */ }) {
    Text("Button")
}
Parameters
onClick: () -> Unit Will be called when the user clicks the button
modifier: Modifier = Modifier.None 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
elevation: Dp = 2.dp The z-coordinate at which to place this button. This controls the size of the shadow below the button
shape: Shape = MaterialTheme.shapes().button Defines the button's shape as well as its shadow
border: Border? = null Border to draw around the button
backgroundColor: Color = MaterialTheme.colors().primary 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
innerPadding: EdgeInsets = Button.DefaultInnerPadding The spacing values to apply internally between the container and the content

Card

@Composable fun Card(
    modifier: Modifier = Modifier.None,
    shape: Shape = MaterialTheme.shapes().card,
    color: Color = MaterialTheme.colors().surface,
    contentColor: Color = contentColorFor(color),
    border: Border? = null,
    elevation: Dp = 1.dp,
    children: () -> Unit
): Unit

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

import androidx.ui.core.Text
import androidx.ui.material.Card

Card {
    Text("Card Content")
}
Parameters
modifier: Modifier = Modifier.None Modifier to be applied to the layout of the card.
shape: Shape = MaterialTheme.shapes().card Defines the surface's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.
color: Color = MaterialTheme.colors().surface The background color.
contentColor: Color = contentColorFor(color) The preferred content color provided by this Surface to its children. Defaults to either the matching onFoo color for color, or if color is not a color from the theme, this will keep the same value set above this Surface.
border: Border? = 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.None,
    color: Color = MaterialTheme.colors().secondary
): Unit

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

import androidx.compose.state
import androidx.ui.material.Checkbox

val checkedState = state { 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. If null, Checkbox will appears in the checked state and remains disabled
modifier: Modifier = Modifier.None Modifier to be applied to the layout of the checkbox
color: Color = MaterialTheme.colors().secondary custom color for checkbox

CircularProgressIndicator

@Composable fun CircularProgressIndicator(
    progress: Float,
    color: Color = MaterialTheme.colors().primary
): Unit

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

Parameters
progress: Float The progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress
color: Color = MaterialTheme.colors().primary The color of the progress indicator.

CircularProgressIndicator

@Composable fun CircularProgressIndicator(color: Color = MaterialTheme.colors().primary): 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.

DataTable

@Composable fun DataTable(
    columns: Int,
    numeric: (Int) -> Boolean = { false },
    dataRowHeight: Dp = DataRowHeight,
    headerRowHeight: Dp = HeaderRowHeight,
    cellSpacing: EdgeInsets = CellSpacing,
    border: Border = Border(color = BorderColor, size = BorderWidth),
    selectedColor: Color = MaterialTheme.colors().primary.copy(alpha = 0.08f),
    pagination: DataTablePagination? = null,
    sorting: DataTableSorting? = null,
    block: DataTableChildren.() -> Unit
): Unit

Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan, so that users can look for patterns and insights.

Example usage:

import androidx.ui.material.DataTable

DataTable(
    columns = headers.size,
    numeric = { j -> j != 0 }
) {
    headerRow(text = { j -> headers[j] })

    desserts.forEach { dessert ->
        dataRow(
            text = { j ->
                when (j) {
                    0 -> dessert.name
                    1 -> dessert.calories.toString()
                    2 -> dessert.fat.toString()
                    3 -> dessert.carbs.toString()
                    4 -> dessert.protein.toString()
                    5 -> dessert.sodium.toString()
                    6 -> dessert.calcium.toString() + "%"
                    else -> dessert.iron.toString() + "%"
                }
            },
            selected = dessert.selected,
            onSelectedChange = { dessert.selected = it }
        )
    }
}
To make a data table paginated, you must provide a pagination configuration:
import androidx.ui.material.DataTable
import androidx.ui.material.DefaultDataTablePagination

DataTable(
    columns = headers.size,
    numeric = { j -> j != 0 },
    pagination = DefaultDataTablePagination(
        initialPage = 1,
        initialRowsPerPage = 7,
        availableRowsPerPage = listOf(7, 14, 28)
    )
) {
    headerRow(text = { j -> headers[j] })

    extraDesserts.forEach { dessert ->
        dataRow(
            text = { j ->
                when (j) {
                    0 -> dessert.name
                    1 -> dessert.calories.toString()
                    2 -> dessert.fat.toString()
                    3 -> dessert.carbs.toString()
                    4 -> dessert.protein.toString()
                    5 -> dessert.sodium.toString()
                    6 -> dessert.calcium.toString() + "%"
                    else -> dessert.iron.toString() + "%"
                }
            },
            selected = dessert.selected,
            onSelectedChange = { dessert.selected = it }
        )
    }
}
To enable sorting when clicking on the column headers, provide a sorting configuration:
import androidx.ui.material.DataTable
import androidx.ui.material.DefaultDataTableSorting

DataTable(
    columns = headers.size,
    numeric = { j -> j != 0 },
    sorting = DefaultDataTableSorting(
        sortableColumns = setOf(1, 2, 3, 4, 5, 6, 7),
        onSortRequest = { sortColumn, ascending ->
            mutableDesserts.sortWith(object : Comparator<Dessert> {
                override fun compare(p0: Dessert, p1: Dessert): Int {
                    val comparison = when (sortColumn) {
                        0 -> compareValues(p0.name, p1.name)
                        1 -> compareValues(p0.calories, p1.calories)
                        2 -> compareValues(p0.fat, p1.fat)
                        3 -> compareValues(p0.carbs, p1.carbs)
                        4 -> compareValues(p0.protein, p1.protein)
                        5 -> compareValues(p0.sodium, p1.sodium)
                        6 -> compareValues(p0.calcium, p1.calcium)
                        else -> compareValues(p0.iron, p1.iron)
                    }
                    return if (ascending) comparison else -comparison
                }
            })
        }
    )
) {
    headerRow(text = { j -> headers[j] })

    mutableDesserts.forEach { dessert ->
        dataRow(
            text = { j ->
                when (j) {
                    0 -> dessert.name
                    1 -> dessert.calories.toString()
                    2 -> dessert.fat.toString()
                    3 -> dessert.carbs.toString()
                    4 -> dessert.protein.toString()
                    5 -> dessert.sodium.toString()
                    6 -> dessert.calcium.toString() + "%"
                    else -> dessert.iron.toString() + "%"
                }
            },
            selected = dessert.selected,
            onSelectedChange = { dessert.selected = it }
        )
    }
}
Parameters
columns: Int The number of columns in the table.
numeric: (Int) -> Boolean = { false } Whether the given column represents numeric data.
dataRowHeight: Dp = DataRowHeight The height of each row (excluding the header row).
headerRowHeight: Dp = HeaderRowHeight The height of the header row.
cellSpacing: EdgeInsets = CellSpacing The padding to apply around each cell.
border: Border = Border(color = BorderColor, size = BorderWidth) Border class that specifies border appearance, such as size or color.
selectedColor: Color = MaterialTheme.colors().primary.copy(alpha = 0.08f) The color used to indicate selected rows.
pagination: DataTablePagination? = null Contains the pagination configuration. To disable pagination, set this to null.
sorting: DataTableSorting? = null Contains the sorting configuration. To disable sorting, set this to null.

DefaultDataTablePagination

@Composable fun DefaultDataTablePagination(
    initialPage: Int = 0,
    initialRowsPerPage: Int,
    availableRowsPerPage: List<Int>
): DataTablePagination

Creates a pagination configuration for DataTable with the given initial values.

Example usage:

import androidx.ui.material.DataTable
import androidx.ui.material.DefaultDataTablePagination

DataTable(
    columns = headers.size,
    numeric = { j -> j != 0 },
    pagination = DefaultDataTablePagination(
        initialPage = 1,
        initialRowsPerPage = 7,
        availableRowsPerPage = listOf(7, 14, 28)
    )
) {
    headerRow(text = { j -> headers[j] })

    extraDesserts.forEach { dessert ->
        dataRow(
            text = { j ->
                when (j) {
                    0 -> dessert.name
                    1 -> dessert.calories.toString()
                    2 -> dessert.fat.toString()
                    3 -> dessert.carbs.toString()
                    4 -> dessert.protein.toString()
                    5 -> dessert.sodium.toString()
                    6 -> dessert.calcium.toString() + "%"
                    else -> dessert.iron.toString() + "%"
                }
            },
            selected = dessert.selected,
            onSelectedChange = { dessert.selected = it }
        )
    }
}

DefaultDataTableSorting

@Composable fun DefaultDataTableSorting(
    initialColumn: Int? = null,
    initialAscending: Boolean = true,
    sortableColumns: Set<Int>,
    onSortRequest: (column: Int, ascending: Boolean) -> Unit
): DataTableSorting

Creates a sorting configuration for DataTable with the given initial values.

Example usage:

import androidx.ui.material.DataTable
import androidx.ui.material.DefaultDataTableSorting

DataTable(
    columns = headers.size,
    numeric = { j -> j != 0 },
    sorting = DefaultDataTableSorting(
        sortableColumns = setOf(1, 2, 3, 4, 5, 6, 7),
        onSortRequest = { sortColumn, ascending ->
            mutableDesserts.sortWith(object : Comparator<Dessert> {
                override fun compare(p0: Dessert, p1: Dessert): Int {
                    val comparison = when (sortColumn) {
                        0 -> compareValues(p0.name, p1.name)
                        1 -> compareValues(p0.calories, p1.calories)
                        2 -> compareValues(p0.fat, p1.fat)
                        3 -> compareValues(p0.carbs, p1.carbs)
                        4 -> compareValues(p0.protein, p1.protein)
                        5 -> compareValues(p0.sodium, p1.sodium)
                        6 -> compareValues(p0.calcium, p1.calcium)
                        else -> compareValues(p0.iron, p1.iron)
                    }
                    return if (ascending) comparison else -comparison
                }
            })
        }
    )
) {
    headerRow(text = { j -> headers[j] })

    mutableDesserts.forEach { dessert ->
        dataRow(
            text = { j ->
                when (j) {
                    0 -> dessert.name
                    1 -> dessert.calories.toString()
                    2 -> dessert.fat.toString()
                    3 -> dessert.carbs.toString()
                    4 -> dessert.protein.toString()
                    5 -> dessert.sodium.toString()
                    6 -> dessert.calcium.toString() + "%"
                    else -> dessert.iron.toString() + "%"
                }
            },
            selected = dessert.selected,
            onSelectedChange = { dessert.selected = it }
        )
    }
}

Divider

@Composable fun Divider(
    modifier: Modifier = Modifier.None,
    color: Color = MaterialTheme.colors().surface,
    height: Dp = 1.dp,
    indent: Dp = 0.dp
): Unit

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

Parameters
color: Color = MaterialTheme.colors().surface color of the divider line
height: Dp = 1.dp height of the divider line, 1 dp is used by default
indent: Dp = 0.dp left offset of this line, no offset by default

FloatingActionButton

@Composable fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier.None,
    minSize: Dp = FabSize,
    shape: Shape = CircleShape,
    color: Color = MaterialTheme.colors().primary,
    elevation: Dp = 6.dp,
    children: () -> Unit
): Unit

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

By default it uses a circle shape and centers its content.

import androidx.ui.foundation.Image
import androidx.ui.material.FloatingActionButton

FloatingActionButton(onClick = { /*do something*/ }) {
    Image(image = icon)
}
Parameters
onClick: () -> Unit will be called when user clicked on the button
modifier: Modifier = Modifier.None Modifier to be applied to the button.
minSize: Dp = FabSize Minimum size of the FAB
shape: Shape = CircleShape Defines the Button's shape as well its shadow. When null is provided it uses the Shapes.button from ShapeAmbient
color: Color = MaterialTheme.colors().primary The background color
elevation: Dp = 6.dp The z-coordinate at which to place this button. This controls the size of the shadow below the button

FloatingActionButton

@Composable fun FloatingActionButton(
    icon: ImageAsset,
    onClick: () -> Unit,
    modifier: Modifier = Modifier.None,
    shape: Shape = CircleShape,
    color: Color = MaterialTheme.colors().primary,
    elevation: Dp = 6.dp
): Unit

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

It draws the icon in the center of the FAB.

import androidx.ui.material.FloatingActionButton

FloatingActionButton(icon = icon, onClick = { /*do something*/ })
Parameters
icon: ImageAsset Image to draw in the center
onClick: () -> Unit will be called when user clicked on the button
modifier: Modifier = Modifier.None Modifier to be applied to the button.
color: Color = MaterialTheme.colors().primary The background color
elevation: Dp = 6.dp The z-coordinate at which to place this button. This controls the size of the shadow below the button

FloatingActionButton

@Composable fun FloatingActionButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier.None,
    icon: ImageAsset? = null,
    textStyle: TextStyle? = null,
    color: Color = MaterialTheme.colors().primary,
    elevation: Dp = 6.dp
): Unit

An extended FloatingActionButton with an icon and a text.

import androidx.ui.material.FloatingActionButton

FloatingActionButton(icon = icon, text = "ADD TO BASKET", onClick = { /*do something*/ })
Parameters
text: String Text to display.
onClick: () -> Unit will be called when user clicked on the button
modifier: Modifier = Modifier.None Modifier to be applied to the button.
icon: ImageAsset? = null Image to draw to the left of the text. It is optional
textStyle: TextStyle? = null Optional TextStyle to apply for a text
color: Color = MaterialTheme.colors().primary The background color
elevation: Dp = 6.dp The z-coordinate at which to place this button. This controls the size if the shadow below the button.

IconButton

@Composable fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier.None,
    children: () -> 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. children 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.

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

import androidx.ui.foundation.Icon
import androidx.ui.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.None optional Modifier for this IconButton
children: () -> Unit the content (icon) to be drawn inside the IconButton. This is typically an androidx.ui.foundation.Icon.

IconToggleButton

@Composable fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier.None,
    children: () -> 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.state
import androidx.ui.animation.animate
import androidx.ui.foundation.Icon
import androidx.ui.graphics.Color
import androidx.ui.material.IconToggleButton

var checked by state { 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.None optional Modifier for this IconToggleButton
children: () -> Unit the content (icon) to be drawn inside the IconToggleButton. This is typically an androidx.ui.foundation.Icon.

LinearProgressIndicator

@Composable fun LinearProgressIndicator(
    progress: Float,
    color: Color = MaterialTheme.colors().primary
): Unit

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

Parameters
progress: Float The progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress
color: Color = MaterialTheme.colors().primary The color of the progress indicator.

LinearProgressIndicator

@Composable fun LinearProgressIndicator(color: Color = MaterialTheme.colors().primary): 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.

ListItem

@Composable fun ListItem(
    text: String,
    icon: ImageAsset? = null,
    secondaryText: String? = null,
    singleLineSecondaryText: Boolean = true,
    overlineText: String? = null,
    metaText: String? = null,
    onClick: () -> Unit = null
): Unit

Material Design implementation of list items.

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

  • one-line items
import androidx.ui.core.Text
import androidx.ui.foundation.Image
import androidx.ui.layout.Column
import androidx.ui.material.Divider
import androidx.ui.material.ListItem

Column {
    ListItem(text = "One line list item with no icon")
    Divider()
    ListItem(text = "פריט ברשימה אחת עם תמונה.", icon = icon24x24)
    Divider()
    ListItem(text = "One line list item with 24x24 icon", icon = icon24x24)
    Divider()
    ListItem(text = "One line list item with 40x40 icon", icon = icon40x40)
    Divider()
    ListItem(text = "One line list item with 56x56 icon", icon = icon56x56)
    Divider()
    ListItem(text = "One line clickable list item", icon = icon56x56, onClick = {})
    Divider()
    ListItem(
        text = { Text("One line list item with trailing icon") },
        trailing = { Image(icon24x24) }
    )
    Divider()
    ListItem(
        text = { Text("One line list item") },
        icon = { Image(icon40x40) },
        trailing = { Image(icon24x24) }
    )
    Divider()
}
  • two-line items
import androidx.ui.core.Text
import androidx.ui.foundation.Image
import androidx.ui.layout.Column
import androidx.ui.material.Divider
import androidx.ui.material.ListItem

Column {
    ListItem(text = "Two line list item", secondaryText = "Secondary text")
    Divider()
    ListItem(text = "Two line list item", overlineText = "OVERLINE")
    Divider()
    ListItem(
        text = "Two line list item with 24x24 icon",
        secondaryText = "Secondary text",
        icon = icon24x24
    )
    Divider()
    ListItem(
        text = "Two line list item with 40x40 icon",
        secondaryText = "Secondary text",
        icon = icon40x40
    )
    Divider()
    ListItem(
        text = "Two line list item with 40x40 icon",
        secondaryText = "Secondary text",
        metaText = "meta",
        icon = icon40x40
    )
    Divider()
    ListItem(
        text = { Text("Two line list item") },
        secondaryText = { Text("Secondary text") },
        icon = { Image(icon40x40) },
        trailing = {
            // TODO(popam): put checkbox here after b/140292836 is fixed
            Image(icon24x24)
        }
    )
    Divider()
}
  • three-line items
import androidx.ui.core.Text
import androidx.ui.foundation.Image
import androidx.ui.layout.Column
import androidx.ui.material.Divider
import androidx.ui.material.ListItem

Column {
    ListItem(
        text = "Three line list item",
        secondaryText = "This is a long secondary text for the current list item, displayed" +
                " on two lines",
        singleLineSecondaryText = false,
        metaText = "meta"
    )
    Divider()
    ListItem(
        text = "Three line list item",
        overlineText = "OVERLINE",
        secondaryText = "Secondary text"
    )
    Divider()
    ListItem(
        text = "Three line list item with 24x24 icon",
        secondaryText = "This is a long secondary text for the current list item, displayed" +
                " on two lines",
        singleLineSecondaryText = false,
        icon = icon24x24
    )
    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 = { Image(icon40x40) }
    )
    Divider()
    ListItem(
        text = "Three line list item",
        overlineText = "OVERLINE",
        secondaryText = "Secondary text",
        metaText = "meta"
    )
    Divider()
}
Parameters
text: String The primary text of the list item
icon: ImageAsset? = null The leading supporting visual of the list item
secondaryText: String? = null The secondary text of the list item
singleLineSecondaryText: Boolean = true Whether the secondary text is single line
overlineText: String? = null The text displayed above the primary text
metaText: String? = null The meta text to be displayed in the trailing position
onClick: () -> Unit = null Callback to be invoked when the list item is clicked

ListItem

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

Material Design implementation of list items.

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

  • one-line items
import androidx.ui.core.Text
import androidx.ui.foundation.Image
import androidx.ui.layout.Column
import androidx.ui.material.Divider
import androidx.ui.material.ListItem

Column {
    ListItem(text = "One line list item with no icon")
    Divider()
    ListItem(text = "פריט ברשימה אחת עם תמונה.", icon = icon24x24)
    Divider()
    ListItem(text = "One line list item with 24x24 icon", icon = icon24x24)
    Divider()
    ListItem(text = "One line list item with 40x40 icon", icon = icon40x40)
    Divider()
    ListItem(text = "One line list item with 56x56 icon", icon = icon56x56)
    Divider()
    ListItem(text = "One line clickable list item", icon = icon56x56, onClick = {})
    Divider()
    ListItem(
        text = { Text("One line list item with trailing icon") },
        trailing = { Image(icon24x24) }
    )
    Divider()
    ListItem(
        text = { Text("One line list item") },
        icon = { Image(icon40x40) },
        trailing = { Image(icon24x24) }
    )
    Divider()
}
  • two-line items
import androidx.ui.core.Text
import androidx.ui.foundation.Image
import androidx.ui.layout.Column
import androidx.ui.material.Divider
import androidx.ui.material.ListItem

Column {
    ListItem(text = "Two line list item", secondaryText = "Secondary text")
    Divider()
    ListItem(text = "Two line list item", overlineText = "OVERLINE")
    Divider()
    ListItem(
        text = "Two line list item with 24x24 icon",
        secondaryText = "Secondary text",
        icon = icon24x24
    )
    Divider()
    ListItem(
        text = "Two line list item with 40x40 icon",
        secondaryText = "Secondary text",
        icon = icon40x40
    )
    Divider()
    ListItem(
        text = "Two line list item with 40x40 icon",
        secondaryText = "Secondary text",
        metaText = "meta",
        icon = icon40x40
    )
    Divider()
    ListItem(
        text = { Text("Two line list item") },
        secondaryText = { Text("Secondary text") },
        icon = { Image(icon40x40) },
        trailing = {
            // TODO(popam): put checkbox here after b/140292836 is fixed
            Image(icon24x24)
        }
    )
    Divider()
}
  • three-line items
import androidx.ui.core.Text
import androidx.ui.foundation.Image
import androidx.ui.layout.Column
import androidx.ui.material.Divider
import androidx.ui.material.ListItem

Column {
    ListItem(
        text = "Three line list item",
        secondaryText = "This is a long secondary text for the current list item, displayed" +
                " on two lines",
        singleLineSecondaryText = false,
        metaText = "meta"
    )
    Divider()
    ListItem(
        text = "Three line list item",
        overlineText = "OVERLINE",
        secondaryText = "Secondary text"
    )
    Divider()
    ListItem(
        text = "Three line list item with 24x24 icon",
        secondaryText = "This is a long secondary text for the current list item, displayed" +
                " on two lines",
        singleLineSecondaryText = false,
        icon = icon24x24
    )
    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 = { Image(icon40x40) }
    )
    Divider()
    ListItem(
        text = "Three line list item",
        overlineText = "OVERLINE",
        secondaryText = "Secondary text",
        metaText = "meta"
    )
    Divider()
}
Parameters
text: () -> Unit The primary text of 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
onClick: () -> Unit = null Callback to be invoked when the list item is clicked

MaterialTheme

@Composable fun MaterialTheme(
    colors: ColorPalette = lightColorPalette(),
    typography: Typography = Typography(),
    children: () -> Unit
): Unit

This component defines the styling principles from the Material design specification. It must be present within a hierarchy of components that includes Material components, as it defines key values such as base colors and typography.

Material components such as Button and Checkbox use this definition to set default values.

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

All values may be set by providing this component with the colors and typography attributes. Use this to configure the overall theme of your application.

import androidx.ui.foundation.isSystemInDarkTheme
import androidx.ui.graphics.Color
import androidx.ui.material.FloatingActionButton
import androidx.ui.material.MaterialTheme
import androidx.ui.material.Typography
import androidx.ui.material.darkColorPalette
import androidx.ui.material.lightColorPalette
import androidx.ui.text.TextStyle

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

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

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

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

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

ModalDrawerLayout

@Composable fun ModalDrawerLayout(
    drawerState: DrawerState,
    onStateChange: (DrawerState) -> Unit,
    gesturesEnabled: Boolean = true,
    drawerContent: () -> Unit,
    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 StaticDrawer for always visible drawer, suitable for tablet or desktop. See BottomDrawerLayout for a layout that introduces a bottom drawer, suitable when using bottom navigation.

import androidx.compose.state
import androidx.ui.material.ModalDrawerLayout

val (state, onStateChange) = state { DrawerState.Closed }
val appContentText =
    if (state == DrawerState.Closed) ">>> Pull to open >>>" else "<<< Swipe to close <<<"
ModalDrawerLayout(
    drawerState = state,
    onStateChange = onStateChange,
    drawerContent = { YourDrawerContent(onStateChange) },
    bodyContent = { YourAppContent(appContentText, onStateChange) }
)
Parameters
drawerState: DrawerState state of the drawer
onStateChange: (DrawerState) -> Unit lambda to be invoked when the drawer requests to change its state, e.g. when the drawer is being swiped to the new state or when the scrim is clicked
gesturesEnabled: Boolean = true whether or not drawer can be interacted by gestures
drawerContent: () -> Unit composable that represents content inside the drawer
bodyContent: () -> Unit content of the rest of the UI
Exceptions
IllegalStateException when parent has Px.Infinity width

OutlinedButton

@Composable inline fun OutlinedButton(
    noinline onClick: () -> Unit,
    modifier: Modifier = Modifier.None,
    enabled: Boolean = true,
    elevation: Dp = 0.dp,
    shape: Shape = MaterialTheme.shapes().button,
    border: Border? = Border( 1.dp, MaterialTheme.colors().onSurface.copy(alpha = OutlinedStrokeOpacity) ),
    backgroundColor: Color = MaterialTheme.colors().surface,
    contentColor: Color = MaterialTheme.colors().primary,
    innerPadding: EdgeInsets = Button.DefaultInnerPadding,
    noinline children: () -> 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 ColorPalette.primary then the text will by default use ColorPalette.onPrimary.

import androidx.ui.core.Text
import androidx.ui.material.OutlinedButton

OutlinedButton(onClick = { /* Do something! */ }) {
    Text("Outlined Button")
}
Parameters
onClick: () -> Unit Will be called when the user clicks the button
modifier: Modifier = Modifier.None 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
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().button Defines the button's shape as well as its shadow
border: Border? = Border( 1.dp, MaterialTheme.colors().onSurface.copy(alpha = OutlinedStrokeOpacity) ) Border to draw around the button
backgroundColor: Color = MaterialTheme.colors().surface The background color. Use Color.Transparent to have no color
contentColor: Color = MaterialTheme.colors().primary The preferred content color. Will be used by text and iconography
innerPadding: EdgeInsets = Button.DefaultInnerPadding The spacing values to apply internally between the container and the content

ProvideEmphasis

@Composable fun ProvideEmphasis(
    emphasis: Emphasis,
    children: () -> Unit
): Unit

Applies emphasis to children, by modifying the value of contentColor.

See MaterialTheme.emphasisLevels to retrieve the levels of emphasis provided in the theme, so they can be applied with this function.

import androidx.ui.core.Text
import androidx.ui.layout.Column
import androidx.ui.material.ProvideEmphasis

Column {
    Text("No emphasis applied - 100% opacity")
    val emphasisLevels = MaterialTheme.emphasisLevels()
    ProvideEmphasis(emphasisLevels.high) {
        Text("High emphasis applied - 87% opacity")
    }
    ProvideEmphasis(emphasisLevels.medium) {
        Text("Medium emphasis applied - 60% opacity")
    }
    ProvideEmphasis(emphasisLevels.disabled) {
        Text("Disabled emphasis applied - 38% opacity")
    }
}

RadioButton

@Composable fun RadioButton(
    selected: Boolean,
    onSelect: () -> Unit,
    color: Color = MaterialTheme.colors().secondary
): Unit

Component to represent two states, selected and not selected.

RadioButton is usually used as a child of RadioGroupScope.RadioGroupItem, and these items and coupled together to RadioGroup to represent a multiple exclusion set of options the user can choose from.

import androidx.compose.state
import androidx.ui.layout.Row
import androidx.ui.material.RadioButton

// we have two radio buttons and only one can be selected
// let's emulate binary choice here
var enterTheMatrix by state { true }
Row {
    RadioButton(
        selected = enterTheMatrix,
        onSelect = { enterTheMatrix = true },
        color = Color.Red
    )
    RadioButton(
        selected = !enterTheMatrix,
        onSelect = { enterTheMatrix = false },
        color = Color.Blue
    )
}
Parameters
selected: Boolean boolean state for this button: either it is selected or not
onSelect: () -> Unit callback to be invoked when RadioButton is being clicked, therefore the selection of this item is requested. Not invoked if item is already selected
color: Color = MaterialTheme.colors().secondary color of the RadioButton

RadioGroup

@Composable fun RadioGroup(children: RadioGroupScope.() -> Unit): Unit

Components for creating mutually exclusive set of RadioButtons. Because of the nature of mutually exclusive set, when radio button is selected, it can't be unselected by being pressed again.

Typical children for RadioGroup will be RadioGroupScope.RadioGroupItem and following usage:

import androidx.compose.state
import androidx.ui.core.Text
import androidx.ui.foundation.Box
import androidx.ui.layout.Column
import androidx.ui.layout.LayoutPadding
import androidx.ui.layout.Row
import androidx.ui.material.RadioButton
import androidx.ui.material.RadioGroup

val radioOptions = listOf("Disagree", "Neutral", "Agree")
val (selectedOption, onOptionSelected) = state { radioOptions[0] }

RadioGroup {
    Row {
        radioOptions.forEach { text ->
            val selected = text == selectedOption
            RadioGroupItem(
                selected = selected,
                onSelect = { onOptionSelected(text) }) {
                // TODO: remove Box when Ripple becomes a modifier
                Box {
                    Column(modifier = LayoutPadding(10.dp)) {
                        RadioButton(
                            selected = selected,
                            onSelect = { onOptionSelected(text) })
                        Text(text = text)
                    }
                }
            }
        }
    }
}
If you want a simplified version with Column of RadioGroupScope.RadioGroupTextItem,consider using version that accepts list of String options and doesn't require any children

RadioGroup

@Composable fun RadioGroup(
    options: List<String>,
    selectedOption: String?,
    onSelectedChange: (String) -> Unit,
    radioColor: Color = MaterialTheme.colors().secondary,
    textStyle: TextStyle? = null
): Unit

Components for creating mutually exclusive set of RadioButton as well as text label for this RadioButtons. Because of the nature of mutually exclusive set, when radio button is selected, it can't be unselected by being pressed again. This component guarantees that there will be only one or none selected RadioButton at a time.

This component is ready to use without children being passed and it places the options into a Column of RadioGroupScope.RadioGroupTextItem.

import androidx.compose.state
import androidx.ui.material.RadioGroup

val radioOptions = listOf("Calls", "Missed", "Friends")
val (selectedOption, onOptionSelected) = state { radioOptions[0] }
RadioGroup(
    options = radioOptions,
    selectedOption = selectedOption,
    onSelectedChange = onOptionSelected
)
Parameters
options: List<String> list of String to provide RadioButtons label
selectedOption: String? label which represents selected RadioButton, or null if nothing is selected
onSelectedChange: (String) -> Unit callback to be invoked when RadioButton is clicked, therefore the selection of this item is requested
radioColor: Color = MaterialTheme.colors().secondary color for RadioButtons when selected.
textStyle: TextStyle? = null parameters for text customization

Scaffold

@Composable fun Scaffold(
    scaffoldState: ScaffoldState = remember { ScaffoldState() },
    topAppBar: () -> Unit = null,
    bottomAppBar: (BottomAppBar.FabConfiguration?) -> Unit = null,
    floatingActionButton: () -> Unit = null,
    floatingActionButtonPosition: Scaffold.FabPosition = FabPosition.End,
    drawerContent: () -> Unit = null,
    bodyContent: (Modifier) -> Unit
): Unit

Scaffold implements the basic material design visual layout structure.

This component provides API to put together several material components to construct your screen, by ensuring proper layout strategy for them and collecting necessary data so these components will work together correctly.

Simple example of a Scaffold with TopAppBar, FloatingActionButton and drawer:

import androidx.compose.remember
import androidx.ui.core.Text
import androidx.ui.foundation.ColoredRect
import androidx.ui.foundation.Icon
import androidx.ui.foundation.VerticalScroller
import androidx.ui.layout.Column
import androidx.ui.material.FloatingActionButton
import androidx.ui.material.IconButton
import androidx.ui.material.Scaffold
import androidx.ui.material.ScaffoldState
import androidx.ui.material.TopAppBar

val scaffoldState = remember { ScaffoldState() }
Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = { Text("Drawer content") },
    topAppBar = {
        TopAppBar(
            title = { Text("Simple Scaffold Screen") },
            navigationIcon = {
                IconButton(onClick = {
                    scaffoldState.drawerState = DrawerState.Opened
                }) {
                    Icon(Icons.Filled.Menu)
                }
            }
        )
    },
    floatingActionButtonPosition = Scaffold.FabPosition.End,
    floatingActionButton = {
        FloatingActionButton(onClick = { /* fab click handler */ }) {
            Text("Inc")
        }
    },
    bodyContent = { modifier ->
        VerticalScroller {
            Column(modifier) {
                repeat(100) {
                    ColoredRect(color = colors[it % colors.size], height = 50.dp)
                }
            }
        }
    }
)
More fancy usage with BottomAppBar with cutout and docked FloatingActionButton, whichanimates it's shape when clicked:
import androidx.animation.TweenBuilder
import androidx.compose.remember
import androidx.ui.animation.animatedFloat
import androidx.ui.core.Text
import androidx.ui.foundation.ColoredRect
import androidx.ui.foundation.Icon
import androidx.ui.foundation.VerticalScroller
import androidx.ui.foundation.shape.corner.CutCornerShape
import androidx.ui.foundation.shape.corner.RoundedCornerShape
import androidx.ui.layout.Column
import androidx.ui.layout.LayoutPadding
import androidx.ui.material.BottomAppBar
import androidx.ui.material.FloatingActionButton
import androidx.ui.material.IconButton
import androidx.ui.material.Scaffold
import androidx.ui.material.ScaffoldState
import androidx.ui.material.TopAppBar

val scaffoldState = remember { ScaffoldState() }

// Consider negative values to mean 'cut corner' and positive values to mean 'round corner'
val sharpEdgePercent = -50f
val roundEdgePercent = 45f
// Start with sharp edges
val animatedProgress = animatedFloat(sharpEdgePercent)
// animation value to animate shape
val progress = animatedProgress.value.roundToInt()

// When progress is 0, there is no modification to the edges so we are just drawing a rectangle.
// This allows for a smooth transition between cut corners and round corners.
val fabShape = if (progress < 0) {
    CutCornerShape(abs(progress))
} else if (progress == roundEdgePercent.toInt()) {
    CircleShape
} else {
    RoundedCornerShape(progress)
}
// lambda to call to trigger shape animation
val changeShape = {
    val target = animatedProgress.targetValue
    val nextTarget = if (target == roundEdgePercent) sharpEdgePercent else roundEdgePercent
    animatedProgress.animateTo(
        targetValue = nextTarget,
        anim = TweenBuilder<Float>().apply { duration = 600 }
    )
}

Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = { Text("Drawer content") },
    topAppBar = { TopAppBar(title = { Text("Scaffold with bottom cutout") }) },
    bottomAppBar = { fabConfiguration ->
        BottomAppBar(fabConfiguration = fabConfiguration, cutoutShape = fabShape) {
            IconButton(onClick = {
                scaffoldState.drawerState = DrawerState.Opened
            }) {
                Icon(Icons.Filled.Menu)
            }
        }
    },
    floatingActionButton = {
        FloatingActionButton(
            onClick = changeShape,
            shape = fabShape,
            color = MaterialTheme.colors().secondary
        ) {
            Text("Change shape", modifier = LayoutPadding(12.dp))
        }
    },
    floatingActionButtonPosition = Scaffold.FabPosition.CenterDocked,
    bodyContent = { modifier ->
        VerticalScroller {
            Column(modifier) {
                repeat(100) {
                    ColoredRect(color = colors[it % colors.size], height = 50.dp)
                }
            }
        }
    }
)
Parameters
scaffoldState: ScaffoldState = remember { ScaffoldState() } state of this scaffold widget. It contains the state of the screen, e.g. variables to provide manual control over the drawer behavior
topAppBar: () -> Unit = null top app bar of the screen. Consider using TopAppBar.
bottomAppBar: (BottomAppBar.FabConfiguration?) -> Unit = null bottom bar of the screen. Consider using BottomAppBar. The slot Parameter FabConfiguration is necessary to be passed as a parameter to BottomAppBar in order to ensure proper FloatingActionButton + BottomAppBar behavior.
floatingActionButton: () -> Unit = null Main action button of your screen. Consider using FloatingActionButton for this slot.
floatingActionButtonPosition: Scaffold.FabPosition = FabPosition.End position of the FAB on the screen. See FabPosition for possible options available.
drawerContent: () -> Unit = null content of the Drawer sheet that can be pulled from the left side (right for RTL).
bodyContent: (Modifier) -> Unit content of your screen. The lambda receives a Modifier that should be applied to the content root to get the desired behavior. If you're using VerticalScroller, apply this modifier to the child of the scroller, and not on the scroller itself.

Slider

@Composable fun Slider(
    position: SliderPosition,
    onValueChange: (Float) -> Unit = { position.value = it },
    modifier: Modifier = Modifier.None,
    onValueChangeEnd: () -> Unit = {},
    color: Color = MaterialTheme.colors().primary
): Unit

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

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Use continuous sliders allow users to make meaningful selections that don’t require a specific value:

import androidx.ui.material.Slider
import androidx.ui.material.SliderPosition

Slider(SliderPosition())

You can allow the user to choose only between predefined set of values by providing discrete values in SliderPosition.

You can do it by specifying the amount of steps between min and max values:

import androidx.ui.material.Slider
import androidx.ui.material.SliderPosition

val position = SliderPosition(
    initial = 0f,
    valueRange = 0f..100f,
    steps = 5
)
Slider(position, color = Color.Black)
Parameters
position: SliderPosition SliderPosition object to represent value of the Slider
onValueChange: (Float) -> Unit = { position.value = it } lambda in which value should be updated
modifier: Modifier = Modifier.None modifiers for the Slider layout
onValueChangeEnd: () -> Unit = {} lambda to be invoked when value change has ended. This callback shouldn't be used to update the slider value (use onValueChange for that), but rather to know when the user has completed selecting a new value by ending a drag or a click.
color: Color = MaterialTheme.colors().primary color of the Slider

SliderPosition

@Composable fun SliderPosition(
    initial: Float = 0f,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    steps: Int = 0
): SliderPosition

Create and remember the state for a Slider based on the parameters, using the ambient animation clock.

Parameters
initial: Float = 0f initial value for the Slider when created. If outside of range provided, initial position will be coerced to this range
valueRange: ClosedFloatingPointRange<Float> = 0f..1f range of values that Slider value can take
steps: Int = 0 if greater than 0, specifies the amounts of discrete values, evenly distributed between across the whole value range. If 0, slider will behave as a continuous slider and allow to choose any value from the range specified

Snackbar

@Composable fun Snackbar(
    text: () -> Unit,
    action: () -> Unit = null,
    modifier: Modifier = Modifier.None,
    actionOnNewLine: Boolean = false
): Unit

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

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

A Snackbar can contain a single action. Because they disappear automatically, the action shouldn't be "Dismiss" or "Cancel".

import androidx.ui.core.Text
import androidx.ui.material.Snackbar
import androidx.ui.material.TextButton
import androidx.ui.material.snackbarPrimaryColorFor

Snackbar(
    text = { Text("Action has been done") },
    action = {
        TextButton(
            contentColor = snackbarPrimaryColorFor(MaterialTheme.colors()),
            onClick = { /* perform undo */ }
        ) {
            Text("UNDO")
        }
    }
)
Parameters
text: () -> Unit text component to show information about a process that an app has performed or will perform
action: () -> Unit = null action / button component to add as an action to the snackbar. Consider using snackbarPrimaryColorFor as the color for the action, if you do not have a predefined color you wish to use instead.
modifier: Modifier = Modifier.None modifiers for the the Snackbar layout
actionOnNewLine: Boolean = false whether or not action should be put on the separate line. Recommended for action with long action text

StaticDrawer

@Composable fun StaticDrawer(drawerContent: () -> Unit): Unit

Navigation drawers provide access to destinations in your app.

Standard navigation drawers allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they are not suitable for mobile due to limited screen size.

See ModalDrawerLayout and BottomDrawerLayout for more mobile friendly options.

import androidx.ui.core.Text
import androidx.ui.foundation.ColoredRect
import androidx.ui.layout.Center
import androidx.ui.layout.Row
import androidx.ui.material.StaticDrawer

Row(LayoutWidth.Fill) {
    StaticDrawer {
        Center {
            Text("Drawer Content")
        }
    }
    ColoredRect(Color.Black, width = 1.dp)
    Text("Rest of App")
}
Parameters
drawerContent: () -> Unit composable that represents content inside the drawer

Surface

@Composable fun Surface(
    modifier: Modifier = Modifier.None,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors().surface,
    contentColor: Color = contentColorFor(color),
    border: Border? = null,
    elevation: Dp = 0.dp,
    children: () -> Unit
): Unit

The Surface is responsible for:

  1. Clipping: Surface clips its children to the shape specified by shape
  2. Elevation: Surface elevates its children on the Z axis by elevation pixels, and draws the appropriate shadow.
  3. Borders: If shape has a border, then it will also be drawn.

Material surface is the central metaphor in material design. Each surface exists at a given elevation, which influences how that piece of surface visually relates to other surfaces and how that surface casts shadows.

contentColor is the preferred color for any children inside this surface - any Text inside this Surface will use this color by default.

If no contentColor is set, this surface will try and match its background color to a color defined in the theme ColorPalette, and return the corresponding onFoo color. For example, if the color of this surface is ColorPalette.surface, contentColor will be set to ColorPalette.onSurface. If color is not part of the theme palette, contentColor will keep the same value set above this Surface.

To modify these default style values used by text, use CurrentTextStyleProvider or explicitly pass a new TextStyle to your text.

To manually retrieve the content color inside a surface, use contentColor.

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

Switch

@Composable fun Switch(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    color: Color = MaterialTheme.colors().secondaryVariant
): Unit

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

import androidx.compose.state
import androidx.ui.material.Switch

val checkedState = state { true }
Switch(
    checked = checkedState.value,
    onCheckedChange = { checkedState.value = it }
)
Parameters
checked: Boolean whether or not this components is checked
onCheckedChange: (Boolean) -> Unit callback to be invoked when Switch is being clicked, therefore the change of checked state is requested. if null, Switch appears in checked state and remains disabled
color: Color = MaterialTheme.colors().secondaryVariant active color for Switch,

Tab

@Composable fun Tab(
    text: () -> Unit = emptyContent(),
    icon: () -> Unit = emptyContent(),
    selected: Boolean,
    onSelected: () -> Unit,
    activeColor: Color = contentColor(),
    inactiveColor: Color = MaterialTheme.emphasisLevels().medium.emphasize(activeColor)
): Unit

A Tab represents a single page of content using a text label and/or icon. It represents its selected state by tinting the text label and/or image with activeColor.

This should typically be used inside of a TabRow, see the corresponding documentation for example usage.

This Tab has slots for text and/or icon - see the other Tab overload for a generic Tab that is not opinionated about its content.

Parameters
text: () -> Unit = emptyContent() the text label displayed in this tab
icon: () -> Unit = emptyContent() the icon displayed in this tab
selected: Boolean whether this tab is selected or not
onSelected: () -> Unit the callback to be invoked when this tab is selected
activeColor: Color = contentColor() the color for the content of this tab when selected
inactiveColor: Color = MaterialTheme.emphasisLevels().medium.emphasize(activeColor) the color for the content of this tab when not selected

Tab

@Composable fun Tab(
    selected: Boolean,
    onSelected: () -> Unit,
    children: () -> Unit
): Unit

Generic Tab overload that is not opinionated about content / color. See the other overload for a Tab that has specific slots for text and / or an icon, as well as providing the correct colors for selected / unselected states.

A custom tab using this API may look like:

import androidx.compose.emptyContent
import androidx.ui.core.Text
import androidx.ui.foundation.Box
import androidx.ui.foundation.DrawBackground
import androidx.ui.layout.Column
import androidx.ui.layout.LayoutHeight
import androidx.ui.layout.LayoutPadding
import androidx.ui.layout.LayoutSize
import androidx.ui.material.Tab

Tab(selected, onClick) {
    Column(
        LayoutPadding(10.dp) + LayoutHeight(50.dp) + LayoutWidth.Fill,
        arrangement = Arrangement.SpaceBetween
    ) {
        Box(
            LayoutSize(10.dp) + LayoutGravity.Center + DrawBackground(
                color = if (selected) Color.Red else Color.White
            ),
            children = emptyContent()
        )
        Text(
            text = title,
            style = MaterialTheme.typography().body1,
            modifier = LayoutGravity.Center
        )
    }
}
Parameters
selected: Boolean whether this tab is selected or not
onSelected: () -> Unit the callback to be invoked when this tab is selected
children: () -> Unit the content of this tab

TabRow

@Composable fun <T> TabRow(
    items: List<T>,
    selectedIndex: Int,
    color: Color = MaterialTheme.colors().primarySurface,
    contentColor: Color = contentColorFor(color),
    scrollable: Boolean = false,
    indicatorContainer: (tabPositions: List<TabRow.TabPosition>) -> Unit = { tabPositions -> TabRow.IndicatorContainer(tabPositions, selectedIndex) { TabRow.Indicator() } },
    divider: () -> Unit = { Divider(height = 1.dp, color = contentColor().copy(alpha = DividerOpacity)) },
    tab: (Int, T) -> Unit
): Unit

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

A simple example with text tabs looks like:

import androidx.compose.state
import androidx.ui.core.Text
import androidx.ui.layout.Column
import androidx.ui.material.Tab
import androidx.ui.material.TabRow

var state by state { 0 }
val titles = listOf("TAB 1", "TAB 2", "TAB 3 WITH LOTS OF TEXT")
Column {
    TabRow(items = titles, selectedIndex = state) { index, text ->
        Tab(text = { Text(text) }, selected = state == index, onSelected = { state = index })
    }
    Text(
        modifier = LayoutGravity.Center,
        text = "Text tab ${state + 1} selected",
        style = MaterialTheme.typography().body1
    )
}
You can also provide your own custom tab, such as:
import androidx.compose.state
import androidx.ui.core.Text
import androidx.ui.layout.Column
import androidx.ui.material.TabRow

var state by state { 0 }
val titles = listOf("TAB 1", "TAB 2", "TAB 3")
Column {
    TabRow(items = titles, selectedIndex = state) { index, title ->
        FancyTab(title = title, onClick = { state = index }, selected = (index == state))
    }
    Text(
        modifier = LayoutGravity.Center,
        text = "Fancy tab ${state + 1} selected",
        style = MaterialTheme.typography().body1
    )
}
Where the custom tab itself could look like:
import androidx.compose.emptyContent
import androidx.ui.core.Text
import androidx.ui.foundation.Box
import androidx.ui.foundation.DrawBackground
import androidx.ui.layout.Column
import androidx.ui.layout.LayoutHeight
import androidx.ui.layout.LayoutPadding
import androidx.ui.layout.LayoutSize
import androidx.ui.material.Tab

Tab(selected, onClick) {
    Column(
        LayoutPadding(10.dp) + LayoutHeight(50.dp) + LayoutWidth.Fill,
        arrangement = Arrangement.SpaceBetween
    ) {
        Box(
            LayoutSize(10.dp) + LayoutGravity.Center + DrawBackground(
                color = if (selected) Color.Red else Color.White
            ),
            children = emptyContent()
        )
        Text(
            text = title,
            style = MaterialTheme.typography().body1,
            modifier = LayoutGravity.Center
        )
    }
}

As well as customizing the tab, you can also provide a custom indicatorContainer, to customize the indicator displayed for a tab. indicatorContainer is responsible for positioning an indicator and for animating its position when selectedIndex changes.

For example, given an indicator that draws a rounded rectangle near the edges of the Tab:

import androidx.ui.foundation.Border
import androidx.ui.foundation.DrawBorder
import androidx.ui.foundation.shape.corner.RoundedCornerShape
import androidx.ui.layout.LayoutPadding
import androidx.ui.layout.Stack

// Draws a rounded rectangular with border around the Tab, with a 5.dp padding from the edges
// Color is passed in as a parameter [color]
Stack(
    LayoutPadding(5.dp) + LayoutSize.Fill + DrawBorder(
        Border(2.dp, color),
        RoundedCornerShape(5.dp)
    )
) {}
We can reuse TabRow.IndicatorContainer and just provide this indicator, as we aren't changingthe transition:
import androidx.compose.state
import androidx.ui.core.Text
import androidx.ui.layout.Column
import androidx.ui.material.Tab
import androidx.ui.material.TabRow

var state by state { 0 }
val titles = listOf("TAB 1", "TAB 2", "TAB 3")

// Reuse the default transition, and provide our custom indicator as its child
val indicatorContainer = @Composable { tabPositions: List<TabRow.TabPosition> ->
    TabRow.IndicatorContainer(tabPositions = tabPositions, selectedIndex = state) {
        FancyIndicator(Color.White)
    }
}

Column {
    TabRow(
        items = titles,
        selectedIndex = state,
        indicatorContainer = indicatorContainer
    ) { index, text ->
        Tab(text = { Text(text) }, selected = state == index, onSelected = { state = index })
    }
    Text(
        modifier = LayoutGravity.Center,
        text = "Fancy indicator tab ${state + 1} selected",
        style = MaterialTheme.typography().body1
    )
}
You may also want to provide a custom transition, to allow you to dynamically change theappearance of the indicator as it animates between tabs, such as changing its color or size.indicatorContainer is stacked on top of the entire TabRow, so you just need to provide a customcontainer that animates the offset of the indicator from the start of the TabRow and place yourcustom indicator inside of it. For example, take the following custom container that animatesposition of the indicator, the color of the indicator, and also adds a physics based 'spring'effect to the indicator in the direction of motion:
import androidx.animation.transitionDefinition
import androidx.compose.remember
import androidx.compose.state
import androidx.ui.animation.ColorPropKey
import androidx.ui.animation.PxPropKey
import androidx.ui.animation.Transition
import androidx.ui.layout.Container
import androidx.ui.layout.LayoutPadding
import androidx.ui.unit.toPx

val indicatorStart = remember { PxPropKey() }
val indicatorEnd = remember { PxPropKey() }
val indicatorColor = remember { ColorPropKey() }

val colors = listOf(Color.Yellow, Color.Red, Color.Green)
val transitionDefinition =
    remember(tabPositions) {
        transitionDefinition {
            tabPositions.forEachIndexed { index, position ->
                state(index) {
                    this[indicatorStart] = position.left.toPx()
                    this[indicatorEnd] = position.right.toPx()
                    this[indicatorColor] = colors[index % colors.size]
                }
            }
            repeat(tabPositions.size) { from ->
                repeat(tabPositions.size) { to ->
                    if (from != to) {
                        transition(fromState = from, toState = to) {
                            // Handle directionality here, if we are moving to the right, we
                            // want the right side of the indicator to move faster, if we are
                            // moving to the left, we want the left side to move faster.
                            val startStiffness = if (from < to) 50f else 1000f
                            val endStiffness = if (from < to) 1000f else 50f
                            indicatorStart using physics {
                                dampingRatio = 1f
                                stiffness = startStiffness
                            }
                            indicatorEnd using physics {
                                dampingRatio = 1f
                                stiffness = endStiffness
                            }
                        }
                    }
                }
            }
        }
    }

// Fill up the entire TabRow with this container, and place children at the left so we can use
// Padding to set the 'offset'
Container(expanded = true, alignment = Alignment.BottomStart) {
    Transition(transitionDefinition, selectedIndex) { state ->
        val density = DensityAmbient.current
        val offset = with(density) { state[indicatorStart].toDp() }
        val width = with(density) {
            (state[indicatorEnd] - state[indicatorStart]).toDp()
        }
        Container(width = width, modifier = LayoutPadding(start = offset)) {
            // Pass the current color to the indicator
            FancyIndicator(state[indicatorColor])
        }
    }
}

This container will fill up the entire width of the TabRow, and when a new tab is selected, the transition will be called with a new value for selectedIndex, which will animate the indicator to the position of the new tab.

We can use this custom container similarly to before:

import androidx.compose.state
import androidx.ui.core.Text
import androidx.ui.layout.Column
import androidx.ui.material.Tab
import androidx.ui.material.TabRow

var state by state { 0 }
val titles = listOf("TAB 1", "TAB 2", "TAB 3")

val indicatorContainer = @Composable { tabPositions: List<TabRow.TabPosition> ->
    FancyIndicatorContainer(tabPositions = tabPositions, selectedIndex = state)
}

Column {
    TabRow(
        items = titles,
        selectedIndex = state,
        indicatorContainer = indicatorContainer
    ) { index, text ->
        Tab(text = { Text(text) }, selected = state == index, onSelected = { state = index })
    }
    Text(
        modifier = LayoutGravity.Center,
        text = "Fancy transition tab ${state + 1} selected",
        style = MaterialTheme.typography().body1
    )
}
Parameters
T the type of the item provided that will map to a Tab
items: List<T> the list containing the items used to build this TabRow
selectedIndex: Int the index of the currently selected tab
color: Color = MaterialTheme.colors().primarySurface The background color for the TabRow. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(color) The preferred content color provided by this TabRow to its children. Defaults to either the matching onFoo color for color, or if color is not a color from the theme, this will keep the same value set above this TabRow.
scrollable: Boolean = false if the tabs should be scrollable. If false the tabs will take up an equal amount of the space given to TabRow. If true the tabs will take up only as much space as they need, with any excess tabs positioned off screen and able to be scrolled to.
indicatorContainer: (tabPositions: List<TabRow.TabPosition>) -> Unit = { tabPositions -> TabRow.IndicatorContainer(tabPositions, selectedIndex) { TabRow.Indicator() } } the container responsible for positioning and animating the position of the indicator between tabs. By default this will be TabRow.IndicatorContainer, which animates a TabRow.Indicator between tabs.
divider: () -> Unit = { Divider(height = 1.dp, color = contentColor().copy(alpha = DividerOpacity)) } the divider displayed at the bottom of the TabRow. This provides a layer of separation between the TabRow and the content displayed underneath.
tab: (Int, T) -> Unit the Tab to be emitted for the given index and element of type T in items

TextButton

@Composable inline fun TextButton(
    noinline onClick: () -> Unit,
    modifier: Modifier = Modifier.None,
    enabled: Boolean = true,
    elevation: Dp = 0.dp,
    shape: Shape = MaterialTheme.shapes().button,
    border: Border? = null,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = MaterialTheme.colors().primary,
    innerPadding: EdgeInsets = TextButton.DefaultInnerPadding,
    noinline children: () -> Unit
): Unit

Material Design implementation of a Material Text Button.

Text buttons are typically used for less-pronounced actions, including those located in cards and dialogs.

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 ColorPalette.primary then the text will by default use ColorPalette.onPrimary.

import androidx.ui.core.Text
import androidx.ui.material.TextButton

TextButton(onClick = { /* Do something! */ }) {
    Text("Text Button")
}
Parameters
onClick: () -> Unit Will be called when the user clicks the button
modifier: Modifier = Modifier.None 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
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().button Defines the button's shape as well as its shadow
border: Border? = null Border to draw around the button
backgroundColor: Color = Color.Transparent The background color. Use Color.Transparent to have no color
contentColor: Color = MaterialTheme.colors().primary The preferred content color. Will be used by text and iconography
innerPadding: EdgeInsets = TextButton.DefaultInnerPadding The spacing values to apply internally between the container and the content

TopAppBar

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

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

This TopAppBar has slots for a title, navigation icon, and actions. Use the other TopAppBar overload for a generic TopAppBar with no restriction on content.

import androidx.ui.core.Text
import androidx.ui.foundation.Icon
import androidx.ui.material.IconButton
import androidx.ui.material.TopAppBar

TopAppBar(
    title = { Text("Simple TopAppBar") },
    navigationIcon = {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Menu)
        }
    },
    actions = {
        // RowScope here, so these icons will be placed horizontally
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Favorite)
        }
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Favorite)
        }
    }
)
Parameters
title: () -> Unit The title to be displayed in the center of the TopAppBar
navigationIcon: () -> Unit = null The navigation icon displayed at the start of the TopAppBar. This should typically be an IconButton or IconToggleButton.
actions: RowScope.() -> Unit = {} The actions displayed at the end of the TopAppBar. This should typically be IconButtons. The default layout here is a Row, so icons inside will be placed horizontally.
color: Color = MaterialTheme.colors().primarySurface The background color for the TopAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(color) The preferred content color provided by this TopAppBar to its children. Defaults to either the matching onFoo color for color, or if color is not a color from the theme, this will keep the same value set above this TopAppBar.
elevation: Dp = TopAppBarElevation the elevation of this TopAppBar.

TopAppBar

@Composable fun TopAppBar(
    modifier: Modifier = Modifier.None,
    color: Color = MaterialTheme.colors().primarySurface,
    contentColor: Color = contentColorFor(color),
    elevation: Dp = TopAppBarElevation,
    children: RowScope.() -> Unit
): Unit

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

This TopAppBar has no pre-defined slots for content, allowing you to customize the layout of content inside.

Parameters
color: Color = MaterialTheme.colors().primarySurface The background color for the TopAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(color) The preferred content color provided by this TopAppBar to its children. Defaults to either the matching onFoo color for color, or if color is not a color from the theme, this will keep the same value set above this TopAppBar.
elevation: Dp = TopAppBarElevation the elevation of this TopAppBar.
children: RowScope.() -> Unit the children of this TopAppBar.The default layout here is a Row, so content inside will be placed horizontally.

TriStateCheckbox

@Composable fun TriStateCheckbox(
    value: ToggleableState,
    onClick: () -> Unit,
    modifier: Modifier = Modifier.None,
    color: Color = MaterialTheme.colors().secondary
): Unit

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

import androidx.compose.remember
import androidx.compose.state
import androidx.ui.layout.Column
import androidx.ui.layout.LayoutPadding
import androidx.ui.material.Checkbox
import androidx.ui.material.TriStateCheckbox

Column {
    // define dependent checkboxes states
    val (state, onStateChange) = state { true }
    val (state2, onStateChange2) = state { true }

    // TriStateCheckbox state reflects state of dependent checkboxes
    val parentState = remember(state, state2) {
        if (state && state2) ToggleableState.On
        else if (!state && !state2) ToggleableState.Off
        else ToggleableState.Indeterminate
    }
    // click on TriStateCheckbox can set state for dependent checkboxes
    val onParentClick = {
        val s = parentState != ToggleableState.On
        onStateChange(s)
        onStateChange2(s)
    }

    TriStateCheckbox(value = parentState, onClick = onParentClick, color = Color.Black)
    Column(LayoutPadding(start = 10.dp)) {
        Checkbox(state, onStateChange)
        Checkbox(state2, onStateChange2)
    }
}

See Also

Parameters
value: ToggleableState whether TriStateCheckbox is checked, unchecked or in indeterminate state
onClick: () -> Unit callback to be invoked when checkbox is being clicked, therefore the change of ToggleableState state is requested. If null, TriStateCheckbox appears in the value state and remains disabled
modifier: Modifier = Modifier.None Modifier to be applied to the layout of the checkbox
color: Color = MaterialTheme.colors().secondary custom color for checkbox

contentColorFor

@Composable fun contentColorFor(color: Color): Color

Tries to match color to a color in the current ColorPalette, and then returns the corresponding on color. If color can not be matched to the palette, then this will return the existing value for contentColor at this point in the tree.

darkColorPalette

fun darkColorPalette(
    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
): ColorPalette

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

lightColorPalette

fun lightColorPalette(
    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
): ColorPalette

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

See Also

snackbarPrimaryColorFor

fun snackbarPrimaryColorFor(colors: ColorPalette): Color

Provides a best-effort 'primary' color to be used as the primary color inside a Snackbar. Given that Snackbars have an 'inverted' theme, i.e in a light theme they appear dark, and in a dark theme they appear light, just using ColorPalette.primary will not work, and has incorrect contrast.

If your light theme has a corresponding dark theme, you should instead directly use ColorPalette.primary from the dark theme when in a light theme, and use ColorPalette.primaryVariant from the dark theme when in a dark theme.

When in a light theme, this function applies a color overlay to ColorPalette.primary from colors to attempt to reduce the contrast, and when in a dark theme this function uses ColorPalette.primaryVariant.

Parameters
colors: ColorPalette the ColorPalette to calculate the Snackbar primary color for

Top-level properties

EmphasisAmbient

val EmphasisAmbient: Ambient<EmphasisLevels>

Ambient containing the current EmphasisLevels in this hierarchy.

Extension functions

BottomNavigationItem

@Composable fun RowScope.BottomNavigationItem(
    icon: () -> Unit,
    text: () -> Unit = emptyContent(),
    selected: Boolean,
    onSelected: () -> Unit,
    modifier: Modifier = Modifier.None,
    alwaysShowLabels: Boolean = true,
    activeColor: Color = contentColor(),
    inactiveColor: Color = MaterialTheme.emphasisLevels().medium.emphasize(activeColor)
): 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.ui.foundation.Icon
text: () -> Unit = emptyContent() optional text for this item
selected: Boolean whether this item is selected
onSelected: () -> Unit the callback to be invoked when this item is selected
modifier: Modifier = Modifier.None optional Modifier 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.
activeColor: Color = contentColor() the color of the text and icon when this item is selected
inactiveColor: Color = MaterialTheme.emphasisLevels().medium.emphasize(activeColor) the color of the text and icon when this item is not selected

contentColorFor

fun ColorPalette.contentColorFor(color: Color): Color?

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

For example, when color is ColorPalette.primary, this will return ColorPalette.onPrimary. If color is not present in the theme, this will return null.

Return
the matching on color for color. If color is not part of the theme's ColorPalette, then returns null.

See Also

Extension properties

primarySurface

val ColorPalette.primarySurface: Color

primarySurface represents the background color of components that are ColorPalette.primary in light theme, and ColorPalette.surface in dark theme, such as androidx.ui.material.TabRow and androidx.ui.material.TopAppBar. This is to reduce brightness of large surfaces in dark theme, aiding contrast and readability. See Dark Theme.

Return
ColorPalette.primary if in light theme, else ColorPalette.surface