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

androidx.ui.material

Classes

RadioGroupScope

Scope of RadioGroup to grant access to RadioGroupItem and others.

ScaffoldState

State for Scaffold composable component.

Shapes

Components are grouped into shape categories based on their size.

Typography

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, shape: Shape = MaterialTheme.shapes.medium)

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, shape: Shape = MaterialTheme.shapes.medium)

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

Unit
BottomAppBar(modifier: Modifier = Modifier, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), cutoutShape: Shape? = null, content: 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, drawerShape: Shape = MaterialTheme.shapes.large, drawerElevation: Dp = DrawerConstants.DefaultElevation, drawerContent: () -> Unit, bodyContent: () -> Unit)

Navigation drawers provide access to destinations in your app.

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

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

Unit
BottomNavigationItem(icon: () -> Unit, text: () -> Unit = emptyContent(), selected: Boolean, onSelected: () -> Unit, modifier: Modifier = Modifier, alwaysShowLabels: Boolean = true, activeColor: Color = contentColor(), inactiveColor: Color = EmphasisAmbient.current.medium.applyEmphasis(activeColor))

A BottomNavigationItem represents a singular primary destination in your application.

Unit
Button(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, elevation: Dp = 2.dp, disabledElevation: Dp = 0.dp, shape: Shape = MaterialTheme.shapes.small, border: Border? = null, backgroundColor: Color = MaterialTheme.colors.primary, disabledBackgroundColor: Color = Button.defaultDisabledBackgroundColor, contentColor: Color = contentColorFor(backgroundColor), disabledContentColor: Color = Button.defaultDisabledContentColor, padding: InnerPadding = Button.DefaultInnerPadding, text: () -> Unit)

Material Design implementation of a Material Contained Button.

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

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

Unit
Checkbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit, enabled: Boolean = true, modifier: Modifier = Modifier, checkedColor: Color = MaterialTheme.colors.secondary, uncheckedColor: Color = MaterialTheme.colors.onSurface, disabledColor: Color = MaterialTheme.colors.onSurface, checkMarkColor: Color = MaterialTheme.colors.surface)

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

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

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

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

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

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

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

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

A Material Design dropdown menu.

Unit
DropdownMenuItem(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, content: () -> Unit)

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

Unit
ExtendedFloatingActionButton(text: () -> Unit, onClick: () -> Unit, modifier: Modifier = Modifier, icon: () -> Unit = null, shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)), backgroundColor: Color = MaterialTheme.colors.secondary, contentColor: Color = contentColorFor(backgroundColor), elevation: Dp = 6.dp)

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

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

Material Design implementation of a Filled TextField

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

Material Design implementation of a Filled TextField

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

Unit
FloatingActionButton(onClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)), backgroundColor: Color = MaterialTheme.colors.secondary, contentColor: Color = contentColorFor(backgroundColor), elevation: Dp = 6.dp, icon: () -> Unit)

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

Unit
IconButton(onClick: () -> Unit, modifier: Modifier = Modifier, icon: () -> Unit)

IconButton is a clickable icon, used to represent actions.

Unit
IconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, enabled: Boolean = true, modifier: Modifier = Modifier, icon: () -> Unit)

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

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

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

Unit
LinearProgressIndicator(modifier: Modifier = Modifier, 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, modifier: Modifier = Modifier, onClick: () -> Unit = null, icon: ImageAsset? = null, secondaryText: String? = null, singleLineSecondaryText: Boolean = true, overlineText: String? = null, metaText: String? = null)

Material Design implementation of list items.

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

Material Design implementation of list items.

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

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

Unit
ModalDrawerLayout(drawerState: DrawerState, onStateChange: (DrawerState) -> Unit, gesturesEnabled: Boolean = true, drawerShape: Shape = MaterialTheme.shapes.large, drawerElevation: Dp = DrawerConstants.DefaultElevation, drawerContent: () -> Unit, bodyContent: () -> Unit)

Navigation drawers provide access to destinations in your app.

Unit
OutlinedButton(noinline onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, elevation: Dp = 0.dp, shape: Shape = MaterialTheme.shapes.small, border: Border? = Border( 1.dp, MaterialTheme.colors.onSurface.copy(alpha = OutlinedStrokeOpacity) ), backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), disabledContentColor: Color = Button.defaultDisabledContentColor, padding: InnerPadding = Button.DefaultInnerPadding, noinline text: () -> Unit)

Material Design implementation of a Material Outlined Button.

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

Material Design implementation of an Outlined TextField

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

Material Design implementation of an Outlined TextField

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

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

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

Component to represent two states, selected and not selected.

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

Components for creating mutually exclusive set of RadioButtons.

Unit
RadioGroup(options: List<String>, selectedOption: String?, onSelectedChange: (String) -> Unit, modifier: Modifier = Modifier, 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() }, topBar: () -> Unit = null, bottomBar: () -> Unit = null, floatingActionButton: () -> Unit = null, floatingActionButtonPosition: Scaffold.FabPosition = FabPosition.End, isFloatingActionButtonDocked: Boolean = false, drawerContent: () -> Unit = null, drawerShape: Shape = MaterialTheme.shapes.large, drawerElevation: Dp = DrawerConstants.DefaultElevation, backgroundColor: Color = MaterialTheme.colors.background, bodyContent: (InnerPadding) -> Unit)

Scaffold implements the basic material design visual layout structure.

Unit
Slider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, @IntRange(0) steps: Int = 0, onValueChangeEnd: () -> Unit = {}, color: Color = MaterialTheme.colors.primary)

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

Unit
Snackbar(text: () -> Unit, action: () -> Unit = null, modifier: Modifier = Modifier, actionOnNewLine: Boolean = false, shape: Shape = MaterialTheme.shapes.small, elevation: Dp = 6.dp)

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

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

The Surface is responsible for:

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

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

Unit
Tab(text: () -> Unit = emptyContent(), icon: () -> Unit = emptyContent(), selected: Boolean, onSelected: () -> Unit, modifier: Modifier = Modifier, activeColor: Color = contentColor(), inactiveColor: Color = EmphasisAmbient.current.medium.applyEmphasis(activeColor))

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

Unit
Tab(selected: Boolean, onSelected: () -> Unit, modifier: Modifier = Modifier, content: () -> Unit)

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

Unit
TabRow(items: List<T>, selectedIndex: Int, modifier: Modifier = Modifier, backgroundColor: Color = MaterialTheme.colors.primarySurface, contentColor: Color = contentColorFor(backgroundColor), scrollable: Boolean = false, indicatorContainer: (tabPositions: List<TabRow.TabPosition>) -> Unit = { tabPositions -> TabRow.IndicatorContainer(tabPositions, selectedIndex) { TabRow.Indicator() } }, divider: () -> Unit = { Divider(thickness = 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, enabled: Boolean = true, elevation: Dp = 0.dp, shape: Shape = MaterialTheme.shapes.small, border: Border? = null, backgroundColor: Color = Color.Transparent, contentColor: Color = MaterialTheme.colors.primary, disabledContentColor: Color = Button.defaultDisabledContentColor, padding: InnerPadding = TextButton.DefaultInnerPadding, noinline text: () -> Unit)

Material Design implementation of a Material Text Button.

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

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

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

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

Unit
TriStateCheckbox(state: ToggleableState, onClick: () -> Unit, enabled: Boolean = true, modifier: Modifier = Modifier, checkedColor: Color = MaterialTheme.colors.secondary, uncheckedColor: Color = MaterialTheme.colors.onSurface, disabledColor: Color = MaterialTheme.colors.onSurface, checkMarkColor: Color = MaterialTheme.colors.surface)

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

Color

Tries to match color to a color in the current 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 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,
    shape: Shape = MaterialTheme.shapes.medium
): 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.foundation.Text
import androidx.ui.material.AlertDialog
import androidx.ui.material.Button

val openDialog = state { true }

if (openDialog.value) {
    AlertDialog(
        onCloseRequest = {
            // Dismiss the dialog when the user clicks outside the dialog or on the back
            // button. If you want to disable that functionality, simply use an empty
            // onCloseRequest.
            openDialog.value = false
        },
        title = {
            Text(text = "Title")
        },
        text = {
            Text("This area typically contains the supportive text" +
                    " which presents the details regarding the Dialog's purpose.")
        },
        confirmButton = {
            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.foundation.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.
shape: Shape = MaterialTheme.shapes.medium Defines the Dialog's shape

AlertDialog

@Composable fun AlertDialog(
    onCloseRequest: () -> Unit,
    title: () -> Unit = null,
    text: () -> Unit,
    buttons: () -> Unit,
    shape: Shape = MaterialTheme.shapes.medium
): 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.foundation.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(horizontalArrangement = 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
shape: Shape = MaterialTheme.shapes.medium Defines the Dialog's shape

BottomAppBar

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

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

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

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

BottomDrawerLayout

@Composable fun BottomDrawerLayout(
    drawerState: DrawerState,
    onStateChange: (DrawerState) -> Unit,
    gesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerConstants.DefaultElevation,
    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 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
drawerShape: Shape = MaterialTheme.shapes.large shape of the drawer sheet
drawerElevation: Dp = DrawerConstants.DefaultElevation drawer sheet elevation. This controls the size of the shadow below the drawer sheet
drawerContent: () -> Unit composable that represents content inside the drawer
bodyContent: () -> Unit content of the rest of the UI
Exceptions
IllegalStateException when parent has Float.POSITIVE_INFINITY height

BottomNavigation

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

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

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

A simple example looks like:

import androidx.compose.state
import androidx.ui.foundation.Icon
import androidx.ui.foundation.Text
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 optional Modifier for this BottomNavigation
backgroundColor: Color = MaterialTheme.colors.primarySurface The background color for this BottomNavigation
contentColor: Color = contentColorFor(backgroundColor) The preferred content color provided by this BottomNavigation to its children. Defaults to either the matching onFoo color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this BottomNavigation.
elevation: Dp = BottomNavigationElevation elevation for this BottomNavigation
content: RowScope.() -> Unit destinations inside this BottomNavigation, this should contain multiple BottomNavigationItems

BottomNavigationItem

@Composable fun BottomNavigationItem(
    icon: () -> Unit,
    text: () -> Unit = emptyContent(),
    selected: Boolean,
    onSelected: () -> Unit,
    modifier: Modifier = Modifier,
    alwaysShowLabels: Boolean = true,
    activeColor: Color = contentColor(),
    inactiveColor: Color = EmphasisAmbient.current.medium.applyEmphasis(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 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 = EmphasisAmbient.current.medium.applyEmphasis(activeColor) the color of the text and icon when this item is not selected

Button

@Composable fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    elevation: Dp = 2.dp,
    disabledElevation: Dp = 0.dp,
    shape: Shape = MaterialTheme.shapes.small,
    border: Border? = null,
    backgroundColor: Color = MaterialTheme.colors.primary,
    disabledBackgroundColor: Color = Button.defaultDisabledBackgroundColor,
    contentColor: Color = contentColorFor(backgroundColor),
    disabledContentColor: Color = Button.defaultDisabledContentColor,
    padding: InnerPadding = Button.DefaultInnerPadding,
    text: () -> 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.foundation.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 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
disabledElevation: Dp = 0.dp The elevation used when enabled is false
shape: Shape = MaterialTheme.shapes.small 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
disabledBackgroundColor: Color = Button.defaultDisabledBackgroundColor The background color used when enabled is false
contentColor: Color = contentColorFor(backgroundColor) The preferred content color. Will be used by text and iconography
disabledContentColor: Color = Button.defaultDisabledContentColor The preferred content color used when enabled is false
padding: InnerPadding = Button.DefaultInnerPadding The spacing values to apply internally between the container and the content

Card

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

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

import androidx.ui.foundation.Text
import androidx.ui.material.Card

Card {
    Text("Card Content")
}
Parameters
modifier: Modifier = Modifier Modifier to be applied to the layout of the card.
shape: Shape = MaterialTheme.shapes.medium Defines the surface's shape as well its shadow. A shadow is only displayed if the elevation is greater than zero.
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,
    enabled: Boolean = true,
    modifier: Modifier = Modifier,
    checkedColor: Color = MaterialTheme.colors.secondary,
    uncheckedColor: Color = MaterialTheme.colors.onSurface,
    disabledColor: Color = MaterialTheme.colors.onSurface,
    checkMarkColor: Color = MaterialTheme.colors.surface
): Unit

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

import androidx.compose.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.
enabled: Boolean = true enabled whether or not this Checkbox will handle input events and appear enabled for semantics purposes
modifier: Modifier = Modifier Modifier to be applied to the layout of the checkbox
checkedColor: Color = MaterialTheme.colors.secondary color of the box when it is checked
uncheckedColor: Color = MaterialTheme.colors.onSurface color of the box border when it is unchecked
disabledColor: Color = MaterialTheme.colors.onSurface color for the checkbox to appear when disabled
checkMarkColor: Color = MaterialTheme.colors.surface color of the check mark of the Checkbox

CircularProgressIndicator

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

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

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.
strokeWidth: Dp = ProgressIndicatorConstants.DefaultStrokeWidth The stroke width for the progress indicator.

CircularProgressIndicator

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

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

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

Divider

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

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

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

A Material Design dropdown menu.

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

Example usage:

import androidx.compose.state
import androidx.ui.foundation.Icon
import androidx.ui.foundation.Text
import androidx.ui.layout.fillMaxSize
import androidx.ui.layout.wrapContentSize
import androidx.ui.material.Divider
import androidx.ui.material.DropdownMenu
import androidx.ui.material.DropdownMenuItem
import androidx.ui.material.IconButton

var expanded by state { false }

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

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

Example usage:

import androidx.compose.state
import androidx.ui.foundation.Icon
import androidx.ui.foundation.Text
import androidx.ui.layout.fillMaxSize
import androidx.ui.layout.wrapContentSize
import androidx.ui.material.Divider
import androidx.ui.material.DropdownMenu
import androidx.ui.material.DropdownMenuItem
import androidx.ui.material.IconButton

var expanded by state { false }

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

ExtendedFloatingActionButton

@Composable fun ExtendedFloatingActionButton(
    text: () -> Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    icon: () -> Unit = null,
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = 6.dp
): Unit

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

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

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

ExtendedFloatingActionButton(
    icon = { Icon(Icons.Filled.Favorite) },
    text = { Text("ADD TO BASKET") },
    onClick = { /*do something*/ }
)
Parameters
text: () -> Unit Text label displayed inside this FAB
icon: () -> Unit = null Optional icon for this FAB, typically this will be a androidx.ui.foundation.Icon
modifier: Modifier = Modifier Modifier to be applied to this FAB
onClick: () -> Unit will be called when user clicked on this FAB. The FAB will be disabled when it is null.
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)) The Shape of this FAB
onClick: () -> Unit will be called when user clicked on the button. The button will be disabled when it is null.
backgroundColor: Color = MaterialTheme.colors.secondary The background color. Use Color.Transparent to have no color
contentColor: Color = contentColorFor(backgroundColor) The preferred content color. Will be used by text and iconography
elevation: Dp = 6.dp The z-coordinate at which to place this button. This controls the size of the shadow below the button.

FilledTextField

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

Material Design implementation of a Filled TextField

A simple example looks like:

import androidx.ui.foundation.Text
import androidx.ui.material.FilledTextField
import androidx.ui.savedinstancestate.savedInstanceState

var text by savedInstanceState { "" }

FilledTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Label") }
)
You may provide a placeholder:
import androidx.ui.foundation.Text
import androidx.ui.material.FilledTextField
import androidx.ui.savedinstancestate.savedInstanceState

var text by savedInstanceState { "" }

FilledTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Email") },
    placeholder = { Text("example@gmail.com") }
)
You can also provide leading and trailing icons:
import androidx.ui.foundation.Icon
import androidx.ui.foundation.Text
import androidx.ui.material.FilledTextField
import androidx.ui.savedinstancestate.savedInstanceState

var text by savedInstanceState { "" }

FilledTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Label") },
    leadingIcon = { Icon(Icons.Filled.Favorite) },
    trailingIcon = { Icon(Icons.Filled.Info) }
)
To handle the error input state, use isErrorValue parameter:
import androidx.ui.foundation.Text
import androidx.ui.material.FilledTextField
import androidx.ui.savedinstancestate.savedInstanceState

var text by savedInstanceState { "" }
val isValid = text.count() > 5 && '@' in text

FilledTextField(
    value = text,
    onValueChange = { text = it },
    label = {
        val label = if (isValid) "Email" else "Email*"
        Text(label)
    },
    isErrorValue = !isValid
)
Additionally, you may provide additional message at the bottom:
import androidx.ui.foundation.Text
import androidx.ui.layout.Column
import androidx.ui.layout.padding
import androidx.ui.material.FilledTextField
import androidx.ui.savedinstancestate.savedInstanceState

var text by savedInstanceState { "" }
val invalidInput = text.count() < 5 || '@' !in text

Column {
    FilledTextField(
        value = text,
        onValueChange = { text = it },
        label = {
            val label = if (invalidInput) "Email*" else "Email"
            Text(label)
        },
        isErrorValue = invalidInput
    )
    val textColor = if (invalidInput) {
        MaterialTheme.colors.error
    } else {
        EmphasisAmbient.current.medium.applyEmphasis(MaterialTheme.colors.onSurface)
    }
    Text(
        text = if (invalidInput) "Requires '@' and at least 5 symbols" else "Helper message",
        style = MaterialTheme.typography.caption.copy(color = textColor),
        modifier = Modifier.padding(start = 16.dp)
    )
}
Password text field example:
import androidx.ui.foundation.Text
import androidx.ui.input.PasswordVisualTransformation
import androidx.ui.material.FilledTextField
import androidx.ui.savedinstancestate.savedInstanceState

var password by savedInstanceState { "" }
FilledTextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Enter password") },
    visualTransformation = PasswordVisualTransformation(),
    keyboardType = KeyboardType.Password
)
Hiding a software keyboard on IME action performed:
import androidx.ui.foundation.Text
import androidx.ui.material.FilledTextField
import androidx.ui.savedinstancestate.savedInstanceState

var text by savedInstanceState { "" }

FilledTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Label") },
    imeAction = ImeAction.Done,
    onImeActionPerformed = { action, softwareController ->
        if (action == ImeAction.Done) {
            softwareController?.hideSoftwareKeyboard()
            // do something here
        }
    }
)
If apart from input text change you also want to observe the cursor location, selection range,or IME composition use the FilledTextField overload with the TextFieldValue parameter instead.
Parameters
value: String the input text to be shown in the text field
onValueChange: (String) -> Unit the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback
label: () -> Unit the label to be displayed inside the text field container. The default text style for internal Text is Typography.caption when the text field is in focus and Typography.subtitle1 when the text field is not in focus
modifier: Modifier = Modifier a Modifier for this text field
textStyle: TextStyle = currentTextStyle() the style to be applied to the input text. The default textStyle uses the currentTextStyle defined by the theme
placeholder: () -> Unit = null the optional placeholder to be displayed when the text field is in focus and the input text is empty. The default text style for internal Text is Typography.subtitle1
leadingIcon: () -> Unit = null the optional leading icon to be displayed at the beginning of the text field container
trailingIcon: () -> Unit = null the optional trailing icon to be displayed at the end of the text field container
isErrorValue: Boolean = false indicates if the text field's current value is in error. If set to true, the label, bottom indicator and trailing icon will be displayed in errorColor color
keyboardType: KeyboardType = KeyboardType.Text the keyboard type to be used with the text field. Note that the input type is not guaranteed. For example, an IME may send a non-ASCII character even if you set the keyboard type to KeyboardType.Ascii
imeAction: ImeAction = ImeAction.Unspecified the IME action honored by the IME. The 'enter' key on the soft keyboard input will show a corresponding icon. For example, search icon may be shown if ImeAction.Search is selected. When a user taps on that 'enter' key, the onImeActionPerformed callback is called with the specified ImeAction
onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> } is triggered when the input service performs an ImeAction. Note that the emitted IME action may be different from what you specified through the imeAction field. The callback also exposes a SoftwareKeyboardController instance as a parameter that can be used to request to hide the software keyboard
visualTransformation: VisualTransformation = VisualTransformation.None transforms the visual representation of the input value. For example, you can use androidx.ui.input.PasswordVisualTransformation to create a password text field. By default no visual transformation is applied
onFocusChange: (Boolean) -> Unit = {} a callback to be invoked when the text field receives or loses focus If the boolean parameter value is true, it means the text field has focus, and vice versa
onTextInputStarted: (SoftwareKeyboardController) -> Unit = {} a callback to be invoked when the connection with the platform's text input service (e.g. software keyboard on Android) has been established. Called with the SoftwareKeyboardController instance that can be used to request to show or hide the software keyboard
activeColor: Color = MaterialTheme.colors.primary the color of the label, bottom indicator and the cursor when the text field is in focus
inactiveColor: Color = MaterialTheme.colors.onSurface the color of either the input text or placeholder when the text field is in focus, and the color of the label and bottom indicator when the text field is not in focus
errorColor: Color = MaterialTheme.colors.error the alternative color of the label, bottom indicator, cursor and trailing icon used when isErrorValue is set to true
backgroundColor: Color = MaterialTheme.colors.onSurface the background color of the text field's container. To the color provided here there will be applied a transparency alpha defined by Material Design specifications
shape: Shape = MaterialTheme.shapes.small.copy(bottomLeft = ZeroCornerSize, bottomRight = ZeroCornerSize) the shape of the text field's container

FilledTextField

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

Material Design implementation of a Filled TextField

See example usage:

import androidx.ui.foundation.Text
import androidx.ui.input.TextFieldValue
import androidx.ui.material.FilledTextField
import androidx.ui.savedinstancestate.savedInstanceState
import androidx.ui.text.TextRange

var text by savedInstanceState(saver = TextFieldValue.Saver) {
    TextFieldValue("example", TextRange(0, 7))
}

FilledTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Label") }
)
This overload provides access to the input text, cursor position, selection range andIME composition. If you only want to observe an input text change, use the FilledTextFieldoverload with the String parameter instead.
Parameters
value: TextFieldValue the input TextFieldValue to be shown in the text field
onValueChange: (TextFieldValue) -> Unit the callback that is triggered when the input service updates values in TextFieldValue. An updated TextFieldValue comes as a parameter of the callback
label: () -> Unit the label to be displayed inside the text field container. The default text style for internal Text is Typography.caption when the text field is in focus and Typography.subtitle1 when the text field is not in focus
modifier: Modifier = Modifier a Modifier for this text field
textStyle: TextStyle = currentTextStyle() the style to be applied to the input text. The default textStyle uses the currentTextStyle defined by the theme
placeholder: () -> Unit = null the optional placeholder to be displayed when the text field is in focus and the input text is empty. The default text style for internal Text is Typography.subtitle1
leadingIcon: () -> Unit = null the optional leading icon to be displayed at the beginning of the text field container
trailingIcon: () -> Unit = null the optional trailing icon to be displayed at the end of the text field container
isErrorValue: Boolean = false indicates if the text field's current value is in error state. If set to true, the label, bottom indicator and trailing icon will be displayed in errorColor color
keyboardType: KeyboardType = KeyboardType.Text the keyboard type to be used with the text field. Note that the input type is not guaranteed. For example, an IME may send a non-ASCII character even if you set the keyboard type to KeyboardType.Ascii
imeAction: ImeAction = ImeAction.Unspecified the IME action honored by the IME. The 'enter' key on the soft keyboard input will show a corresponding icon. For example, search icon may be shown if ImeAction.Search is selected. When a user taps on that 'enter' key, the onImeActionPerformed callback is called with the specified ImeAction
onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> } is triggered when the input service performs an ImeAction. Note that the emitted IME action may be different from what you specified through the imeAction field. The callback also exposes a SoftwareKeyboardController instance as a parameter that can be used to request to hide the software keyboard
visualTransformation: VisualTransformation = VisualTransformation.None transforms the visual representation of the input value. For example, you can use androidx.ui.input.PasswordVisualTransformation to create a password text field. By default no visual transformation is applied
onFocusChange: (Boolean) -> Unit = {} a callback to be invoked when the text field receives or loses focus If the boolean parameter value is true, it means the text field has focus, and vice versa
onTextInputStarted: (SoftwareKeyboardController) -> Unit = {} a callback to be invoked when the connection with the platform's text input service (e.g. software keyboard on Android) has been established. Called with the SoftwareKeyboardController instance that can be used to request to show or hide the software keyboard
activeColor: Color = MaterialTheme.colors.primary the color of the label, bottom indicator and the cursor when the text field is in focus
inactiveColor: Color = MaterialTheme.colors.onSurface the color of either the input text or placeholder when the text field is in focus, and the color of the label and bottom indicator when the text field is not in focus
errorColor: Color = MaterialTheme.colors.error the alternative color of the label, bottom indicator, cursor and trailing icon used when isErrorValue is set to true
backgroundColor: Color = MaterialTheme.colors.onSurface the background color of the text field's container. To the color provided here there will be applied a transparency alpha defined by Material Design specifications
shape: Shape = MaterialTheme.shapes.small.copy(bottomLeft = ZeroCornerSize, bottomRight = ZeroCornerSize) the shape of the text field's container

FilledTextField

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

Deprecated.

FloatingActionButton

@Composable fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = 6.dp,
    icon: () -> Unit
): Unit

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

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

import androidx.ui.foundation.Icon
import androidx.ui.material.FloatingActionButton

FloatingActionButton(onClick = { /*do something*/ }) {
    Icon(Icons.Filled.Favorite)
}
See ExtendedFloatingActionButton for an extended FAB that contains text and an optional icon.
Parameters
modifier: Modifier = Modifier Modifier to be applied to this FAB.
onClick: () -> Unit will be called when user clicked on this FAB. The FAB will be disabled when it is null.
shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)) The Shape of this FAB
backgroundColor: Color = MaterialTheme.colors.secondary The background color. Use Color.Transparent to have no color
contentColor: Color = contentColorFor(backgroundColor) The preferred content color for content inside this FAB
elevation: Dp = 6.dp The z-coordinate at which to place this FAB. This controls the size of the shadow below the button.
icon: () -> Unit the content of this FAB

IconButton

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

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

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

icon should typically be an androidx.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 optional Modifier for this IconButton
icon: () -> 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,
    enabled: Boolean = true,
    modifier: Modifier = Modifier,
    icon: () -> Unit
): Unit

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

import androidx.compose.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
enabled: Boolean = true enabled whether or not this IconToggleButton will handle input events and appear enabled for semantics purposes
modifier: Modifier = Modifier optional Modifier for this IconToggleButton
icon: () -> Unit the content (icon) to be drawn inside the IconToggleButton. This is typically an androidx.ui.foundation.Icon.

LinearProgressIndicator

@Composable fun LinearProgressIndicator(
    @FloatRange(0.0, 1.0) progress: Float,
    modifier: Modifier = Modifier,
    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(
    modifier: Modifier = Modifier,
    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,
    modifier: Modifier = Modifier,
    onClick: () -> Unit = null,
    icon: ImageAsset? = null,
    secondaryText: String? = null,
    singleLineSecondaryText: Boolean = true,
    overlineText: String? = null,
    metaText: String? = 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.foundation.Image
import androidx.ui.foundation.Text
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.foundation.Image
import androidx.ui.foundation.Text
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.foundation.Image
import androidx.ui.foundation.Text
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
modifier: Modifier = Modifier Modifier to be applied to the list item
onClick: () -> Unit = null Callback to be invoked when the list item is clicked
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

ListItem

@Composable fun ListItem(
    modifier: Modifier = Modifier,
    onClick: () -> Unit = null,
    icon: () -> Unit = null,
    secondaryText: () -> Unit = null,
    singleLineSecondaryText: Boolean = true,
    overlineText: () -> Unit = null,
    trailing: () -> Unit = null,
    text: () -> Unit
): 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.foundation.Image
import androidx.ui.foundation.Text
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.foundation.Image
import androidx.ui.foundation.Text
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.foundation.Image
import androidx.ui.foundation.Text
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
modifier: Modifier = Modifier Modifier to be applied to the list item
onClick: () -> Unit = null Callback to be invoked when the list item is clicked
icon: () -> Unit = null The leading supporting visual of the list item
secondaryText: () -> Unit = null The secondary text of the list item
singleLineSecondaryText: Boolean = true Whether the secondary text is single line
overlineText: () -> Unit = null The text displayed above the primary text
trailing: () -> Unit = null The trailing meta text or meta icon of the list item
text: () -> Unit The primary text of the list item

MaterialTheme

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

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

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

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

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

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

import androidx.ui.foundation.Text
import androidx.ui.foundation.isSystemInDarkTheme
import androidx.ui.graphics.Color
import androidx.ui.material.ExtendedFloatingActionButton
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(
        fontWeight = FontWeight.W100,
        fontSize = 96.sp
    ),
    button = TextStyle(
        fontWeight = FontWeight.W600,
        fontSize = 14.sp
    )
)

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

ModalDrawerLayout

@Composable fun ModalDrawerLayout(
    drawerState: DrawerState,
    onStateChange: (DrawerState) -> Unit,
    gesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerConstants.DefaultElevation,
    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 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
drawerShape: Shape = MaterialTheme.shapes.large shape of the drawer sheet
drawerElevation: Dp = DrawerConstants.DefaultElevation drawer sheet elevation. This controls the size of the shadow below the drawer sheet
drawerContent: () -> Unit composable that represents content inside the drawer
bodyContent: () -> Unit content of the rest of the UI
Exceptions
IllegalStateException when parent has Float.POSITIVE_INFINITY width

OutlinedButton

@Composable inline fun OutlinedButton(
    noinline onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    elevation: Dp = 0.dp,
    shape: Shape = MaterialTheme.shapes.small,
    border: Border? = Border( 1.dp, MaterialTheme.colors.onSurface.copy(alpha = OutlinedStrokeOpacity) ),
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    disabledContentColor: Color = Button.defaultDisabledContentColor,
    padding: InnerPadding = Button.DefaultInnerPadding,
    noinline text: () -> 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.foundation.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 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.small 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 = contentColorFor(backgroundColor) The preferred content color. Will be used by text and iconography
disabledContentColor: Color = Button.defaultDisabledContentColor The preferred content color used when enabled is false
padding: InnerPadding = Button.DefaultInnerPadding The spacing values to apply internally between the container and the content

OutlinedTextField

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

Material Design implementation of an Outlined TextField

See example usage:

import androidx.ui.foundation.Text
import androidx.ui.material.OutlinedTextField
import androidx.ui.savedinstancestate.savedInstanceState

var text by savedInstanceState { "" }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Label") }
)
If apart from input text change you also want to observe the cursor location, selection range,or IME composition use the OutlinedTextField overload with the TextFieldValue parameterinstead.
Parameters
value: String the input text to be shown in the text field
onValueChange: (String) -> Unit the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback
label: () -> Unit the label to be displayed inside the text field container. The default text style for internal Text is Typography.caption when the text field is in focus and Typography.subtitle1 when the text field is not in focus
modifier: Modifier = Modifier a Modifier for this text field
textStyle: TextStyle = currentTextStyle() the style to be applied to the input text. The default textStyle uses the currentTextStyle defined by the theme
placeholder: () -> Unit = null the optional placeholder to be displayed when the text field is in focus and the input text is empty. The default text style for internal Text is Typography.subtitle1
leadingIcon: () -> Unit = null the optional leading icon to be displayed at the beginning of the text field container
trailingIcon: () -> Unit = null the optional trailing icon to be displayed at the end of the text field container
isErrorValue: Boolean = false indicates if the text field's current value is in error. If set to true, the label, bottom indicator and trailing icon will be displayed in errorColor color
keyboardType: KeyboardType = KeyboardType.Text the keyboard type to be used with the text field. Note that the input type is not guaranteed. For example, an IME may send a non-ASCII character even if you set the keyboard type to KeyboardType.Ascii
imeAction: ImeAction = ImeAction.Unspecified the IME action honored by the IME. The 'enter' key on the soft keyboard input will show a corresponding icon. For example, search icon may be shown if ImeAction.Search is selected. When a user taps on that 'enter' key, the onImeActionPerformed callback is called with the specified ImeAction
onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> } is triggered when the input service performs an ImeAction. Note that the emitted IME action may be different from what you specified through the imeAction field. The callback also exposes a SoftwareKeyboardController instance as a parameter that can be used to request to hide the software keyboard
visualTransformation: VisualTransformation = VisualTransformation.None transforms the visual representation of the input value. For example, you can use androidx.ui.input.PasswordVisualTransformation to create a password text field. By default no visual transformation is applied
onFocusChange: (Boolean) -> Unit = {} a callback to be invoked when the text field receives or loses focus If the boolean parameter value is true, it means the text field has focus, and vice versa
onTextInputStarted: (SoftwareKeyboardController) -> Unit = {} a callback to be invoked when the connection with the platform's text input service (e.g. software keyboard on Android) has been established. Called with the SoftwareKeyboardController instance that can be used to request to show or hide the software keyboard
activeColor: Color = MaterialTheme.colors.primary the color of the label, bottom indicator and the cursor when the text field is in focus
inactiveColor: Color = MaterialTheme.colors.onSurface the color of either the input text or placeholder when the text field is in focus, and the color of the label and bottom indicator when the text field is not in focus
errorColor: Color = MaterialTheme.colors.error the alternative color of the label, bottom indicator, cursor and trailing icon used when isErrorValue is set to true

OutlinedTextField

@Composable fun OutlinedTextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    label: () -> Unit,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = currentTextStyle(),
    placeholder: () -> Unit = null,
    leadingIcon: () -> Unit = null,
    trailingIcon: () -> Unit = null,
    isErrorValue: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardType: KeyboardType = KeyboardType.Text,
    imeAction: ImeAction = ImeAction.Unspecified,
    onImeActionPerformed: (ImeAction, SoftwareKeyboardController?) -> Unit = { _, _ -> },
    onFocusChange: (Boolean) -> Unit = {},