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 [Button]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.
Last updated:
Installation
dependencies {
implementation("androidx.wear.compose:compose-material3:1.0.0-alpha24")
}
Overloads
@Composable
fun AlertDialog(
show: 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.contentPadding(hasBottomButton = false),
properties: DialogProperties = DialogProperties(),
content: (ScalingLazyListScope.() -> Unit)? = null
)
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 by swiping right (typically also called by the [dismissButton]). |
confirmButton | A slot for a [Button] indicating positive sentiment. Clicking the button must remove the dialog from the composition hierarchy. 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. |
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. 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(
show: Boolean,
onDismissRequest: () -> Unit,
bottomButton: @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(hasBottomButton = true),
properties: DialogProperties = DialogProperties(),
content: (ScalingLazyListScope.() -> Unit)? = null
)
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 by swiping to the right or by other dismiss action. |
bottomButton | A slot for a [EdgeButton] indicating positive sentiment. Clicking the button must remove the dialog from the composition hierarchy. It's recommended to use [AlertDialogDefaults.BottomButton] 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. |
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]. |
Code Examples
AlertDialogWithConfirmAndDismissSample
@Composable
fun AlertDialogWithConfirmAndDismissSample() {
var showDialog by remember { mutableStateOf(false) }
Box(Modifier.fillMaxSize()) {
FilledTonalButton(
modifier = Modifier.align(Alignment.Center),
onClick = { showDialog = true },
label = { Text("Show Dialog") }
)
}
AlertDialog(
show = 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
}
)
}
)
}
AlertDialogWithBottomButtonSample
@Composable
fun AlertDialogWithBottomButtonSample() {
var showDialog by remember { mutableStateOf(false) }
Box(Modifier.fillMaxSize()) {
FilledTonalButton(
modifier = Modifier.align(Alignment.Center),
onClick = { showDialog = true },
label = { Text("Show Dialog") }
)
}
AlertDialog(
show = 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") },
bottomButton = {
AlertDialogDefaults.BottomButton(
onClick = {
// Perform confirm action here
showDialog = false
}
)
}
)
}
AlertDialogWithContentGroupsSample
@Composable
fun AlertDialogWithContentGroupsSample() {
var showDialog by remember { mutableStateOf(false) }
Box(Modifier.fillMaxSize()) {
FilledTonalButton(
modifier = Modifier.align(Alignment.Center),
onClick = { showDialog = true },
label = { Text("Show Dialog") }
)
}
AlertDialog(
show = showDialog,
onDismissRequest = { showDialog = false },
title = { Text("Share your location") },
text = { Text(" The following apps have asked you to share your location") },
bottomButton = {
AlertDialogDefaults.BottomButton(
onClick = {
// Perform confirm action here
showDialog = false
}
) {
Text("Share once")
}
}
) {
item {
FilledTonalButton(
modifier = Modifier.fillMaxWidth(),
onClick = {},
label = { Text("Weather") }
)
}
item {
FilledTonalButton(
modifier = Modifier.fillMaxWidth(),
onClick = {},
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
