OpenOnPhoneDialog

Component in Wear Material 3 Compose

A full-screen dialog that displays an animated icon with a curved text at the bottom.

The dialog 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 dialog, [show] parameter should be set to false.

This dialog is typically used to indicate that an action has been initiated and will continue on the user's phone. Once this dialog is displayed, it's developer responsibility to establish the connection between the watch and the phone.

Last updated: 2024-09-07 14:23

Installation

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

Overloads

@Composable
fun OpenOnPhoneDialog(
    show: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    curvedText: (CurvedScope.() -> Unit)? = OpenOnPhoneDialogDefaults.curvedText(),
    colors: OpenOnPhoneDialogColors = OpenOnPhoneDialogDefaults.colors(),
    properties: DialogProperties = DialogProperties(),
    durationMillis: Long = OpenOnPhoneDialogDefaults.DurationMillis,
    content: @Composable BoxScope.() -> Unit = OpenOnPhoneDialogDefaults.Icon,
)

Parameters

name	description
show	A boolean indicating whether the dialog 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.
modifier	Modifier to be applied to the dialog content.
curvedText	A slot for displaying curved text content which will be shown along the bottom edge of the dialog. Defaults to a localized open on phone message.
colors	[OpenOnPhoneDialogColors] that will be used to resolve the colors used for this [OpenOnPhoneDialog].
properties	An optional [DialogProperties] object for configuring the dialog's behavior.
durationMillis	The duration in milliseconds for which the dialog is displayed. Defaults to [OpenOnPhoneDialogDefaults.DurationMillis].
content	A slot for displaying an icon inside the open on phone dialog, which can be animated. Defaults to [OpenOnPhoneDialogDefaults.Icon].

Code Example

OpenOnPhoneDialogSample

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

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

    OpenOnPhoneDialog(
        show = showConfirmation,
        onDismissRequest = { showConfirmation = false },
    )
}