Cómo hacer un Alert personalizado (cuadro de diálogo) en Android

Tiempo de lectura: 2 minutos

Os voy a explicar cómo podemos crear un Alert personalizado en Android para que no parezca que ha sido generado por el sistema y se pueda integrar en nuestra propia APP. Recuerdo que un Alert es un cuadro de diálogo qué sirve para mostrar un texto con opciones sobre la interfaz de usuario, más info aquí: https://developer.android.com/guide/topics/ui/dialogs?hl=es-419

Para que os hagáis una idea, así es cómo quedaría un Alert personalizado en Android:

¿Queda guay verdad?

Para poder conseguir un Custom Alert o Alert personalizado vamos a hacer los siguientes pasos:

• Creamos la vista personalizada dentro de res/layouts y la llamamos custom_alert.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/contenedorAlerta"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/capaTitulo"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="left"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:layout_weight="0.5"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tituloAlerta"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Título de la alerta" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_gravity="left"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="10dp"
        android:layout_weight="4.5"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/capaContenidoAlerta"
            android:layout_width="400dp"
            android:layout_gravity="center"
            android:layout_height="180dp"
            android:layout_marginBottom="20dp"
            android:orientation="horizontal">

          <TextView
            android:id="@+id/contenidoAlerta"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Esto es una alerta de prueba" />

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <Button
            android:id="@+id/botonPositivo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:backgroundTint="#1666C0" 
            android:text="Aceptar"
            android:textAllCaps="false"
            android:textColor="#FFFFFFFF" />

        <Button
            android:id="@+id/botonNegativo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:backgroundTint="#b71c1c"
            android:text="Cancelar"
            android:textAllCaps="false"
            android:textColor="#FFFFFFFF" />

    </LinearLayout>

</LinearLayout>

Con este código hemos creado la siguiente vista:

• Ahora, creamos una clase a la que llamamos CustomAlert.java

En la clase añadimos lo siguiente:

public class CustomAlert {
 
    //Guardamos Activity para acceder a elementos del sistema
    private Activity activity;
    
    //Aquí guardamos nuestro dialog construido
    private Dialog dialog;

    //View del dialogo
    private View dialogView;

    //Constructor con parámetro Activity
    public CustomAlert(Activity activity) {

        this.activity = activity;
     
        //Crea el alert
        AlertDialog.Builder dialog = new AlertDialog.Builder(activity);
        //Instanciamos a LayoutInflater para poder cargar una vista personalizada (View)
        LayoutInflater inflater = activity.getLayoutInflater();
        //Cargamos la vista personalizada custom_alert.xml que hemos creado en el paso anterior.
        dialogView = inflater.inflate(R.layout.custom_alert, null);
        //Añadimos dicha vista al dialog
        dialog .setView(dialogView);

    }

}

Con el código añadido creamos un objeto llamado CustomAlert que tiene asignada la vista custom_alert.xml que hemos creado en el paso anterior.

• Ahora añadimos un get para los botones y la función de mostrar el alert.

public class CustomAlert {
 
    //Guardamos Activity para acceder a elementos del sistema
    private Activity activity;
    
    //Aquí guardamos nuestro dialog construido
    private Dialog dialog;

    //View del dialogo
    private View dialogView;

    //Constructor con parámetro Activity
    public CustomAlert(Activity activity) {

        this.activity = activity;
     
        //Crea el alert
        AlertDialog.Builder dialog = new AlertDialog.Builder(activity);
        //Instanciamos a LayoutInflater para poder cargar una vista personalizada (View)
        LayoutInflater inflater = activity.getLayoutInflater();
        //Cargamos la vista personalizada custom_alert.xml que hemos creado en el paso anterior.
        dialogView = inflater.inflate(R.layout.custom_alert, null);
        //Añadimos dicha vista al dialog
        dialog .setView(dialogView);
    }

   //Obtiene el boton de cancelar
   public Button botonCancelar(){
      return dialogView.findViewById(R.id.botonNegativo);
   }

   //Obtiene el boton de aceptar
   public Button botonAceptar(){
      return dialogView.findViewById(R.id.botonAceptar);
   }

   //Para mostrar el alert
   public void show(){
      dialog.show();
   }


}

Con este código ya podemos manejar el evento de los botones (métodos botonAceptar(), botonCancelar()), por ejemplo ocultarlos o asignarles un onclick.

Y con el método show(), podemos mostrar el alert.