BottomSheet and Dialog Guide for Compose - ModalBottomSheet (v2)

#android #kotlin #compose #tutorial

Dialogs and bottom sheets are essential UI patterns. Master ModalBottomSheet, AlertDialog, and DatePicker for flexible modal interactions in Compose.

Building ModalBottomSheet

Create dismissible bottom sheets with content:

var showBottomSheet by remember { mutableStateOf(false) }

if (showBottomSheet) {
    ModalBottomSheet(
        onDismissRequest = { showBottomSheet = false },
        modifier = Modifier.fillMaxHeight(0.8f)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Select an option",
                style = MaterialTheme.typography.headlineSmall)
            Spacer(modifier = Modifier.height(16.dp))

            listOf("Option 1", "Option 2", "Option 3").forEach { option ->
                TextButton(
                    onClick = {
                        onOptionSelected(option)
                        showBottomSheet = false
                    },
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text(option)
                }
            }
        }
    }
}

Button(onClick = { showBottomSheet = true }) {
    Text("Open Sheet")
}

AlertDialog Implementation

For simple confirmations, use AlertDialog:

var showDialog by remember { mutableStateOf(false) }

if (showDialog) {
    AlertDialog(
        onDismissRequest = { showDialog = false },
        title = { Text("Confirm Delete") },
        text = { Text("Are you sure you want to delete this item?") },
        confirmButton = {
            Button(onClick = {
                onConfirm()
                showDialog = false
            }) {
                Text("Delete")
            }
        },
        dismissButton = {
            TextButton(onClick = { showDialog = false }) {
                Text("Cancel")
            }
        }
    )
}

DatePicker Dialog

Implement date selection with Material DatePicker:

var selectedDate by remember { mutableStateOf<Long?>(null) }
val datePickerState = rememberDatePickerState()

DatePickerDialog(
    onDismissRequest = { },
    confirmButton = {
        Button(onClick = {
            selectedDate = datePickerState.selectedDateMillis
        }) {
            Text("OK")
        }
    }
) {
    DatePicker(state = datePickerState)
}