Jetpack Compose Dialog API (with Examples)

Jetpack Compose Dialog

Today, we will explore dialog APIs in Android Jetpack Compose.

Prerequisites:

Jetpack Compose provides 2 dialog APIs:

  • AlertDialog
  • Dialog

AlertDialog:

We can use it to make popup dialogs. Start typing AlertDialog and select the one with confirm and dismiss buttons.

Dialog Dismiss Button

It takes multiple parameters:

@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()
)

onDismissRequest – This is called when the user dismisses the dialog. It can be triggered when the user presses the back button or clicks outside the dialog. It is not called if you tap on the dismissButton.

confirmButton – A button for confirming an action.

modifier – To modify the layout of the dialog.

dismissButton – A button for dismissing the dialog.

title – The title of the action.

text – Description of the action.

shape – To set the shape for the dialog.

backgroundColor – The background color of the dialog.

contentColor – The dialog’s children’s preferred color.

properties – Additional configuration options.

The DialogProperties class takes the following parameters:

class DialogProperties constructor(
    val dismissOnBackPress: Boolean = true,
    val dismissOnClickOutside: Boolean = true,
    val securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit,
    val usePlatformDefaultWidth: Boolean = true
)

dismissOnBackPress – If the dialog should be dismissed when the user presses the back button. If it is true, pressing the back button will call onDismissRequest.

dismissOnClickOutside – If the dialog should be dismissed when the user clicks outside the dialog. If it is true, clicking outside the dialog will call onDismissRequest.

securePolicy – Policy for setting FLAG_SECURE on the dialog’s window.

usePlatformDefaultWidth – If the dialog should use the platform’s default width which is smaller than the screen size (this is experimental). If you want to create a full screen dialog, set its value to false.

Here is a simple example:

@Composable
fun MyUI() {

    var dialogOpen by remember {
        mutableStateOf(false)
    }

    if (dialogOpen) {
        AlertDialog(
            onDismissRequest = {
                // Dismiss the dialog when the user clicks outside the dialog or on the back
                // button. If you want to disable that functionality,
                // simply leave this block empty.
                dialogOpen = false
            },
            confirmButton = {
                TextButton(onClick = {
                    // perform the confirm action
                    dialogOpen = false
                }) {
                    Text(text = "Confirm")
                }
            },
            dismissButton = {
                TextButton(onClick = {
                    dialogOpen = false
                }) {
                    Text(text = "Dismiss")
                }
            },
            title = {
                Text(text = "Title")
            },
            text = {
                Text(text = "Description")
            },
            modifier = Modifier // Set the width and padding
                .fillMaxWidth()
                .padding(32.dp),
            shape = RoundedCornerShape(5.dp),
            backgroundColor = Color.White,
            properties = DialogProperties(
                dismissOnBackPress = true,
                dismissOnClickOutside = true
            )
        )
    }

    Button(onClick = { dialogOpen = true }) {
        Text(text = "OPEN")
    }
}

Output:

Jetpack Compose Dialog Example

Note: I changed the primary color in my project. You may see the TextButton with a different color.

By default, it places the buttons horizontally next to each other. There is another overload that provides the custom layout for the buttons. Start typing AlertDialog and select the one with the buttons parameter.

buttons parameter

Example:

@Composable
fun MyUI() {

    var dialogOpen by remember {
        mutableStateOf(false)
    }

    if (dialogOpen) {
        AlertDialog(
            onDismissRequest = {
                // Dismiss the dialog when the user clicks outside the dialog or on the back
                // button. If you want to disable that functionality,
                // simply leave this block empty.
                dialogOpen = false
            },
            buttons = {
                Column(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Button(onClick = {
                        dialogOpen = false
                    }) {
                        Text(text = "Confirm")
                    }
                    Button(onClick = {
                        dialogOpen = false
                    }) {
                        Text(text = "Dismiss")
                    }
                }
            },
            title = {
                Text(text = "Title")
            },
            text = {
                Text(text = "Description")
            },
            modifier = Modifier // Set the width and padding
                .fillMaxWidth()
                .padding(32.dp),
            shape = RoundedCornerShape(5.dp),
            backgroundColor = Color.White,
            properties = DialogProperties(
                dismissOnBackPress = true,
                dismissOnClickOutside = true
            )
        )
    }

    Button(onClick = { dialogOpen = true }) {
        Text(text = "OPEN")
    }
}

Output:

AlertDialog button positions

Making Custom Dialogs:

The Dialog API provides the functionality to create custom dialogs.

Example:

@Composable
fun MyUI() {

    var dialogOpen by remember {
        mutableStateOf(false)
    }

    if (dialogOpen) {
        Dialog(onDismissRequest = {
            dialogOpen = false
        }) {
            Surface(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight(),
                shape = RoundedCornerShape(size = 10.dp)
            ) {
                Column(modifier = Modifier.padding(all = 16.dp)) {
                    Text(text = "Your Dialog UI Here")
                }
            }
        }
    }

    Button(onClick = { dialogOpen = true }) {
        Text(text = "OPEN")
    }
}

Output:

Custom Dialog

Look at these beautiful custom dialogs made with Jetpack Compose Dialog API.

Continue Exploring Jetpack Compose:

Leave a Comment