Dialog Implementation in Compose — AlertDialog, Input & Custom Dialogs

#android #kotlin #jetpackcompose #dialog

Dialog Implementation in Compose — AlertDialog, Input & Custom Dialogs

Jetpack Compose simplifies dialog management. This guide covers common patterns from confirmation to custom layouts.

1. Basic AlertDialog with Confirm/Dismiss

import androidx.compose.material3.AlertDialog
import androidx.compose.material3.TextButton
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

@Composable
fun SimpleAlertExample() {
    var showDialog by remember { mutableStateOf(false) }

    if (showDialog) {
        AlertDialog(
            onDismissRequest = { showDialog = false },
            title = { Text("Confirm Action") },
            text = { Text("Are you sure you want to proceed?") },
            confirmButton = {
                TextButton(onClick = {
                    println("Confirmed")
                    showDialog = false
                }) { Text("Confirm") }
            },
            dismissButton = {
                TextButton(onClick = { showDialog = false }) { Text("Cancel") }
            }
        )
    }

    Button(onClick = { showDialog = true }) {
        Text("Show Dialog")
    }
}

2. Delete Confirmation with Error Styling

@Composable
fun DeleteConfirmationDialog(onDelete: () -> Unit, onCancel: () -> Unit) {
    AlertDialog(
        onDismissRequest = onCancel,
        title = { Text("Delete Item?", color = MaterialTheme.colorScheme.error) },
        text = {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(
                    Icons.Default.Warning,
                    contentDescription = "Warning",
                    tint = MaterialTheme.colorScheme.error,
                    modifier = Modifier.size(32.dp)
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text("This action cannot be undone.")
            }
        },
        confirmButton = {
            TextButton(
                onClick = onDelete,
                colors = ButtonDefaults.textButtonColors(
                    contentColor = MaterialTheme.colorScheme.error
                )
            ) {
                Text("Delete")
            }
        },
        dismissButton = {
            TextButton(onClick = onCancel) { Text("Cancel") }
        }
    )
}

3. Input Dialog with Validation

@Composable
fun TextInputDialog(onConfirm: (String) -> Unit, onCancel: () -> Unit) {
    var inputText by remember { mutableStateOf("") }
    val isValid = inputText.isNotBlank() && inputText.length >= 3

    AlertDialog(
        onDismissRequest = onCancel,
        title = { Text("Enter Name") },
        text = {
            TextField(
                value = inputText,
                onValueChange = { inputText = it },
                label = { Text("Name (min 3 chars)") },
                modifier = Modifier.fillMaxWidth(),
                isError = inputText.isNotEmpty() && !isValid
            )
            if (inputText.isNotEmpty() && !isValid) {
                Text("Name must be at least 3 characters", color = MaterialTheme.colorScheme.error, style = MaterialTheme.typography.labelSmall)
            }
        },
        confirmButton = {
            TextButton(
                onClick = { onConfirm(inputText) },
                enabled = isValid
            ) {
                Text("Submit")
            }
        },
        dismissButton = {
            TextButton(onClick = onCancel) { Text("Cancel") }
        }
    )
}

4. Custom Dialog with Card Layout

@Composable
fun CustomCardDialog(onClose: () -> Unit) {
    Dialog(onDismissRequest = onClose) {
        Card(
            modifier = Modifier
                .fillMaxWidth(0.9f)
                .padding(16.dp),
            shape = RoundedCornerShape(12.dp),
            elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
        ) {
            Column(modifier = Modifier.padding(24.dp)) {
                Text("Settings", style = MaterialTheme.typography.headlineSmall)
                Spacer(modifier = Modifier.height(16.dp))

                Row(verticalAlignment = Alignment.CenterVertically) {
                    Text("Enable Notifications")
                    Spacer(modifier = Modifier.weight(1f))
                    var checked by remember { mutableStateOf(true) }
                    Switch(checked = checked, onCheckedChange = { checked = it })
                }

                Spacer(modifier = Modifier.height(16.dp))

                Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
                    TextButton(onClick = onClose) { Text("Cancel") }
                    TextButton(onClick = onClose) { Text("Save") }
                }
            }
        }
    }
}

5. Selection Dialog with RadioButton List

@Composable
fun SelectionDialog(
    options: List<String>,
    selectedOption: String?,
    onSelect: (String) -> Unit,
    onCancel: () -> Unit
) {
    AlertDialog(
        onDismissRequest = onCancel,
        title = { Text("Choose Option") },
        text = {
            LazyColumn {
                items(options.size) { index ->
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier
                            .fillMaxWidth()
                            .clickable { onSelect(options[index]) }
                            .padding(8.dp)
                    ) {
                        RadioButton(
                            selected = options[index] == selectedOption,
                            onClick = { onSelect(options[index]) }
                        )
                        Spacer(modifier = Modifier.width(8.dp))
                        Text(options[index])
                    }
                }
            }
        },
        confirmButton = {
            TextButton(onClick = onCancel) { Text("Done") }
        }
    )
}