Jetpack Compose AlertDialog

AlertDialog in Jetpack Compose represents a Material Design dialog component that displays important messages or requests user decisions. The AlertDialog composable implements the Material Design specifications while providing a native Compose experience. Unlike traditional Android AlertDialog, Jetpack Compose AlertDialog offers better integration with Compose UI patterns and state management.

AlertDialog Properties and Parameters

The AlertDialog composable function in Jetpack Compose includes several key properties that control its behavior and appearance:

1. onDismissRequest

The onDismissRequest property is a crucial callback that executes when the user attempts to dismiss the AlertDialog. This lambda function typically handles system back button presses or outside touches.

AlertDialog(  
    onDismissRequest = {   
        // Handle dialog dismissal  
        showDialog = false   
    },  
    // Other properties...  
)  

2. confirmButton

The confirmButton property defines the primary action button in AlertDialog. This composable parameter typically displays the main action the user should take.

AlertDialog(  
    confirmButton = {  
        TextButton(onClick = { /* Handle confirmation */ }) {  
            Text("OK")  
        }  
    },  
    // Other properties...  
)  

3. dismissButton

The optional dismissButton property provides a secondary action, usually for canceling or dismissing the AlertDialog without taking the primary action.

AlertDialog(  
    dismissButton = {  
        TextButton(onClick = { /* Handle dismissal */ }) {  
            Text("Cancel")  
        }  
    },  
    // Other properties...  
)  

4. title

The title property accepts a composable lambda that displays the AlertDialog's header text or content.

AlertDialog(  
    title = {  
        Text(  
            text = "Dialog Title",  
            style = MaterialTheme.typography.headlineSmall  
        )  
    },  
    // Other properties...  
)  

5. text

The text property defines the main content body of the AlertDialog. This composable parameter typically contains the dialog's message or description.

AlertDialog(  
    text = {  
        Text("This is the main dialog content message")  
    },  
    // Other properties...  
)  

Advanced AlertDialog Properties

Jetpack Compose AlertDialog includes additional properties for customizing appearance and behavior:

6. icon

The icon property allows displaying a visual indicator above the title in AlertDialog. This parameter accepts any composable content.

AlertDialog(  
    icon = {  
        Icon(  
            imageVector = Icons.Filled.Warning,  
            contentDescription = "Warning Icon"  
        )  
    },  
    // Other properties...  
)  

7. shape

The shape property customizes the AlertDialog's corner radius and overall visual appearance using Compose shapes.

AlertDialog(  
    shape = RoundedCornerShape(16.dp),  
    // Other properties...  
)  

8. containerColor

The containerColor property defines the background color of the AlertDialog container.

AlertDialog(  
    containerColor = MaterialTheme.colorScheme.surface,  
    // Other properties...  
)  

9. tonalElevation

The tonalElevation property controls the surface tonal elevation, affecting the dialog's visual hierarchy.

AlertDialog(  
    tonalElevation = 6.dp,  
    // Other properties...  
)  

AlertDialog Implementation Examples

Here are detailed implementation examples showcasing various AlertDialog use cases:

Basic AlertDialog Example

@Composable  
fun BasicAlertDialogExample() {  
    var showDialog by remember { mutableStateOf(false) }  
  
    if (showDialog) {  
        AlertDialog(  
            onDismissRequest = { showDialog = false },  
            title = { Text("Basic Alert Dialog") },  
            text = { Text("This is a simple AlertDialog example") },  
            confirmButton = {  
                TextButton(onClick = { showDialog = false }) {  
                    Text("OK")  
                }  
            }  
        )  
    }  
  
    Button(onClick = { showDialog = true }) {  
        Text("Show Dialog")  
    }  
}  

AlertDialog with Custom Styling

@Composable  
fun StyledAlertDialogExample() {  
    var showDialog by remember { mutableStateOf(false) }  
  
    if (showDialog) {  
        AlertDialog(  
            onDismissRequest = { showDialog = false },  
            icon = {  
                Icon(  
                    imageVector = Icons.Filled.Info,  
                    contentDescription = "Information",  
                    tint = MaterialTheme.colorScheme.primary  
                )  
            },  
            title = {  
                Text(  
                    "Styled Alert Dialog",  
                    style = MaterialTheme.typography.headlineMedium,  
                    color = MaterialTheme.colorScheme.primary  
                )  
            },  
            text = {  
                Text(  
                    "This AlertDialog demonstrates custom styling",  
                    style = MaterialTheme.typography.bodyLarge  
                )  
            },  
            confirmButton = {  
                TextButton(onClick = { showDialog = false }) {  
                    Text("Confirm")  
                }  
            },  
            dismissButton = {  
                TextButton(onClick = { showDialog = false }) {  
                    Text("Cancel")  
                }  
            },  
            containerColor = MaterialTheme.colorScheme.surface,  
            tonalElevation = 8.dp,  
            shape = RoundedCornerShape(16.dp)  
        )  
    }  
  
    Button(onClick = { showDialog = true }) {  
        Text("Show Styled Dialog")  
    }  
}  

AlertDialog with Custom Content

@Composable  
fun CustomContentAlertDialogExample() {  
    var showDialog by remember { mutableStateOf(false) }  
    var selectedOption by remember { mutableStateOf("Option 1") }  
  
    if (showDialog) {  
        AlertDialog(  
            onDismissRequest = { showDialog = false },  
            title = { Text("Select an Option") },  
            text = {  
                Column {  
                    listOf("Option 1", "Option 2", "Option 3").forEach { option ->  
                        Row(  
                            modifier = Modifier  
                                .fillMaxWidth()  
                                .padding(vertical = 8.dp)  
                                .clickable { selectedOption = option },  
                            verticalAlignment = Alignment.CenterVertically  
                        ) {  
                            RadioButton(  
                                selected = (selectedOption == option),  
                                onClick = { selectedOption = option }  
                            )  
                            Text(  
                                text = option,  
                                modifier = Modifier.padding(start = 8.dp)  
                            )  
                        }  
                    }  
                }  
            },  
            confirmButton = {  
                TextButton(onClick = { showDialog = false }) {  
                    Text("OK")  
                }  
            },  
            dismissButton = {  
                TextButton(onClick = { showDialog = false }) {  
                    Text("Cancel")  
                }  
            }  
        )  
    }  
  
    Button(onClick = { showDialog = true }) {  
        Text("Show Custom Dialog")  
    }  
}