AlertDialog
Android
Component in Wear Material 3 Compose
AlertDialogs provide important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task. The AlertDialog is scrollable by default if the content exceeds the viewport height.
This overload has 2 [IconButton]s for confirmation and cancellation, placed horizontally at the bottom of the dialog. It should be used when the user will be presented with a binary decision, to either confirm or dismiss an action.
Where user input is not required, such as displaying a transient success or failure message, use [ConfirmationDialog], [SuccessConfirmationDialog] or [FailureConfirmationDialog] instead.
Last updated:
Installation
dependencies {
implementation("androidx.wear.compose:compose-material3:1.0.0-alpha34")
}
Overloads
@Composable
fun AlertDialog(
visible: Boolean,
onDismissRequest: () -> Unit,
confirmButton: @Composable RowScope.() -> Unit,
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
dismissButton: @Composable RowScope.() -> Unit = {
AlertDialogDefaults.DismissButton(onDismissRequest)
},
icon: @Composable (() -> Unit)? = null,
text: @Composable (() -> Unit)? = null,
verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
contentPadding: PaddingValues = AlertDialogDefaults.confirmDismissContentPadding(),
properties: DialogProperties = DialogProperties(),
content: (ScalingLazyListScope.() -> Unit)? = null
)
Parameters
| name | description |
|---|---|
visible | A boolean indicating whether the dialog should be displayed. |
onDismissRequest | A lambda function to be called when the dialog is dismissed by swiping right (typically also called by the [dismissButton]). Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting [visible] to false. |
confirmButton | A slot for a [Button] indicating positive sentiment. Clicking the button must remove the dialog from the composition hierarchy e.g. by setting [visible] to false. It's recommended to use [AlertDialogDefaults.ConfirmButton] in this slot with onClick callback. |
title | A slot for displaying the title of the dialog. Title should contain a summary of the dialog's purpose or content and should not exceed 3 lines of text. By default, [TextOverflow.Ellipsis] will be applied when text exceeds 3 lines. |
modifier | Modifier to be applied to the dialog content. |
dismissButton | A slot for a [Button] indicating negative sentiment. Clicking the button must remove the dialog from the composition hierarchy e.g. by setting [visible] to false. It's recommended to use [AlertDialogDefaults.DismissButton] in this slot with onClick callback. |
icon | Optional slot for an icon to be shown at the top of the dialog. |
text | Optional slot for displaying the message of the dialog below the title. Should contain additional text that presents further details about the dialog's purpose if the title is insufficient. |
verticalArrangement | The vertical arrangement of the dialog's children. There is a default padding between icon, title, and text, which will be added to the spacing specified in this [verticalArrangement] parameter. |
contentPadding | The padding to apply around the entire dialog's contents. |
properties | An optional [DialogProperties] object for configuring the dialog's behavior. |
content | A slot for additional content, displayed within a scrollable [ScalingLazyColumn]. |
@Composable
fun AlertDialog(
visible: Boolean,
onDismissRequest: () -> Unit,
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
icon: @Composable (() -> Unit)? = null,
text: @Composable (() -> Unit)? = null,
verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
contentPadding: PaddingValues = AlertDialogDefaults.contentPadding(),
properties: DialogProperties = DialogProperties(),
content: (ScalingLazyListScope.() -> Unit)? = null
)
Parameters
| name | description |
|---|---|
visible | A boolean indicating whether the dialog should be displayed. |
onDismissRequest | A lambda function to be called when the dialog is dismissed by swiping to the right or by other dismiss action. Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting [visible] to false. |
title | A slot for displaying the title of the dialog. Title should contain a summary of the dialog's purpose or content and should not exceed 3 lines of text. By default, [TextOverflow.Ellipsis] will be applied when text exceeds 3 lines. |
modifier | Modifier to be applied to the dialog content. |
icon | Optional slot for an icon to be shown at the top of the dialog. |
text | Optional slot for displaying the message of the dialog below the title. Should contain additional text that presents further details about the dialog's purpose if the title is insufficient. |
verticalArrangement | The vertical arrangement of the dialog's children. There is a default padding between icon, title, and text, which will be added to the spacing specified in this [verticalArrangement] parameter. |
contentPadding | The padding to apply around the entire dialog's contents. |
properties | An optional [DialogProperties] object for configuring the dialog's behavior. |
content | A slot for additional content, displayed within a scrollable [ScalingLazyColumn]. Any buttons added in this slot that are intended to dismiss the dialog must remove the dialog from the composition hierarchy e.g. by setting [visible] to false. |
@Composable
fun AlertDialog(
visible: Boolean,
onDismissRequest: () -> Unit,
edgeButton: (@Composable BoxScope.() -> Unit),
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
icon: @Composable (() -> Unit)? = null,
text: @Composable (() -> Unit)? = null,
verticalArrangement: Arrangement.Vertical = AlertDialogDefaults.VerticalArrangement,
contentPadding: PaddingValues = AlertDialogDefaults.contentPadding(),
properties: DialogProperties = DialogProperties(),
content: (ScalingLazyListScope.() -> Unit)? = null
)
Parameters
| name | description |
|---|---|
visible | A boolean indicating whether the dialog should be displayed. |
onDismissRequest | A lambda function to be called when the dialog is dismissed by swiping to the right or by other dismiss action. Implementation of this lambda must remove the dialog from the composition hierarchy e.g. by setting [visible] to false. |
edgeButton | Slot for an [EdgeButton] indicating positive sentiment. Clicking the button must remove the dialog from the composition hierarchy e.g. by setting [visible] to false. It's recommended to use [AlertDialogDefaults.EdgeButton] in this slot with onClick callback. Note that when using an [EdgeButton] which is not Medium size, the contentPadding parameters should be specified. |
title | A slot for displaying the title of the dialog. Title should contain a summary of the dialog's purpose or content and should not exceed 3 lines of text.By default, [TextOverflow.Ellipsis] will be applied when text exceeds 3 lines. |
modifier | Modifier to be applied to the dialog content. |
icon | Optional slot for an icon to be shown at the top of the dialog. |
text | Optional slot for displaying the message of the dialog below the title. Should contain additional text that presents further details about the dialog's purpose if the title is insufficient. |
verticalArrangement | The vertical arrangement of the dialog's children. There is a default padding between icon, title, and text, which will be added to the spacing specified in this [verticalArrangement] parameter. |
contentPadding | The padding to apply around the entire dialog's contents. Bottom padding will be ignored and default spacing for the [EdgeButton] will be used. |
properties | An optional [DialogProperties] object for configuring the dialog's behavior. |
content | A slot for additional content, displayed within a scrollable [ScalingLazyColumn]. Any buttons added in this slot that are intended to dismiss the dialog must remove the dialog from the composition hierarchy e.g. by setting [visible] to false. |
Code Examples
AlertDialogWithConfirmAndDismissSample
@Preview
@Composable
fun AlertDialogWithConfirmAndDismissSample() {
var showDialog by remember { mutableStateOf(false) }
// Use AppScaffold to improve AlertDialog's Performance
AppScaffold {
Box(Modifier.fillMaxSize()) {
FilledTonalButton(
modifier = Modifier.align(Alignment.Center),
onClick = { showDialog = true },
label = { Text("Show Dialog") }
)
}
AlertDialog(
visible = showDialog,
onDismissRequest = { showDialog = false },
icon = {
Icon(
Icons.Rounded.AccountCircle,
modifier = Modifier.size(32.dp),
contentDescription = null,
tint = MaterialTheme.colorScheme.primary
)
},
title = { Text("Enable Battery Saver Mode?") },
text = { Text("Your battery is low. Turn on battery saver.") },
confirmButton = {
AlertDialogDefaults.ConfirmButton(
onClick = {
// Perform confirm action here
showDialog = false
}
)
},
dismissButton = {
AlertDialogDefaults.DismissButton(
onClick = {
// Perform dismiss action here
showDialog = false
}
)
}
)
}
}
AlertDialogWithEdgeButtonSample
@Preview
@Composable
fun AlertDialogWithEdgeButtonSample() {
var showDialog by remember { mutableStateOf(false) }
// Use AppScaffold to improve AlertDialog's Performance
AppScaffold {
Box(Modifier.fillMaxSize()) {
FilledTonalButton(
modifier = Modifier.align(Alignment.Center),
onClick = { showDialog = true },
label = { Text("Show Dialog") }
)
}
AlertDialog(
visible = showDialog,
onDismissRequest = { showDialog = false },
icon = {
Icon(
Icons.Rounded.AccountCircle,
modifier = Modifier.size(32.dp),
contentDescription = null,
tint = MaterialTheme.colorScheme.primary
)
},
title = { Text("Mobile network is not currently available") },
edgeButton = {
AlertDialogDefaults.EdgeButton(
onClick = {
// Perform confirm action here
showDialog = false
}
)
}
)
}
}
AlertDialogWithContentGroupsSample
@Preview
@Composable
fun AlertDialogWithContentGroupsSample() {
var showDialog by remember { mutableStateOf(false) }
var weatherEnabled by remember { mutableStateOf(false) }
var calendarEnabled by remember { mutableStateOf(false) }
// Use AppScaffold to improve AlertDialog's Performance
AppScaffold {
Box(Modifier.fillMaxSize()) {
FilledTonalButton(
modifier = Modifier.align(Alignment.Center),
onClick = { showDialog = true },
label = { Text("Show Dialog") }
)
}
AlertDialog(
visible = showDialog,
onDismissRequest = { showDialog = false },
title = { Text("Share your location") },
text = { Text(" The following apps have asked you to share your location") },
edgeButton = {
AlertDialogDefaults.EdgeButton(
onClick = {
// Perform confirm action here
showDialog = false
}
) {
Text("Share once")
}
}
) {
item {
SwitchButton(
modifier = Modifier.fillMaxWidth(),
checked = weatherEnabled,
onCheckedChange = { weatherEnabled = it },
label = { Text("Weather") }
)
}
item {
SwitchButton(
modifier = Modifier.fillMaxWidth(),
checked = calendarEnabled,
onCheckedChange = { calendarEnabled = it },
label = { Text("Calendar") }
)
}
item { AlertDialogDefaults.GroupSeparator() }
item {
FilledTonalButton(
modifier = Modifier.fillMaxWidth(),
onClick = {},
label = { Text(modifier = Modifier.fillMaxWidth(), text = "Never share") }
)
}
item {
FilledTonalButton(
modifier = Modifier.fillMaxWidth(),
onClick = {},
label = { Text(modifier = Modifier.fillMaxWidth(), text = "Share always") }
)
}
}
}
}
Sponsored by
