Alert - Composable Component in Wear Material Compose

Composable Component

Alert lays out the content for an opinionated, alert screen. This overload offers 5 slots for title, negative button, positive button, optional icon and optional content. The buttons are shown side-by-side below the icon, text and content. Alert is scrollable by default if the content is taller than the viewport.

Android

@Composable
public fun Alert(
    title: @Composable ColumnScope.() -> Unit,
    negativeButton: @Composable () -> Unit,
    positiveButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    icon: @Composable (ColumnScope.() -> Unit)? = null,
    scrollState: ScalingLazyListState = rememberScalingLazyListState(),
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    titleColor: Color = contentColor,
    iconColor: Color = contentColor,
    verticalArrangement: Arrangement.Vertical = DialogDefaults.AlertVerticalArrangement,
    contentPadding: PaddingValues = DialogDefaults.ContentPadding,
    content: @Composable (ColumnScope.() -> Unit)? = null,
)

Parameters


title	A slot for displaying the title of the dialog, expected to be one or two lines of text.
negativeButton	A slot for a `Button` indicating negative sentiment (e.g. No). Clicking the button must remove the dialog from the composition hierarchy.
positiveButton	A slot for a `Button` indicating positive sentiment (e.g. Yes). Clicking the button must remove the dialog from the composition hierarchy.
modifier	Modifier to be applied to the dialog content.
icon	Optional slot for an icon to be shown at the top of the dialog.
scrollState	The scroll state for the dialog so that the scroll position can be displayed e.g. by the `PositionIndicator` passed to `Scaffold`.
backgroundColor	`Color` representing the background color for the dialog.
contentColor	`Color` representing the color for `content`.
titleColor	`Color` representing the color for `title`.
iconColor	Icon `Color` that defaults to `contentColor`, unless specifically overridden.
verticalArrangement	The vertical arrangement of the dialog's children. This allows us to add spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size.
contentPadding	The padding to apply around the whole of the dialog's contents.
content	A slot for additional content, expected to be 2-3 lines of text.

Android

Deprecated This overload is provided for backwards compatibility with Compose for Wear OS 1.1.A newer overload is available which uses ScalingLazyListState from wear.compose.foundation.lazy package

@Composable
public fun Alert(
    title: @Composable ColumnScope.() -> Unit,
    negativeButton: @Composable () -> Unit,
    positiveButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    icon: @Composable (ColumnScope.() -> Unit)? = null,
    scrollState: androidx.wear.compose.material.ScalingLazyListState =
        androidx.wear.compose.material.rememberScalingLazyListState(),
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    titleColor: Color = contentColor,
    iconColor: Color = contentColor,
    verticalArrangement: Arrangement.Vertical = DialogDefaults.AlertVerticalArrangement,
    contentPadding: PaddingValues = DialogDefaults.ContentPadding,
    content: @Composable (ColumnScope.() -> Unit)? = null,
)

Parameters


title	A slot for displaying the title of the dialog, expected to be one or two lines of text.
negativeButton	A slot for a `Button` indicating negative sentiment (e.g. No). Clicking the button must remove the dialog from the composition hierarchy.
positiveButton	A slot for a `Button` indicating positive sentiment (e.g. Yes). Clicking the button must remove the dialog from the composition hierarchy.
modifier	Modifier to be applied to the dialog content.
icon	Optional slot for an icon to be shown at the top of the dialog.
scrollState	The scroll state for the dialog so that the scroll position can be displayed e.g. by the `PositionIndicator` passed to `Scaffold`.
backgroundColor	`Color` representing the background color for the dialog.
contentColor	`Color` representing the color for `content`.
titleColor	`Color` representing the color for `title`.
iconColor	Icon `Color` that defaults to `contentColor`, unless specifically overridden.
verticalArrangement	The vertical arrangement of the dialog's children. This allows us to add spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size.
contentPadding	The padding to apply around the whole of the dialog's contents.
content	A slot for additional content, expected to be 2-3 lines of text.

Android

@Composable
public fun Alert(
    title: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    icon: @Composable (ColumnScope.() -> Unit)? = null,
    message: @Composable (ColumnScope.() -> Unit)? = null,
    scrollState: ScalingLazyListState = rememberScalingLazyListState(),
    backgroundColor: Color = MaterialTheme.colors.background,
    titleColor: Color = contentColorFor(backgroundColor),
    messageColor: Color = contentColorFor(backgroundColor),
    iconColor: Color = contentColorFor(backgroundColor),
    verticalArrangement: Arrangement.Vertical = DialogDefaults.AlertVerticalArrangement,
    contentPadding: PaddingValues = DialogDefaults.ContentPadding,
    content: ScalingLazyListScope.() -> Unit,
)

Parameters


title	A slot for displaying the title of the dialog, expected to be one or two lines of text.
modifier	Modifier to be applied to the dialog.
icon	Optional slot for an icon to be shown at the top of the dialog.
message	Optional slot for additional message content, expected to be 2-3 lines of text.
scrollState	The scroll state for the dialog so that the scroll position can be displayed e.g. by the `PositionIndicator` passed to `Scaffold`.
backgroundColor	`Color` representing the background color for the dialog.
titleColor	`Color` representing the color for `title`.
messageColor	`Color` representing the color for `message`.
iconColor	`Color` representing the color for `icon`.
verticalArrangement	The vertical arrangement of the dialog's children. This allows us to add spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size.
contentPadding	The padding to apply around the whole of the dialog's contents.
content	A slot for one or more spaced `Chip`s, stacked vertically.

Android

Deprecated This overload is provided for backwards compatibility with Compose for Wear OS 1.1.A newer overload is available which uses ScalingLazyListState and ScalingLazyListScope from wear.compose.foundation.lazy package

@Composable
public fun Alert(
    title: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    icon: @Composable (ColumnScope.() -> Unit)? = null,
    message: @Composable (ColumnScope.() -> Unit)? = null,
    scrollState: androidx.wear.compose.material.ScalingLazyListState =
        androidx.wear.compose.material.rememberScalingLazyListState(),
    backgroundColor: Color = MaterialTheme.colors.background,
    titleColor: Color = contentColorFor(backgroundColor),
    messageColor: Color = contentColorFor(backgroundColor),
    iconColor: Color = contentColorFor(backgroundColor),
    verticalArrangement: Arrangement.Vertical = DialogDefaults.AlertVerticalArrangement,
    contentPadding: PaddingValues = DialogDefaults.ContentPadding,
    content: androidx.wear.compose.material.ScalingLazyListScope.() -> Unit,
)

Parameters


title	A slot for displaying the title of the dialog, expected to be one or two lines of text.
modifier	Modifier to be applied to the dialog.
icon	Optional slot for an icon to be shown at the top of the dialog.
message	Optional slot for additional message content, expected to be 2-3 lines of text.
scrollState	The scroll state for the dialog so that the scroll position can be displayed e.g. by the `PositionIndicator` passed to `Scaffold`.
backgroundColor	`Color` representing the background color for the dialog.
titleColor	`Color` representing the color for `title`.
messageColor	`Color` representing the color for `message`.
iconColor	`Color` representing the color for `icon`.
verticalArrangement	The vertical arrangement of the dialog's children. This allows us to add spacing between items and specify the arrangement of the items when we have not enough of them to fill the whole minimum size.
contentPadding	The padding to apply around the whole of the dialog's contents.
content	A slot for one or more spaced `Chip`s, stacked vertically.

Code Examples

AlertWithButtons

@Composable
fun AlertWithButtons() {
    Alert(
        icon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                contentDescription = "airplane",
                modifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center),
            )
        },
        title = { Text("Title text displayed here", textAlign = TextAlign.Center) },
        negativeButton = {
            Button(
                colors = ButtonDefaults.secondaryButtonColors(),
                onClick = {
                    /* Do something e.g. navController.popBackStack()*/
                },
            ) {
                Text("No")
            }
        },
        positiveButton = {
            Button(
                onClick = {
                    /* Do something e.g. navController.popBackStack()*/
                }
            ) {
                Text("Yes")
            }
        },
        contentPadding = PaddingValues(start = 10.dp, end = 10.dp, top = 24.dp, bottom = 32.dp),
    ) {
        Text(
            text = "Body text displayed here " + "(swipe right to dismiss)",
            textAlign = TextAlign.Center,
        )
    }
}

AlertWithChips

@Composable
fun AlertWithChips() {
    Alert(
        verticalArrangement = Arrangement.spacedBy(4.dp, Alignment.Top),
        contentPadding = PaddingValues(start = 10.dp, end = 10.dp, top = 24.dp, bottom = 52.dp),
        icon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                contentDescription = "airplane",
                modifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center),
            )
        },
        title = { Text(text = "Example Title Text", textAlign = TextAlign.Center) },
        message = {
            Text(
                text = "Message content goes here " + "(swipe right to dismiss)",
                textAlign = TextAlign.Center,
                style = MaterialTheme.typography.body2,
            )
        },
    ) {
        item {
            Chip(
                label = { Text("Primary") },
                onClick = { /* Do something e.g. navController.popBackStack() */ },
                colors = ChipDefaults.primaryChipColors(),
            )
        }
        item {
            Chip(
                label = { Text("Secondary") },
                onClick = { /* Do something e.g. navController.popBackStack() */ },
                colors = ChipDefaults.secondaryChipColors(),
            )
        }
    }
}