¿Cómo crear un cuadro de diálogo Sí/No personalizado en Android con Kotlin?

Android AlertDialog se usa para mostrar una pequeña ventana al usuario para que tome una decisión a través de un botón Aceptar, Sí o Cancelar o ingrese información adicional. Normalmente es modal y requiere que el usuario realice alguna acción antes de poder continuar. En este artículo, usaremos AlertDialog para crear una solución genérica reutilizable cuando el usuario simplemente necesite responder Sí o No. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Empezando

Abra Android Studio e importe el proyecto inicial. Cree una nueva clase CustomDialog.kt para contener nuestro diálogo. Nuestro CustomDialog se inicializa con un contexto, ya que AlertDialog.Builder lo necesita. La función mostrar configura el título y el contenido del mensaje que se mostrará al usuario.

import android.app.AlertDialog
import android.content.Context
  
class CustomDialog(context: Context) : AlertDialog.Builder(context) { 
  
   fun show(title: String, message: String) {
  
       val builder = AlertDialog.Builder(context)
       builder.setTitle(title)
       builder.setMessage(message)
       builder.setIcon(android.R.drawable.ic_dialog_alert)
  
       // Create the AlertDialog
       val alertDialog: AlertDialog = builder.create()
  
       // Set other dialog properties
       alertDialog.setCancelable(false)
  
       alertDialog.show()
  
   }
  
}

Ahora necesitamos implementar un mecanismo para permitir que el usuario reaccione según el botón en el que se haga clic. Para eso, usaremos la posibilidad en Kotlin de declarar una función como una variable. Aquí onResponse es una función que toma 1 argumento de tipo ResponseType y no devuelve nada. El tipo de respuesta enumerado enumera los posibles botones en nuestro cuadro de diálogo. También podríamos agregar CANCELAR.

lateinit var onResponse: (r : ResponseType) -> Unit
  
enum class ResponseType {
  YES, NO
}

Ahora la función show necesita recibir la función ResponseType del usuario como parámetro y llamarla cuando se hace clic en uno de los 2 botones. El código final para CustomDialog

import android.app.AlertDialog
import android.content.Context
  
class WineDialog(context: Context) : AlertDialog.Builder(context) {
  
    lateinit var onResponse: (r : ResponseType) -> Unit
  
    enum class ResponseType {
        YES, NO, CANCEL
    }
  
    fun show(title: String, message: String, listener: (r : ResponseType) -> Unit) {
        val builder = AlertDialog.Builder(context)
        builder.setTitle(title)
        builder.setMessage(message)
        builder.setIcon(android.R.drawable.ic_dialog_alert)
        onResponse = listener
  
        // performing positive action
        builder.setPositiveButton("Yes") { _, _ ->
            onResponse(ResponseType.YES)
        }
  
        // performing negative action
        builder.setNegativeButton("No") { _, _ ->
            onResponse(ResponseType.NO)
        }
  
        // Create the AlertDialog
        val alertDialog: AlertDialog = builder.create()
  
        // Set other dialog properties
        alertDialog.setCancelable(false)
        alertDialog.show()
    }
}

De hecho, también podríamos llamar a onResponse para el botón CANCELAR. Ahora, en algún lugar de su MainActivity, por ejemplo, podría escribir algo como:

CustomDialog(context).show(getString(R.string.alert_title),
                           getString(R.string.are_you_sure)) {
    
    Toast.makeText(applicationContext,
          it.toString(),
          Toast.LENGTH_LONG).show()
}

Producción:

De hecho, puede personalizar más utilizando un diseño XML. También es posible proporcionar un TextView o incluso un Spinner en el cuadro de diálogo.