Los diálogos (dialogs) en Android

Los diálogos (dialogs) en Android son pequeñas ventanas que aparecen sobre el contenido principal para solicitar al usuario que tome una decisión o ingrese información adicional. Son un componente fundamental para la interacción con el usuario y se pueden personalizar completamente.

Actualmente, existen dos enfoques principales para crear diálogos en Android: el moderno y recomendado Jetpack Compose, y el sistema de vistas tradicional basado en XML, utilizando la biblioteca de Material Components.

En esta entrada, exploraremos ambos métodos, comenzando por el enfoque moderno con Jetpack Compose.

Diálogos con Jetpack Compose (El enfoque moderno)

Jetpack Compose es el conjunto de herramientas de UI declarativo y moderno de Google. Crear diálogos con Compose es más simple e intuitivo. El componente principal es el composable AlertDialog.

Diálogo de confirmación simple

Para un diálogo con un título, un mensaje y botones de confirmación y cancelación, puedes usar AlertDialog directamente. Se controla su visibilidad a través de un estado.

var showDialog by remember { mutableStateOf(false) }

if (showDialog) {
    AlertDialog(
        onDismissRequest = {
            // Se ejecuta cuando el usuario toca fuera del diálogo o el botón de atrás
            showDialog = false
        },
        title = { Text("Título del Diálogo") },
        text = { Text("Este es un mensaje de ejemplo para el diálogo. ¿Estás seguro de continuar?") },
        confirmButton = {
            TextButton(
                onClick = {
                    // Acción de confirmación
                    showDialog = false
                }
            ) {
                Text("Confirmar")
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    // Acción de cancelación
                    showDialog = false
                }
            ) {
                Text("Cancelar")
            }
        }
    )
}

// Botón para mostrar el diálogo
Button(onClick = { showDialog = true }) {
    Text("Mostrar Diálogo")
}

El resultado es un diálogo funcional y estilizado según los principios de Material Design 3.

Diálogo con una lista de opciones

Para mostrar una lista de elementos seleccionables, puedes colocar un LazyColumn dentro del contenido del diálogo.

val items = listOf("Opción 1", "Opción 2", "Opción 3")

AlertDialog(
    onDismissRequest = { /* ... */ },
    title = { Text("Selecciona una opción") },
    text = {
        LazyColumn {
            items(items) { item ->
                Text(
                    text = item,
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable {
                            // Acción al seleccionar un item
                            println("$item seleccionado")
                        }
                        .padding(vertical = 12.dp)
                )
            }
        }
    },
    confirmButton = { /* ... */ }
)

Diálogo completamente personalizado

Si necesitas un control total sobre el diseño, puedes usar el composable Dialog y colocar cualquier contenido de Compose en su interior.

Dialog(onDismissRequest = { /* ... */ }) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        shape = RoundedCornerShape(16.dp),
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Diálogo Personalizado", style = MaterialTheme.typography.titleLarge)
            // Aquí puedes agregar cualquier composable: sliders, checkboxes, etc.
            Spacer(modifier = Modifier.height(16.dp))
            Button(onClick = { /* ... */ }) {
                Text("Cerrar")
            }
        }
    }
}

Diálogos con XML y Kotlin (Enfoque Legacy)

Aunque Jetpack Compose es el futuro, muchas aplicaciones aún utilizan el sistema de vistas. Para este enfoque, la clase recomendada es MaterialAlertDialogBuilder de la biblioteca de Material Components, que proporciona diálogos con el estilo de Material Design.

Asegúrate de tener la dependencia de Material Components en tu archivo build.gradle.kts:

implementation("com.google.android.material:material:1.12.0")

Diálogo simple de mensaje

El diálogo más básico muestra un título, un mensaje y un botón de acción. Con Kotlin, el código es muy conciso.

MaterialAlertDialogBuilder(this)
    .setTitle("Hola mundo: Título")
    .setMessage("Hola mundo: Mensaje.")
    .setPositiveButton("OK") { dialog, which ->
        // Acción al presionar OK
    }
    .show()

Diálogo de confirmación

Para un diálogo de sí/no, simplemente añade un botón negativo con setNegativeButton.

MaterialAlertDialogBuilder(this)
    .setTitle("Confirmación")
    .setMessage("¿Estás seguro de que deseas realizar esta acción?")
    .setNegativeButton("Cancelar") { dialog, which ->
        dialog.dismiss() // Cierra el diálogo
    }
    .setPositiveButton("Aceptar") { dialog, which ->
        // Acción de confirmación
    }
    .show()

Diálogo de selección simple (lista)

Para mostrar una lista de opciones donde el usuario puede elegir una, usa el método setItems.

val items = arrayOf("Opción 1", "Opción 2", "Opción 3")

MaterialAlertDialogBuilder(this)
    .setTitle("Elige una opción")
    .setItems(items) { dialog, which ->
        Log.i("Dialog", "Opción seleccionada: ${items[which]}")
    }
    .show()

Diálogo de selección simple con radio-buttons

Una variante del anterior que mantiene la selección visible.

val items = arrayOf("Opción 1", "Opción 2", "Opción 3")
var checkedItem = 0 // Opción seleccionada por defecto

MaterialAlertDialogBuilder(this)
    .setTitle("Elige una opción")
    .setSingleChoiceItems(items, checkedItem) { dialog, which ->
        checkedItem = which
    }
    .setPositiveButton("OK") { dialog, which ->
        Log.i("Dialog", "Opción final: ${items[checkedItem]}")
    }
    .show()

Diálogo de selección múltiple (checkboxes)

Para permitir que el usuario seleccione varias opciones, usa setMultiChoiceItems.

val items = arrayOf("Opción 1", "Opción 2", "Opción 3")
val checkedItems = booleanArrayOf(true, false, false) // Selecciones iniciales

MaterialAlertDialogBuilder(this)
    .setTitle("Elige tus preferencias")
    .setMultiChoiceItems(items, checkedItems) { dialog, which, isChecked ->
        Log.i("Dialog", "Opción ${items[which]} marcada: $isChecked")
    }
    .setPositiveButton("OK") { dialog, which ->
        // Acceder a `checkedItems` para ver las selecciones finales
    }
    .show()

Diálogo personalizado

Para diseños complejos, puedes inflar un layout XML personalizado usando setView(). Se recomienda usar View Binding para acceder a las vistas del layout de forma segura.

// 1. Inflar el layout personalizado con View Binding
val binding = DialogCustomLayoutBinding.inflate(layoutInflater)

// 2. Configurar el diálogo
MaterialAlertDialogBuilder(this)
    .setTitle("Formulario Personalizado")
    .setView(binding.root)
    .setPositiveButton("Enviar") { dialog, which ->
        val userInput = binding.editText.text.toString()
        // Hacer algo con los datos
    }
    .setNegativeButton("Cancelar", null)
    .show()