Jetpack Compose Alert in Wear Material

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.

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.

Example of an Alert with an icon, title, body text and buttons:

Overloads

Alert

@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

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

Alert

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

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

Alert

@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

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 Chips, stacked vertically

Alert

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

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 Chips, stacked vertically