← Compose Multiplatform Component in Wear Material Compose

Alert

Android

[Alert] lays out the content for an opinionated, alert screen. This overload offers 4 slots for title, optional icon, optional message text and a content slot expected to be one or more vertically stacked [Chip]s or [ToggleChip]s. [Alert] is scrollable by default if the content is taller than the viewport.

[Alert] can be used as a destination in a navigation graph e.g. using SwipeDismissableNavHost. However, for a conventional fullscreen dialog, displayed on top of other content, use [Dialog].

Last updated: July 4, 2024 at 15:09 GMT+3

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material:1.4.0-beta03")
}

Overloads

@Composable
@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", level = DeprecationLevel.HIDDEN

@Suppress("DEPRECATION"
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

name	description
`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.

@Composable
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

name	description
`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.

@Composable
@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", level = DeprecationLevel.HIDDEN

@Suppress("DEPRECATION"
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

name	description
`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.

@Composable
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

name	description
`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.

Code Examples

AlertWithChips

@Composable
@Sampled
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(),
            )
        }
    }
}

AlertWithButtons

@Composable
@Sampled
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
        )
    }
}

Foundational Libraries

Compose UI

Foundation

Foundation Layout

Animation

Component Libraries

Material 3 Compose

Material Compose

Wear Material 3 Compose

Wear Material Compose

Jetpack Glance

Glance Wear Tiles

Tv Foundation

Tv Material Compose

Other Libraries

Navigation Compose

Alert

Installation

Overloads

Parameters

Parameters

Parameters

Parameters

Code Examples

AlertWithChips

AlertWithButtons