Jetpack compose AlertDialog

1. Overview

In this article, we will learn about the Jetpack compose AlertDialog. Alert dialogs interrupt users with urgent information, details, or actions.

To learn more about Jetpack composables, refer to these articles.

2. Jetpack compose AlertDialog syntax

The AlertDialog composable functions are available in the below versions:

1. Default AlertDialog with a Confirm and a Dismiss buttons
2. AlertDialog which allows customization of buttons layout

3. Default Jetpack AlertDialog

This dialog positions its confirm and dismiss buttons within the available space. By default, it will try to place them horizontally next to each other and fall back to horizontal placement if not enough space is available. 

@Composable
fun AlertDialog(
    onDismissRequest: (() -> Unit)?,
    confirmButton: (@Composable () -> Unit)?,
    modifier: Modifier! = Modifier,
    dismissButton: (@Composable () -> Unit)? = null,
    title: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    shape: Shape! = MaterialTheme.shapes.medium,
    backgroundColor: Color! = MaterialTheme.colors.surface,
    contentColor: Color! = contentColorFor(backgroundColor),
    properties: DialogProperties! = DialogProperties()
): Unit

• onDismissRequest – Executes when the user tries to dismiss the Dialog by clicking outside or pressing the back button. This is not called when the user presses the dismiss button.
• confirmButton – A button that confirms a proposed action, thus resolving what triggered the dialog.
• modifier – Modifier to apply to the layout of the dialog.
• dismissButton – A button that dismisses the dialog.
• title – Purpose of the Dialog. It is not mandatory.
• text – Presents details about the purpose of the Dialog
• backgroundColor / contentColor – Background color of the dialog / Color of the Dialog’s content (children of Dialog)
• shape – Shape of Dialog

4. AlertDialog with a customizable Button layout

@Composable
fun AlertDialog(
    onDismissRequest: (() -> Unit)?,
    buttons: (@Composable () -> Unit)?,
    modifier: Modifier! = Modifier,
    title: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    shape: Shape! = MaterialTheme.shapes.medium,
    backgroundColor: Color! = MaterialTheme.colors.surface,
    contentColor: Color! = contentColorFor(backgroundColor),
    properties: DialogProperties! = DialogProperties()
): Unit

You can use this function to customize the button area fully.

• onDismissRequest – Executes when the user tries to dismiss the Dialog by clicking outside or pressing the back button. This is not called when the user presses the dismiss button.
• buttons – A function that emits the layout of buttons.
• modifier – Modifier to apply to the layout of the dialog.
• title – Purpose of the Dialog. It is not mandatory.
• text – Presents details about the purpose of the Dialog
• backgroundColor / contentColor – Background color of the dialog / Color of the Dialog’s content (children of Dialog)
• shape – Shape of Dialog

4.1. AlertDialog customizable buttons example

For example, the following dialog shows the Alert Dialog with a single cancel button.

@Preview(showBackground = true)
@Composable
fun showAlertDialog() {

    val openDialog = remember { mutableStateOf(true) }

    if (openDialog.value) AlertDialog(
        onDismissRequest = {
            openDialog.value = false
        },
        title = {
            Text(text = "Alert Dialog Title")
        },
        text = {
            Text(
                "Describes the purpose of Alert Dialog"
            )
        },
        buttons = {
            Row(
                modifier = Modifier.padding(all = 8.dp),
                horizontalArrangement = Arrangement.Center
            ) {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = { openDialog.value = false }
                ) {
                    Text("Cancel")
                }
            }
        }
    )
}

5. Conclusion

To sum up, we have covered the Jetpack compose AlertDialog with an example. You can find code samples of the Jetpack compose in our GitHub repository.