Material 3 Dialogs in Jetpack Compose

Get started with Material 3 dialogs in Jetpack Compose to create user-friendly interfaces for displaying messages or requesting input.

Explore Dialog Styles

Learn to implement three Material 3 dialog types for presenting messages or options.

Alert Dialog

Shows a dialog with title and buttons.

@Composable
fun AlertDialogExample(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    dialogTitle: String,
    dialogText: String,
    icon: ImageVector,
) {
    // Creates a dialog with title, text, and buttons
    AlertDialog(
        icon = {
            Icon(icon, contentDescription = "Example Icon") // Displays the dialog icon
        },
        title = {
            Text(text = dialogTitle) // *Required: Sets the dialog title
        },
        text = {
            Text(text = dialogText) // *Required: Sets the dialog message
        },
        onDismissRequest = {
            onDismissRequest() // *Required: Executes when the dialog is dismissed
        },
        confirmButton = {
            TextButton(
                onClick = { onConfirmation() }
            ) {
                Text("Confirm") // *Required: Defines confirm button
            }
        },
        dismissButton = {
            TextButton(
                onClick = { onDismissRequest() }
            ) {
                Text("Dismiss") // *Required: Defines dismiss button
            }
        }
    )
}
  

Use an Alert Dialog when you want to show a dialog with a title and buttons.

Examples:

• Confirm a file deletion in a file manager
• Request user confirmation in a settings app
• Show an error message in a form submission

---

Basic Dialog

Shows a simple dialog with custom content.

@Composable
fun MinimalDialog(onDismissRequest: () -> Unit) {
    // Creates a simple dialog with custom content
    Dialog(
        onDismissRequest = { onDismissRequest() } // *Required: Executes when the dialog is dismissed
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .padding(16.dp), // *Required: Customizes dialog layout
            shape = RoundedCornerShape(16.dp) // Sets rounded corners
        ) {
            Text(
                text = "This is a minimal dialog", // *Required: Defines dialog content
                modifier = Modifier
                    .fillMaxSize()
                    .wrapContentSize(Alignment.Center), // Centers the text
                textAlign = TextAlign.Center // Centers the text
            )
        }
    }
}
  

Use a Basic Dialog when you want to show a simple dialog with custom content.

Examples:

• Show a welcome message in an onboarding flow
• Display a notification in a news app
• Present a simple alert in a utility app

---

Advanced Dialog

Shows a dialog with image and buttons.

@Composable
fun DialogWithImage(
    onDismissRequest: () -> Unit,
    onConfirmation: () -> Unit,
    painter: Painter,
    imageDescription: String,
) {
    // Creates a dialog with an image and buttons
    Dialog(
        onDismissRequest = { onDismissRequest() } // *Required: Executes when the dialog is dismissed
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .height(375.dp)
                .padding(16.dp), // *Required: Customizes dialog layout
            shape = RoundedCornerShape(16.dp) // Sets rounded corners
        ) {
            Column(
                modifier = Modifier
                    .fillMaxSize(), // Fills card space
                verticalArrangement = Arrangement.Center, // Centers content vertically
                horizontalAlignment = Alignment.CenterHorizontally // Centers content horizontally
            ) {
                Image(
                    painter = painter, // Displays the dialog image
                    contentDescription = imageDescription, // Describes image for accessibility
                    contentScale = ContentScale.Fit, // Scales image to fit
                    modifier = Modifier
                        .height(160.dp) // Sets image height
                )
                Text(
                    text = "This is a dialog with buttons and an image.", // *Required: Defines dialog content
                    modifier = Modifier.padding(16.dp) // Adds padding
                )
                Row(
                    modifier = Modifier
                        .fillMaxWidth(), // Fills row width
                    horizontalArrangement = Arrangement.Center // Centers buttons
                ) {
                    TextButton(
                        onClick = { onDismissRequest() },
                        modifier = Modifier.padding(8.dp)
                    ) {
                        Text("Dismiss") // Defines dismiss button
                    }
                    TextButton(
                        onClick = { onConfirmation() },
                        modifier = Modifier.padding(8.dp)
                    ) {
                        Text("Confirm") // Defines confirm button
                    }
                }
            }
        }
    }
}
  

Use an Advanced Dialog when you want to show a dialog with an image and buttons.

Examples:

• Show a product preview in a shopping app
• Request user input with an image in a survey app
• Present a detailed alert in a media app

---

Dialog Properties

Understand the key properties used in the dialog examples.

Property	Usage
onDismissRequest*	Required: Executes when the dialog is dismissed
title	Sets the dialog title text (Alert Dialog)
text	Sets the dialog message text (Alert Dialog)
confirmButton	Defines the confirm button (Alert Dialog)
dismissButton	Defines the dismiss button (Alert Dialog)
icon	Displays an icon at the top of the dialog (Alert Dialog)
content*	Required: Defines the dialog’s content, like Card (Basic/Advanced Dialog)
contentDescription	Describes the icon or image for accessibility
painter	Displays an image in the dialog (Advanced Dialog)
contentScale	Sets the image scaling mode (e.g., Fit) (Advanced Dialog)