androidx.ui.material

Classes

ButtonStyle

Styling configuration for a Button.

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

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 = 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
AppBarIcon(icon: Image, onClick: () -> Unit)

A correctly sized clickable icon that can be used inside TopAppBar and BottomAppBar for either the navigation icon or the actions.

Unit
BottomAppBar(color: Color = (+MaterialTheme.colors()).primary, navigationIcon: () -> Unit = null, fabConfiguration: BottomAppBar.FabConfiguration? = null, actionData: List<T> = emptyList(), action: (T) -> 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
Button(modifier: Modifier = Modifier.None, onClick: () -> Unit = null, style: ButtonStyle = ContainedButtonStyle(), children: () -> Unit)

Material Design implementation of Button.

Unit
Button(text: String, modifier: Modifier = Modifier.None, onClick: () -> Unit = null, style: ButtonStyle = ContainedButtonStyle())

Material Design implementation of Button that contains some text.

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.

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

ButtonStyle
ContainedButtonStyle(color: Color = (+MaterialTheme.colors()).primary, shape: Shape = (+MaterialTheme.shapes()).button, elevation: Dp = 2.dp, rippleColor: Color? = null)

Style used to configure a Button to look like a Material Contained Button.

Unit
DataTable(columns: Int, numeric: (Int) -> Boolean = { false }, dataRowHeight: Dp = DataRowHeight, headerRowHeight: Dp = HeaderRowHeight, cellSpacing: EdgeInsets = CellSpacing, border: Border = Border(color = BorderColor, width = 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(modifier: Modifier = Modifier.None, onClick: () -> Unit = null, 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: Image, modifier: Modifier = Modifier.None, onClick: () -> Unit = null, 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, modifier: Modifier = Modifier.None, icon: Image? = null, textStyle: TextStyle? = null, onClick: () -> Unit = null, color: Color = (+MaterialTheme.colors()).primary, elevation: Dp = 6.dp)

An extended FloatingActionButton with an icon and a text.

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: Image? = 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 = ColorPalette(), 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.

ButtonStyle
OutlinedButtonStyle(border: Border = Border( (+MaterialTheme.colors()).onSurface.copy(alpha = OutlinedStrokeOpacity), 1.dp ), color: Color = (+MaterialTheme.colors()).surface, shape: Shape = (+MaterialTheme.shapes()).button, elevation: Dp = 0.dp, contentColor: Color? = (+MaterialTheme.colors()).primary)

Style used to configure a Button to look like a Material Outlined Button.

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

Unit
StaticDrawer(drawerContent: () -> Unit)

Navigation drawers provide access to destinations in your app.

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: String? = null, icon: Image? = null, selected: Boolean, onSelected: () -> Unit)

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

Unit
TabRow(items: List<T>, selectedIndex: Int, scrollable: Boolean = false, indicatorContainer: (tabPositions: List<TabRow.TabPosition>) -> Unit = { tabPositions -> TabRow.IndicatorContainer(tabPositions, selectedIndex) { TabRow.Indicator() } }, tab: (Int, T) -> Unit)

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

ButtonStyle
TextButtonStyle(shape: Shape = (+MaterialTheme.shapes()).button, contentColor: Color? = (+MaterialTheme.colors()).primary)

Style used to configure a Button to look like a Material Text Button.

Unit
TopAppBar(title: () -> Unit, color: Color = (+MaterialTheme.colors()).primary, navigationIcon: () -> Unit = null)

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

Unit
TopAppBar(title: () -> Unit, actionData: List<T>, color: Color = (+MaterialTheme.colors()).primary, navigationIcon: () -> Unit = null, action: (T) -> 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.

Effect<Color?>

Tries to match the background color to correlated text color.

Top-level properties summary

Dp

Dp

Dp

Dp

Extension functions summary

For TextStyle
TextStyle

TEMPORARY solution to apply an opacity for the TextStyle even if it has no color provided.

Top-level functions

AlertDialog

@Composable fun AlertDialog(
    onCloseRequest: () -> Unit,
    title: () -> Unit = null,
    text: () -> Unit,
    confirmButton: () -> Unit,
    dismissButton: () -> Unit = null,
    buttonLayout: AlertDialogButtonLayout = 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("Confirm", onClick = {
                openDialog.value = false
            })
        },
        dismissButton = {
            Button("Dismiss", onClick = {
                openDialog.value = false
            })
        },
        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("Long Confirm Button", onClick = {
                openDialog.value = false
            })
        },
        dismissButton = {
            Button("Long Dismiss Button", onClick = {
                openDialog.value = false
            })
        },
        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 = 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("Button", onClick = { openDialog.value = false })
            }
        }
    )
}
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

AppBarIcon

@Composable fun AppBarIcon(
    icon: Image,
    onClick: () -> Unit
): Unit

A correctly sized clickable icon that can be used inside TopAppBar and BottomAppBar for either the navigation icon or the actions.

Parameters
icon: Image The icon to be displayed
onClick: () -> Unit the lambda to be invoked when this icon is pressed

BottomAppBar

@Composable fun <T> BottomAppBar(
    color: Color = (+MaterialTheme.colors()).primary,
    navigationIcon: () -> Unit = null,
    fabConfiguration: BottomAppBar.FabConfiguration? = null,
    actionData: List<T> = emptyList(),
    action: (T) -> 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.

The location of the actions displayed by the BottomAppBar depends on the position / existence of a FloatingActionButton, configured with fabConfiguration. When fabConfiguration is:

  • null: the navigationIcon is displayed at the start, and the actions are displayed at the end
import androidx.ui.material.AppBarIcon
import androidx.ui.material.BottomAppBar

val someActionImage: Image = getMyActionImage()
val someNavigationImage: Image = getMyNavigationImage()

val navigationIcon: @Composable() () -> Unit = {
    AppBarIcon(someNavigationImage) { /* doSomething()*/ }
}
val actionData = listOf(someActionImage, someActionImage)

BottomAppBar(
    navigationIcon = navigationIcon,
    actionData = actionData
) { actionImage ->
    AppBarIcon(actionImage) { /* doSomething()*/ }
}
import androidx.ui.material.AppBarIcon
import androidx.ui.material.BottomAppBar
import androidx.ui.material.BottomAppBar.FabConfiguration
import androidx.ui.material.FloatingActionButton

val someActionImage: Image = getMyActionImage()
val someNavigationImage: Image = getMyNavigationImage()

val navigationIcon: @Composable() () -> Unit = {
    AppBarIcon(someNavigationImage) { /* doSomething()*/ }
}
val actionData = listOf(someActionImage, someActionImage)

BottomAppBar(
    navigationIcon = navigationIcon,
    fabConfiguration = FabConfiguration {
        FloatingActionButton(
            color = (+MaterialTheme.colors()).secondary,
            icon = someActionImage,
            onClick = { /** doSomething() */ })
    },
    actionData = actionData
) { actionImage ->
    AppBarIcon(actionImage) { /* doSomething()*/ }
}
  • FabPosition.End aligned: the actions are displayed at the start, and no navigation icon is supported - setting a navigation icon here will throw an exception.
import androidx.ui.material.AppBarIcon
import androidx.ui.material.BottomAppBar
import androidx.ui.material.BottomAppBar.FabConfiguration
import androidx.ui.material.FloatingActionButton

val someActionImage: Image = getMyActionImage()
val actionData = listOf(someActionImage, someActionImage)

BottomAppBar(
    fabConfiguration = FabConfiguration(fabPosition = BottomAppBar.FabPosition.End) {
        FloatingActionButton(
            color = (+MaterialTheme.colors()).secondary,
            icon = someActionImage,
            onClick = { /** doSomething() */ })
    },
    actionData = actionData
) { actionImage ->
    AppBarIcon(actionImage) { /* doSomething()*/ }
}
For examples using a cutout FAB, see FabConfiguration, which controls the shape of the cutout.
Parameters
color: Color = (+MaterialTheme.colors()).primary An optional color for the BottomAppBar
navigationIcon: () -> Unit = null The navigation icon displayed in the BottomAppBar. Note that if fabConfiguration is FabPosition.End aligned, this parameter must be null / not set.
fabConfiguration: BottomAppBar.FabConfiguration? = null The FabConfiguration that controls how / where the FloatingActionButton is placed inside the BottomAppBar.
actionData: List<T> = emptyList() A list of data representing the actions to be displayed at the end of the BottomAppBar. Any remaining actions that do not fit on the BottomAppBar should typically be displayed in an overflow menu at the end. This list will be transformed into icons / overflow menu items by action. For example, you may choose to represent an action with a sealed class containing an icon and text, so you can easily handle events when the action is pressed.
action: (T) -> Unit = {} A specific action that will be displayed at the end of the BottomAppBar - this will be called for items in actionData up to the maximum number of icons that can be displayed. This parameter essentially transforms data in actionData to an icon / menu item that will actually be displayed to the user.
T the type of data in actionData

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

Button

@Composable fun Button(
    modifier: Modifier = Modifier.None,
    onClick: () -> Unit = null,
    style: ButtonStyle = ContainedButtonStyle(),
    children: () -> Unit
): Unit

Material Design implementation of Button.

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
import androidx.ui.text.TextStyle

Button(onClick = onClick) {
    Text(text = "Custom text style", style = TextStyle(color = Color.Green))
}
Parameters
modifier: Modifier = Modifier.None Modifier to be applied to the button.
onClick: () -> Unit = null Will be called when the user clicks the button. The button will be disabled if it is null.
style: ButtonStyle = ContainedButtonStyle() Contains the styling parameters for the button.

Button

@Composable fun Button(
    text: String,
    modifier: Modifier = Modifier.None,
    onClick: () -> Unit = null,
    style: ButtonStyle = ContainedButtonStyle()
): Unit

Material Design implementation of Button that contains some text.

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.material.Button

Button(text = "Button", onClick = onClick)
There is a different overload for this component that takes a lambda of customizable content.
Parameters
text: String The text to display.
modifier: Modifier = Modifier.None Modifier to be applied to the button.
onClick: () -> Unit = null Will be called when the user clicks the button. The button will be disabled if it is null.
style: ButtonStyle = ContainedButtonStyle() Contains the styling parameters for the button.

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.

ColorPalette

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

ContainedButtonStyle

fun ContainedButtonStyle(
    color: Color = (+MaterialTheme.colors()).primary,
    shape: Shape = (+MaterialTheme.shapes()).button,
    elevation: Dp = 2.dp,
    rippleColor: Color? = null
): ButtonStyle

Style used to configure a Button to look like 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.

import androidx.ui.material.Button

// ContainedButtonStyle is the default style.
Button(text = "Contained Button", onClick = onClick)
Parameters
color: Color = (+MaterialTheme.colors()).primary The background color
shape: Shape = (+MaterialTheme.shapes()).button Defines the button's shape as well as its shadow
elevation: Dp = 2.dp The z-coordinate at which to place this button. This controls the size of the shadow below the button
rippleColor: Color? = null The Ripple color is usually the same color used by the text and iconography. If null is provided the color will be calculated by RippleTheme.defaultColor.

DataTable

@Composable fun DataTable(
    columns: Int,
    numeric: (Int) -> Boolean = { false },
    dataRowHeight: Dp = DataRowHeight,
    headerRowHeight: Dp = HeaderRowHeight,
    cellSpacing: EdgeInsets = CellSpacing,
    border: Border = Border(color = BorderColor, width = 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
rows The data to show in each row (excluding the header row).
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, width = BorderWidth) The style used for the table borders.
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

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

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(
    modifier: Modifier = Modifier.None,
    onClick: () -> Unit = null,
    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 adds the circle shape, the FabSize size and the centering for the content.

import androidx.ui.foundation.SimpleImage
import androidx.ui.material.FloatingActionButton

FloatingActionButton(onClick = { /*do something*/ }) {
    SimpleImage(image = icon)
}
Parameters
modifier: Modifier = Modifier.None Modifier to be applied to the button.
onClick: () -> Unit = null will be called when user clicked on the button. The button will be disabled when it is null.
minSize: Dp = FabSize Minimum size of the button. Defaults to FabSize
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: Image,
    modifier: Modifier = Modifier.None,
    onClick: () -> Unit = null,
    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 with FabSize size.

import androidx.ui.material.FloatingActionButton

FloatingActionButton(icon = icon, onClick = { /*do something*/ })
Parameters
icon: Image Image to draw in the center.
modifier: Modifier = Modifier.None Modifier to be applied to the button.
onClick: () -> Unit = null will be called when user clicked on the button. The button will be disabled when it is null.
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,
    modifier: Modifier = Modifier.None,
    icon: Image? = null,
    textStyle: TextStyle? = null,
    onClick: () -> Unit = 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.
modifier: Modifier = Modifier.None Modifier to be applied to the button.
icon: Image? = null Image to draw to the left of the text. It is optional.
textStyle: TextStyle? = null Optional TextStyle to apply for a text
onClick: () -> Unit = null will be called when user clicked on the button. The button will be disabled when it is null.
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.

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: Image? = 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.SimpleImage
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 = "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 = { SimpleImage(icon24x24) }
    )
    Divider()
    ListItem(
        text = { Text("One line list item") },
        icon = { SimpleImage(icon40x40) },
        trailing = { SimpleImage(icon24x24) }
    )
    Divider()
}
  • two-line items
import androidx.ui.core.Text
import androidx.ui.foundation.SimpleImage
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 = { SimpleImage(icon40x40) },
        trailing = {
            // TODO(popam): put checkbox here after b/140292836 is fixed
            SimpleImage(icon24x24)
        }
    )
    Divider()
}
  • three-line items
import androidx.ui.core.Text
import androidx.ui.foundation.SimpleImage
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 = { SimpleImage(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: Image? = 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.SimpleImage
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 = "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 = { SimpleImage(icon24x24) }
    )
    Divider()
    ListItem(
        text = { Text("One line list item") },
        icon = { SimpleImage(icon40x40) },
        trailing = { SimpleImage(icon24x24) }
    )
    Divider()
}
  • two-line items
import androidx.ui.core.Text
import androidx.ui.foundation.SimpleImage
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 = { SimpleImage(icon40x40) },
        trailing = {
            // TODO(popam): put checkbox here after b/140292836 is fixed
            SimpleImage(icon24x24)
        }
    )
    Divider()
}
  • three-line items
import androidx.ui.core.Text
import androidx.ui.foundation.SimpleImage
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 = { SimpleImage(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 = ColorPalette(),
    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.graphics.Color
import androidx.ui.material.ColorPalette
import androidx.ui.material.FloatingActionButton
import androidx.ui.material.MaterialTheme
import androidx.ui.material.Typography
import androidx.ui.text.TextStyle
import androidx.ui.text.font.FontFamily

val colors = ColorPalette(
    primary = Color(0xFF1EB980),
    surface = Color(0xFF26282F),
    onSurface = Color.White
)

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

)

MaterialTheme(colors = colors, typography = typography) {
    FloatingActionButton("FAB with text style and color from theme", onClick = {})
}
Parameters
colors: ColorPalette = ColorPalette() 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

OutlinedButtonStyle

fun OutlinedButtonStyle(
    border: Border = Border( (+MaterialTheme.colors()).onSurface.copy(alpha = OutlinedStrokeOpacity), 1.dp ),
    color: Color = (+MaterialTheme.colors()).surface,
    shape: Shape = (+MaterialTheme.shapes()).button,
    elevation: Dp = 0.dp,
    contentColor: Color? = (+MaterialTheme.colors()).primary
): ButtonStyle

Style used to configure a Button to look like 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.

import androidx.ui.material.Button
import androidx.ui.material.OutlinedButtonStyle

Button(text = "Outlined Button", onClick = onClick, style = OutlinedButtonStyle())
Parameters
border: Border = Border( (+MaterialTheme.colors()).onSurface.copy(alpha = OutlinedStrokeOpacity), 1.dp ) Border to draw on top of the button.
color: Color = (+MaterialTheme.colors()).surface The background color. Provide Color.Transparent to have no color.
shape: Shape = (+MaterialTheme.shapes()).button Defines the Button's shape.
elevation: Dp = 0.dp The z-coordinate at which to place this button. This controls the size of the shadow below the button.
contentColor: Color? = (+MaterialTheme.colors()).primary The color used by text and Ripple.

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.layout.Column
import androidx.ui.layout.Padding
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) }) {
                Padding(padding = 10.dp) {
                    Column {
                        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

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.compose.memo
import androidx.ui.material.Slider
import androidx.ui.material.SliderPosition

val position = +memo { SliderPosition() }
Slider(position)

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.compose.memo
import androidx.ui.material.Slider
import androidx.ui.material.SliderPosition

val position = +memo {
    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

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(ExpandedWidth) {
    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

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: String? = null,
    icon: Image? = null,
    selected: Boolean,
    onSelected: () -> Unit
): Unit

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

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

Parameters
text: String? = null the text label displayed in this tab
icon: Image? = null 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

TabRow

@Composable fun <T> TabRow(
    items: List<T>,
    selectedIndex: Int,
    scrollable: Boolean = false,
    indicatorContainer: (tabPositions: List<TabRow.TabPosition>) -> Unit = { tabPositions -> TabRow.IndicatorContainer(tabPositions, selectedIndex) { TabRow.Indicator() } },
    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.Center
import androidx.ui.layout.FlexColumn
import androidx.ui.material.Tab
import androidx.ui.material.TabRow

val state = +state { 0 }
val titles = listOf("TAB 1", "TAB 2", "TAB 3 WITH LOTS OF TEXT")
FlexColumn {
    inflexible {
        TabRow(items = titles, selectedIndex = state.value) { index, text ->
            Tab(text = text, selected = state.value == index) { state.value = index }
        }
    }
    flexible(flex = 1f) {
        Center {
            Text(
                text = "Text tab ${state.value + 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.Center
import androidx.ui.layout.FlexColumn
import androidx.ui.material.TabRow

val state = +state { 0 }
val titles = listOf("TAB 1", "TAB 2", "TAB 3")
FlexColumn {
    inflexible {
        TabRow(items = titles, selectedIndex = state.value) { index, title ->
            FancyTab(
                title = title,
                onClick = { state.value = index },
                selected = (index == state.value)
            )
        }
    }
    flexible(flex = 1f) {
        Center {
            Text(
                text = "Fancy tab ${state.value + 1} selected",
                style = (+MaterialTheme.typography()).body1
            )
        }
    }
}
Where the custom tab itself could look like:
import androidx.ui.core.Text
import androidx.ui.foundation.ColoredRect
import androidx.ui.foundation.selection.MutuallyExclusiveSetItem
import androidx.ui.layout.Column
import androidx.ui.layout.Container
import androidx.ui.layout.EdgeInsets
import androidx.ui.layout.Padding

MutuallyExclusiveSetItem(selected = selected, onClick = onClick) {
    Container(height = 50.dp, padding = EdgeInsets(10.dp)) {
        Column(ExpandedHeight) {
            val color = if (selected) Color.Red else Color.Gray
            ColoredRect(height = 10.dp, width = 10.dp, color = color, modifier = Gravity.Center)
            Padding(5.dp) {
                Text(
                    text = title,
                    style = (+MaterialTheme.typography()).body1,
                    modifier = Gravity.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.shape.border.Border
import androidx.ui.foundation.shape.border.DrawBorder
import androidx.ui.foundation.shape.corner.RoundedCornerShape
import androidx.ui.layout.Container
import androidx.ui.layout.Padding

// 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]
Padding(5.dp) {
    Container(expanded = true) {
        DrawBorder(RoundedCornerShape(5.dp), Border(color, 2.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.Center
import androidx.ui.layout.FlexColumn
import androidx.ui.material.Tab
import androidx.ui.material.TabRow

val state = +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.value) {
        FancyIndicator(Color.White)
    }
}

FlexColumn {
    inflexible {
        TabRow(
            items = titles,
            selectedIndex = state.value,
            indicatorContainer = indicatorContainer
        ) { index, text ->
            Tab(text = text, selected = state.value == index) { state.value = index }
        }
    }
    flexible(flex = 1f) {
        Center {
            Text(
                text = "Fancy indicator tab ${state.value + 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.memo
import androidx.compose.state
import androidx.ui.animation.ColorPropKey
import androidx.ui.animation.PxPropKey
import androidx.ui.animation.Transition
import androidx.ui.core.ambientDensity
import androidx.ui.core.toPx
import androidx.ui.core.withDensity
import androidx.ui.layout.Container
import androidx.ui.layout.Padding

val indicatorStart = +memo { PxPropKey() }
val indicatorEnd = +memo { PxPropKey() }
val indicatorColor = +memo { ColorPropKey() }

val colors = listOf(Color.Yellow, Color.Red, Color.Green)
val transitionDefinition =
    +memo(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.BottomLeft) {
    Transition(transitionDefinition, selectedIndex) { state ->
        val offset = withDensity(+ambientDensity()) { state[indicatorStart].toDp() }
        val width = withDensity(+ambientDensity()) {
            (state[indicatorEnd] - state[indicatorStart]).toDp()
        }
        Padding(left = offset) {
            Container(width = width) {
                // 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.Center
import androidx.ui.layout.FlexColumn
import androidx.ui.material.Tab
import androidx.ui.material.TabRow

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

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

FlexColumn {
    inflexible {
        TabRow(
            items = titles,
            selectedIndex = state.value,
            indicatorContainer = indicatorContainer
        ) { index, text ->
            Tab(text = text, selected = state.value == index) { state.value = index }
        }
    }
    flexible(flex = 1f) {
        Center {
            Text(
                text = "Fancy transition tab ${state.value + 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
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.
tab: (Int, T) -> Unit the Tab to be emitted for the given index and element of type T in items

TextButtonStyle

fun TextButtonStyle(
    shape: Shape = (+MaterialTheme.shapes()).button,
    contentColor: Color? = (+MaterialTheme.colors()).primary
): ButtonStyle

Style used to configure a Button to look like a Material Text Button.

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

import androidx.ui.material.Button
import androidx.ui.material.TextButtonStyle

Button(text = "Text Button", onClick = onClick, style = TextButtonStyle())
Parameters
shape: Shape = (+MaterialTheme.shapes()).button Defines the Button's shape.
contentColor: Color? = (+MaterialTheme.colors()).primary The color used by text and Ripple.

TopAppBar

@Composable fun TopAppBar(
    title: () -> Unit,
    color: Color = (+MaterialTheme.colors()).primary,
    navigationIcon: () -> Unit = null
): Unit

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

This TopAppBar displays only a title and navigation icon, use the other TopAppBar overload if you want to display actions as well.

import androidx.ui.core.Text
import androidx.ui.material.AppBarIcon
import androidx.ui.material.TopAppBar

val someNavigationImage: Image = getMyNavigationImage()

TopAppBar(
    title = { Text("Simple TopAppBar") },
    navigationIcon = { AppBarIcon(someNavigationImage) { /* doSomething() */ } }
)
Parameters
title: () -> Unit The title to be displayed in the center of the TopAppBar
color: Color = (+MaterialTheme.colors()).primary An optional color for the TopAppBar
navigationIcon: () -> Unit = null The navigation icon displayed at the start of the TopAppBar

TopAppBar

@Composable fun <T> TopAppBar(
    title: () -> Unit,
    actionData: List<T>,
    color: Color = (+MaterialTheme.colors()).primary,
    navigationIcon: () -> Unit = null,
    action: (T) -> 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 space for a title, navigation icon, and actions. Use the other TopAppBar overload if you only want to display a title and navigation icon.

import androidx.ui.core.Text
import androidx.ui.material.AppBarIcon
import androidx.ui.material.TopAppBar

val someActionImage: Image = getMyActionImage()
val someNavigationImage: Image = getMyNavigationImage()

val navigationIcon: @Composable() () -> Unit = {
    AppBarIcon(someNavigationImage) { /* doSomething()*/ }
}
val actionData = listOf(someActionImage, someActionImage)

TopAppBar(
    title = { Text("Simple TopAppBar") },
    navigationIcon = navigationIcon,
    actionData = actionData
) { actionImage ->
    AppBarIcon(actionImage) { /* doSomething()*/ }
}
Parameters
title: () -> Unit The title to be displayed in the center of the TopAppBar
color: Color = (+MaterialTheme.colors()).primary An optional color for the TopAppBar
navigationIcon: () -> Unit = null The navigation icon displayed at the start of the TopAppBar
actionData: List<T> A list of data representing the actions to be displayed at the end of the TopAppBar. Any remaining actions that do not fit on the TopAppBar should typically be displayed in an overflow menu at the end. This list will be transformed into icons / overflow menu items by action. For example, you may choose to represent an action with a sealed class containing an icon and text, so you can easily handle events when the action is pressed.
action: (T) -> Unit A specific action that will be displayed at the end of the TopAppBar - this will be called for items in actionData up to the maximum number of icons that can be displayed. This parameter essentially transforms data in actionData to an icon / menu item that will actually be displayed to the user.
T the type of data in actionData

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.memo
import androidx.compose.state
import androidx.ui.layout.Column
import androidx.ui.layout.Padding
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 = +memo(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)
    Padding(left = 10.dp) {
        Column {
            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

textColorForBackground

fun textColorForBackground(background: Color): Effect<Color?>

Tries to match the background color to correlated text color. For example, on ColorPalette.primary background ColorPalette.onPrimary will be used. If the background is not from the ColorPalette the text color will not be automatically resolved.

Top-level properties

ExtendedFabHeight

val ExtendedFabHeight: Dp

ExtendedFabIconPadding

val ExtendedFabIconPadding: Dp

ExtendedFabTextPadding

val ExtendedFabTextPadding: Dp

FabSize

val FabSize: Dp

Extension functions

withOpacity

fun TextStyle.withOpacity(opacity: Float): TextStyle

TEMPORARY solution to apply an opacity for the TextStyle even if it has no color provided. We wanted to have this right now to improve our tutorial for ADS. But the problem is actually way wider and we would need to rethink how we apply modifications like this to our styles and do we need similar methods for other params we have in TextStyle. We will continue investigation as part of b/141362712

Parameters
opacity: Float the text color opacity to apply for this TextStyle.