OpenOnPhoneDialog

Composable Component

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

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

Parameters
visible 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. Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting visible to false.
curvedText A slot for displaying curved text content which will be shown along the bottom edge of the dialog. We recommend using openOnPhoneDialogCurvedText for this parameter, which will give the default sweep angle and padding, and OpenOnPhoneDialogDefaults.curvedTextStyle as the style.
modifier Modifier to be applied to the dialog content.
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. This value will be adjusted by the accessibility manager according to the content displayed.
content A slot for displaying an icon inside the open on phone dialog, which can be animated. Defaults to OpenOnPhoneDialogDefaults.Icon.

Code Examples

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") },
        )
    }
    val text = OpenOnPhoneDialogDefaults.text
    val style = OpenOnPhoneDialogDefaults.curvedTextStyle
    OpenOnPhoneDialog(
        visible = showConfirmation,
        onDismissRequest = { showConfirmation = false },
        curvedText = { openOnPhoneDialogCurvedText(text = text, style = style) },
    )
}