Confirmation

Component in Wear Material Compose

[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: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material:1.5.0-alpha04")
}

Overloads

@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

name	description
onTimeout	Event invoked when the dialog has been shown for [durationMillis].
modifier	Modifier to be applied to the dialog.
icon	An optional slot for displaying an icon or image.
scrollState	The scroll state for the dialog so that the scroll position can be displayed e.g. by the [PositionIndicator] passed to [Scaffold].
durationMillis	The 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].
iconColor	Icon [Color] that defaults to the [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 the dialog title, expected to be one line of text.

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

name	description
onTimeout	Event invoked when the dialog has been shown for [durationMillis].
modifier	Modifier to be applied to the dialog.
icon	An optional slot for displaying an icon or image.
scrollState	The scroll state for the dialog so that the scroll position can be displayed e.g. by the [PositionIndicator] passed to [Scaffold].
durationMillis	The 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].
iconColor	Icon [Color] that defaults to the [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 the dialog title, expected to be one line of text.

Code Example

ConfirmationWithAnimation

@OptIn(ExperimentalAnimationGraphicsApi::class)
@Composable
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
        )
    }
}