AlertDialogs provide important prompts in a user flow.
AlertDialogWithConfirmAndDismissSample
@Composable
@Preview
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(
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
}
)
},
) {
item { Text(text = "You can configure battery saver mode in the setting menu.") }
item { Button(onClick = {}) { Text(text = "Go to settings") } }
}
}
AlertDialogWithConfirmAndDismissTransformingContentSample
@Preview
@Composable
fun AlertDialogWithConfirmAndDismissTransformingContentSample() {
var showDialog by remember { mutableStateOf(false) }
val transformationSpec = rememberTransformationSpec()
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.") },
transformationSpec = transformationSpec,
confirmButton = {
AlertDialogDefaults.ConfirmButton(
onClick = {
// Perform confirm action here
showDialog = false
}
)
},
dismissButton = {
AlertDialogDefaults.DismissButton(
onClick = {
// Perform dismiss action here
showDialog = false
}
)
},
) {
item {
Text(
modifier =
Modifier.transformedHeight(this, transformationSpec).graphicsLayer {
with(SurfaceTransformation(transformationSpec)) {
applyContentTransformation()
applyContainerTransformation()
}
},
text = "You can configure battery saver mode in the setting menu.",
)
}
item {
Button(
modifier = Modifier.transformedHeight(this, transformationSpec),
transformation = SurfaceTransformation(transformationSpec),
onClick = {},
) {
Text(text = "Go to settings")
}
}
}
}
AlertDialogWithContentGroupsSample
@Preview
@Composable
fun AlertDialogWithContentGroupsSample() {
var showDialog by remember { mutableStateOf(false) }
var weatherEnabled by remember { mutableStateOf(false) }
var calendarEnabled by remember { mutableStateOf(false) }
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") },
)
}
}
}
AlertDialogWithContentGroupsTransformingContentSample
@Preview
@Composable
fun AlertDialogWithContentGroupsTransformingContentSample() {
var showDialog by remember { mutableStateOf(false) }
var weatherEnabled by remember { mutableStateOf(false) }
var calendarEnabled by remember { mutableStateOf(false) }
val transformationSpec = rememberTransformationSpec()
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") },
transformationSpec = transformationSpec,
edgeButton = {
AlertDialogDefaults.EdgeButton(
onClick = {
// Perform confirm action here
showDialog = false
}
) {
Text("Share once")
}
},
) {
item {
SwitchButton(
modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
checked = weatherEnabled,
onCheckedChange = { weatherEnabled = it },
label = { Text("Weather") },
transformation = SurfaceTransformation(transformationSpec),
)
}
item {
SwitchButton(
modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
checked = calendarEnabled,
onCheckedChange = { calendarEnabled = it },
label = { Text("Calendar") },
transformation = SurfaceTransformation(transformationSpec),
)
}
item { AlertDialogDefaults.GroupSeparator() }
item {
FilledTonalButton(
modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
onClick = {},
label = { Text(modifier = Modifier.fillMaxWidth(), text = "Never share") },
transformation = SurfaceTransformation(transformationSpec),
)
}
item {
FilledTonalButton(
modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
onClick = {},
label = { Text(modifier = Modifier.fillMaxWidth(), text = "Share always") },
transformation = SurfaceTransformation(transformationSpec),
)
}
}
}
@Preview
@Composable
fun AlertDialogWithEdgeButtonSample() {
var showDialog by remember { mutableStateOf(false) }
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") },
text = { Text("Please try again later or check your network settings.") },
edgeButton = {
AlertDialogDefaults.EdgeButton(
onClick = {
// Perform confirm action here
showDialog = false
}
)
},
)
}
AlertDialogWithEdgeButtonTransformingContentSample
@Preview
@Composable
fun AlertDialogWithEdgeButtonTransformingContentSample() {
var showDialog by remember { mutableStateOf(false) }
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") },
text = { Text("Please try again later or check your network settings.") },
transformationSpec = rememberTransformationSpec(),
edgeButton = {
AlertDialogDefaults.EdgeButton(
onClick = {
// Perform confirm action here
showDialog = false
}
)
},
)
}
