New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Wear Material Compose

Confirmation

Android

[Confirmation] lays out the content for an opinionated confirmation screen that displays a message to the user for [durationMillis]. It has a slot for an icon or image (which could be animated).

[Confirmation] 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:

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 from " +
        "wear.compose.foundation.lazy package", level = DeprecationLevel.HIDDEN

@Suppress("DEPRECATION"
fun Confirmation(
    onTimeout: () -> Unit,
    modifier: Modifier = Modifier,
    icon: @Composable (ColumnScope.() -> Unit)? = null,
    scrollState: androidx.wear.compose.material.ScalingLazyListState =
        androidx.wear.compose.material.rememberScalingLazyListState(),
    durationMillis: Long = DialogDefaults.ShortDurationMillis,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    iconColor: Color = contentColor,
    verticalArrangement: Arrangement.Vertical = DialogDefaults.ConfirmationVerticalArrangement,
    contentPadding: PaddingValues = DialogDefaults.ContentPadding,
    content: @Composable ColumnScope.() -> Unit
)

Parameters

namedescription
onTimeoutEvent invoked when the dialog has been shown for [durationMillis].
modifierModifier to be applied to the dialog.
iconAn optional slot for displaying an icon or image.
scrollStateThe scroll state for the dialog so that the scroll position can be displayed e.g. by the [PositionIndicator] passed to [Scaffold].
durationMillisThe number of milliseconds for which the dialog is displayed, must be positive. Suggested values are [DialogDefaults.ShortDurationMillis], [DialogDefaults.LongDurationMillis] or [DialogDefaults.IndefiniteDurationMillis].
backgroundColor[Color] representing the background color for this dialog.
contentColor[Color] representing the color for [content].
iconColorIcon [Color] that defaults to the [contentColor], unless specifically overridden.
verticalArrangementThe 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.
contentPaddingThe padding to apply around the whole of the dialog's contents.
contentA slot for the dialog title, expected to be one line of text.
@Composable
fun Confirmation(
    onTimeout: () -> Unit,
    modifier: Modifier = Modifier,
    icon: @Composable (ColumnScope.() -> Unit)? = null,
    scrollState: ScalingLazyListState = rememberScalingLazyListState(),
    durationMillis: Long = DialogDefaults.ShortDurationMillis,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    iconColor: Color = contentColor,
    verticalArrangement: Arrangement.Vertical = DialogDefaults.ConfirmationVerticalArrangement,
    contentPadding: PaddingValues = DialogDefaults.ContentPadding,
    content: @Composable ColumnScope.() -> Unit
)

Parameters

namedescription
onTimeoutEvent invoked when the dialog has been shown for [durationMillis].
modifierModifier to be applied to the dialog.
iconAn optional slot for displaying an icon or image.
scrollStateThe scroll state for the dialog so that the scroll position can be displayed e.g. by the [PositionIndicator] passed to [Scaffold].
durationMillisThe number of milliseconds for which the dialog is displayed, must be positive. Suggested values are [DialogDefaults.ShortDurationMillis], [DialogDefaults.LongDurationMillis] or [DialogDefaults.IndefiniteDurationMillis].
backgroundColor[Color] representing the background color for this dialog.
contentColor[Color] representing the color for [content].
iconColorIcon [Color] that defaults to the [contentColor], unless specifically overridden.
verticalArrangementThe 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.
contentPaddingThe padding to apply around the whole of the dialog's contents.
contentA slot for the dialog title, expected to be one line of text.

Code Example

ConfirmationWithAnimation

@Composable
@Sampled
@OptIn(ExperimentalAnimationGraphicsApi::class
fun ConfirmationWithAnimation() {
    val animation = AnimatedImageVector.animatedVectorResource(R.drawable.open_on_phone_animation)
    Confirmation(
        onTimeout = {
            /* Do something e.g. navController.popBackStack() */
        },
        icon = {
            // Initially, animation is static and shown at the start position (atEnd = false).
            // Then, we use the EffectAPI to trigger a state change to atEnd = true,
            // which plays the animation from start to end.
            var atEnd by remember { mutableStateOf(false) }
            DisposableEffect(Unit) {
                atEnd = true
                onDispose {}
            }
            Image(
                painter = rememberAnimatedVectorPainter(animation, atEnd),
                contentDescription = "Open on phone",
                modifier = Modifier.size(48.dp)
            )
        },
        durationMillis = animation.totalDuration * 2L,
    ) {
        Text(
            text = "Body text displayed here " +
                "(swipe right to dismiss)",
            textAlign = TextAlign.Center
        )
    }
}