Confirmation

Component in Wear Material 3 Compose

Shows a [Confirmation] dialog with an icon and optional very short curved text. The length of the curved text should be very short and should not exceed 1-2 words. If a longer text required, then another [Confirmation] overload with a column content should be used instead.

The confirmation will be showing a message to the user for [durationMillis]. After a specified timeout, the [onDismissRequest] callback will be invoked, where it's up to the caller to handle the dismissal. To hide the confirmation, [show] parameter should be set to false.

Last updated: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha24")
}

Overloads

@Composable
fun Confirmation(
    show: Boolean,
    onDismissRequest: () -> Unit,
    curvedText: (CurvedScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationColors = ConfirmationDefaults.confirmationColors(),
    properties: DialogProperties = DialogProperties(),
    durationMillis: Long = ConfirmationDefaults.ConfirmationDurationMillis,
    content: @Composable BoxScope.() -> Unit
)

Parameters

name	description
show	A boolean indicating whether the confirmation should be displayed.
onDismissRequest	A lambda function to be called when the dialog is dismissed - either by swiping right or when the [durationMillis] has passed.
curvedText	A slot for displaying curved text content which will be shown along the bottom edge of the dialog.
modifier	Modifier to be applied to the confirmation content.
colors	A [ConfirmationColors] object for customizing the colors used in this [Confirmation].
properties	An optional [DialogProperties] object for configuring the dialog's behavior.
durationMillis	The duration in milliseconds for which the dialog is displayed. Defaults to [ConfirmationDefaults.ConfirmationDurationMillis].
content	A slot for displaying an icon inside the confirmation dialog. It's recommended to set its size to [ConfirmationDefaults.IconSize]

@Composable
fun Confirmation(
    show: Boolean,
    onDismissRequest: () -> Unit,
    text: @Composable (ColumnScope.() -> Unit)?,
    modifier: Modifier = Modifier,
    colors: ConfirmationColors = ConfirmationDefaults.confirmationColors(),
    properties: DialogProperties = DialogProperties(),
    durationMillis: Long = ConfirmationDefaults.ConfirmationDurationMillis,
    content: @Composable BoxScope.() -> Unit
)

Parameters

name	description
show	A boolean indicating whether the confirmation should be displayed.
onDismissRequest	A lambda function to be called when the dialog is dismissed - either by swiping right or when the [durationMillis] has passed.
text	A slot for displaying text below the icon. It should not exceed 3 lines.
modifier	Modifier to be applied to the confirmation content.
colors	A [ConfirmationColors] object for customizing the colors used in this [Confirmation].
properties	An optional [DialogProperties] object for configuring the dialog's behavior.
durationMillis	The duration in milliseconds for which the dialog is displayed. Defaults to [ConfirmationDefaults.ConfirmationDurationMillis].
content	A slot for displaying an icon inside the confirmation dialog, which can be animated. It's recommended to set its size to [ConfirmationDefaults.SmallIconSize]

Code Examples

ConfirmationSample

@Composable
fun ConfirmationSample() {
    var showConfirmation by remember { mutableStateOf(false) }

    Box(Modifier.fillMaxSize()) {
        FilledTonalButton(
            modifier = Modifier.align(Alignment.Center),
            onClick = { showConfirmation = true },
            label = { Text("Show Confirmation") }
        )
    }

    // Has an icon and a short curved text content, which will be displayed along the bottom edge of
    // the screen.
    Confirmation(
        show = showConfirmation,
        onDismissRequest = { showConfirmation = false },
        curvedText = ConfirmationDefaults.curvedText("Confirmed")
    ) {
        Icon(
            imageVector = Icons.Filled.Add,
            contentDescription = null,
            modifier = Modifier.size(ConfirmationDefaults.IconSize),
        )
    }
}

LongTextConfirmationSample

@Composable
fun LongTextConfirmationSample() {
    var showConfirmation by remember { mutableStateOf(false) }

    Box(Modifier.fillMaxSize()) {
        FilledTonalButton(
            modifier = Modifier.align(Alignment.Center),
            onClick = { showConfirmation = true },
            label = { Text("Show Confirmation") }
        )
    }

    // Has an icon and a text content. Text will be displayed in the center of the screen below the
    // icon.
    Confirmation(
        show = showConfirmation,
        onDismissRequest = { showConfirmation = false },
        text = { Text(text = "Your message has been sent") },
    ) {
        Icon(
            imageVector = Icons.Filled.Add,
            contentDescription = null,
            modifier = Modifier.size(ConfirmationDefaults.SmallIconSize),
        )
    }
}