Dialog

Functions summary

Unit	@Composable Dialog(     showDialog: Boolean,     onDismissRequest: () -> Unit,     modifier: Modifier,     scrollState: ScalingLazyListState?,     properties: DialogProperties,     content: @Composable () -> Unit ) Dialog displays a full-screen dialog, layered over any other content.

Functions

Dialog

Artifact: androidx.wear.compose:compose-material

View Source

@Composable
fun Dialog(
    showDialog: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    scrollState: ScalingLazyListState? = rememberScalingLazyListState(),
    properties: DialogProperties = DialogProperties(),
    content: @Composable () -> Unit
): Unit

Dialog displays a full-screen dialog, layered over any other content. It takes a single slot, which is expected to be an opinionated Wear dialog content, such as Alert or Confirmation.

The dialog supports swipe-to-dismiss and reveals the parent content in the background during the swipe gesture.

Example of content using Dialog to trigger an alert dialog using Alert:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.dialog.Alert
import androidx.wear.compose.material.dialog.Dialog

Box {
    var showDialog by remember { mutableStateOf(false) }
    Column(
        modifier = Modifier.fillMaxSize().padding(horizontal = 20.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Chip(
            onClick = { showDialog = true },
            label = { Text("Show dialog") },
            colors = ChipDefaults.secondaryChipColors(),
        )
    }
    val scrollState = rememberScalingLazyListState()
    Dialog(
        showDialog = showDialog,
        onDismissRequest = { showDialog = false },
        scrollState = scrollState,
    ) {
        Alert(
            scrollState = scrollState,
            verticalArrangement = Arrangement.spacedBy(4.dp, Alignment.Top),
            contentPadding =
                PaddingValues(start = 10.dp, end = 10.dp, top = 24.dp, bottom = 52.dp),
            icon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                    contentDescription = "airplane",
                    modifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center),
                )
            },
            title = { Text(text = "Example Title Text", textAlign = TextAlign.Center) },
            message = {
                Text(
                    text = "Message content goes here",
                    textAlign = TextAlign.Center,
                    style = MaterialTheme.typography.body2,
                )
            },
        ) {
            item {
                Chip(
                    label = { Text("Primary") },
                    onClick = { showDialog = false },
                    colors = ChipDefaults.primaryChipColors(),
                )
            }
            item {
                Chip(
                    label = { Text("Secondary") },
                    onClick = { showDialog = false },
                    colors = ChipDefaults.secondaryChipColors(),
                )
            }
        }
    }
}

Example of content using Dialog to trigger a confirmation dialog using Confirmation:

import androidx.compose.animation.graphics.res.animatedVectorResource
import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
import androidx.compose.animation.graphics.vector.AnimatedImageVector
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.dialog.Confirmation
import androidx.wear.compose.material.dialog.Dialog

Box {
    var showDialog by remember { mutableStateOf(false) }
    Column(
        modifier = Modifier.fillMaxSize().padding(horizontal = 25.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Chip(
            onClick = { showDialog = true },
            label = { Text("Show dialog") },
            colors = ChipDefaults.secondaryChipColors(),
        )
    }
    Dialog(showDialog = showDialog, onDismissRequest = { showDialog = false }) {
        val animation =
            AnimatedImageVector.animatedVectorResource(R.drawable.open_on_phone_animation)
        Confirmation(
            onTimeout = { showDialog = false },
            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 = 3000,
        ) {
            Text(text = "Open on phone", textAlign = TextAlign.Center)
        }
    }
}

Parameters
showDialog: Boolean	Controls whether to display the Dialog. Set to true initially to trigger an 'intro' animation and display the Dialog. Subsequently, setting to false triggers an 'outro' animation, then Dialog hides itself.
onDismissRequest: () -> Unit	Executes when the user dismisses the dialog. Must remove the dialog from the composition.
modifier: Modifier = Modifier	Modifier to be applied to the dialog.
scrollState: ScalingLazyListState? = rememberScalingLazyListState()	The scroll state for the dialog so that the scroll position can be displayed.
properties: DialogProperties = DialogProperties()	Typically platform specific properties to further configure the dialog.
content: @Composable () -> Unit	Slot for dialog content such as Alert or Confirmation.