Uno de los componentes que pueden que más se utilicen en las aplicaciones Android es el del AlertDialog. Una vista que se muestra de forma modal al usuario y normalmente utilizada para mostrar información relevante y que el usuario sea consciente de ciertas situaciones.

Por lo general estos AlertDialog tienen asociados botones que disparan acciones de aceptación o rechazo. Los típicos mensajes de solicitud de permisos, las alertas antes de eliminar contenido, etc…

Compose viene con un componente para este menester y que se puede utilizar de forma muy fácil y rápida.

Creando un AlertDialog en Jetpack Compose Android

El composable que utilizaremos para mostrar este tipo de interfaz es el que os dejo a continuación:

@Composable
fun AlertDialog(
    onDismissRequest: (() -> Unit)?,
    buttons: (@Composable () -> Unit)?,
    modifier: Modifier! = Modifier,
    title: (@Composable () -> Unit)? = null,
    text: (@Composable () -> Unit)? = null,
    shape: Shape! = MaterialTheme.shapes.medium,
    backgroundColor: Color! = MaterialTheme.colors.surface,
    contentColor: Color! = contentColorFor(backgroundColor),
    properties: DialogProperties! = DialogProperties()
): Unit

Su utilización podría ser tal que así:

val openDialog = remember { mutableStateOf(true) }

    if (openDialog.value) {
        AlertDialog(
            onDismissRequest = {
                openDialog.value = false
            },
            title = {
                Text(text = "Use location service?", fontWeight = FontWeight.Bold)
            },
            text = {
                Text(
                    "This area typically contains the supportive text " +
                            "which presents the details regarding the Dialog's purpose."
                            ,fontWeight = FontWeight.Medium
                )
            },
            contentColor = Color.Blue,
            shape = RoundedCornerShape(size = 30.dp),
            backgroundColor = Color.White,
            buttons = {
                Row(
                    modifier = Modifier
                        .padding(all = 8.dp)
                        .fillMaxWidth(),
                    horizontalArrangement = Arrangement.End,
                ) {

                    TextButton(
                        onClick = { openDialog.value = false }
                    ) {
                        Text("DISAGREE", style = TextStyle(color = Color.Magenta))
                    }
                    Spacer(modifier = Modifier.width(16.dp))
                    TextButton(
                        onClick = { openDialog.value = false }
                    ) {
                        Text("AGREE", style = TextStyle(color = Color.Magenta))
                    }
                }
            }
        )
    }

Primero creamos un estado mutable y un remember donde guardemos el estado del AlertDialog para saber si está mostrándose o no.

En el onDismissRequest justamente lo que hacemos es cambiar el estado que tenemos almacenado a false para que en el if primero no deje entrar y por tanto en los repintados que ejejcuta compose cada vez que hay un cambio de estado no se pinte de nuevo el Alert.

El resto de opciones que tiene disponible el composable creo que son bastante específicos con lo que hacen. La propiedad buttons nos sirve para añadir un nuevo composable donde albergaremos los botones que queramos mostrar el usuario. En nuestro caso hemos añadido dos botones en una Row.

contentColor nos sirve para dar un tinte a todo el contenido de texto del AlertDialog.

shape es ideal para cambiar la forma del diálogo que se muestra, bordes, redondeado de las esquinas, …

backgroundColor es el color que damos a todo el fondo del diálogo, en nuestro caso blanco.