Dialog y AlertDialog con layout personalizado en Android

En este post te mostraré a crear un diálogo o alerta personalizada en Android usando un layout creado por nosotros, es decir, crear una alerta personalizada agregando elementos como EditText, Button, etcétera.

Las alertas personalizadas en Android sirven para mostrar una alerta que no es una alerta de confirmación, ya que podemos definir un layout personalizado.

Para lograr esto vamos a usar la clase Dialog y AlertDialog.Builder.

Alerta personalizada en Android con AlertDialog

El primer enfoque es crear una alerta y agregarle vistas o componentes. Comenzamos definiendo un Layout:

<span class="pl-smi">LinearLayout</span> layout <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-smi">LinearLayout</span>(<span class="pl-smi">MainActivity</span><span class="pl-k">.</span><span class="pl-c1">this</span>);

Después creamos un componente, por ejemplo, un EditText:

<span class="pl-k">final</span> <span class="pl-smi">EditText</span> editTextNombre <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-smi">EditText</span>(<span class="pl-smi">MainActivity</span><span class="pl-k">.</span><span class="pl-c1">this</span>);

Lo agregamos al layout así:

layout<span class="pl-k">.</span>addView(editTextNombre);

Podemos crear todos los componentes necesarios y agregarlos al layout. Después, creamos un AlertDialog:

final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
builder
        .setTitle("El título")
        .setNegativeButton("Cancelar", null)
        .setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(MainActivity.this, "Click en ok", Toast.LENGTH_LONG).show();
            }
        });
final AlertDialog alertDialogPersonalizado = builder.create();

Como ves, es una alerta normal incluso podemos agregar listeners para cuando hagan click en los botones que tiene por defecto.

La parte importante que establece la vista personalizada es la siguiente:

alertDialogPersonalizado.setView(layout);
// después mostrarla:
alertDialogPersonalizado.show();

Llamamos a setView y le pasamos el layout. Con esto habremos definido nuestra alerta, más no la hemos mostrado. Para mostrarla simplemente invocamos a show.

El código completo para mostrar una alerta personalizada en Android queda así:

LinearLayout layout = new LinearLayout(MainActivity.this);
layout.setOrientation(LinearLayout.VERTICAL);
final EditText editTextNombre = new EditText(MainActivity.this);
editTextNombre.setHint("Nombre");
layout.addView(editTextNombre);
final EditText editTextPass = new EditText(MainActivity.this);
editTextPass.setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);
editTextPass.setHint("Contraseña");
layout.addView(editTextPass);
final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
builder
        .setTitle("El título")
        .setNegativeButton("Cancelar", null)
        .setPositiveButton("OK", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(MainActivity.this, "Click en ok", Toast.LENGTH_LONG).show();
            }
        });
final AlertDialog alertDialogPersonalizado = builder.create();
alertDialogPersonalizado.setView(layout);
// después mostrarla:
alertDialogPersonalizado.show();

Las desventajas de esto es que el layout no es 100 % personalizado pues todavía conserva los botones, además de que es tedioso agregar componente por componente; por eso veremos el segundo enfoque.

Diálogo personalizado en Android usando Dialog

En este modo vamos a usar un layout XML para mostrarlo en un diálogo de android. El código es más simple. Lo único que tenemos que hacer es lo siguiente:

final Dialog dialogPersonalizado = new Dialog(MainActivity.this);
dialogPersonalizado.setContentView(R.layout.dialogo_password_ajustes);

Gracias al método setContentView podemos indicar un layout que servirá para el diálogo, así de simple.

Después, si tenemos elementos en nuestro layout y queremos obtener una referencia a ellos, invocamos a findViewById pero desde el diálogo. Por ejemplo:

// Podemos obtener los elementos dentro del layout ;)
Button btnAlertaPasswordOk = dialogPersonalizado.findViewById(R.id.btnAlertaPasswordOk);
btnAlertaPasswordOk.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "Ok en botón", Toast.LENGTH_SHORT).show();
    }
});

Por cierto, el layout es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:paddingLeft="10sp"
    android:paddingTop="10sp"
    android:paddingRight="10sp">

    <EditText
        android:id="@+id/editText"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:ems="10"
        android:hint="Contraseña"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnAlertaPasswordOk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="OK"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />

    <Button
        android:id="@+id/btnAlertaPasswordCancelar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="Cancelar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />

</androidx.constraintlayout.widget.ConstraintLayout>

El layout personalizado es muy simple, lo sé, pero se puede extender y se pueden colocar todos los elementos (en una ocasión coloqué un mapa de Gmaps)

A cada elemento le podemos agregar listeners y todo lo que se hace normalmente como si fueran elementos normales obtenidos en una actividad o fragmento.

Finalmente, recuerda mostrar la alerta personalizada cuando lo requieras:

dialogPersonalizado<span class="pl-k">.</span>show();

El código completo queda así:

final Dialog dialogPersonalizado = new Dialog(MainActivity.this);
dialogPersonalizado.setContentView(R.layout.dialogo_password_ajustes);
// Podemos obtener los elementos dentro del layout ;)
Button btnAlertaPasswordOk = dialogPersonalizado.findViewById(R.id.btnAlertaPasswordOk);
btnAlertaPasswordOk.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "Ok en botón", Toast.LENGTH_SHORT).show();
    }
});

// Después mostrarla:
dialogPersonalizado.show();

Un layout más complejo de una alerta personalizada en Android

Puedes agregar todos los elementos que quieras. Veamos otro layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:paddingLeft="10sp"
    android:paddingTop="10sp"
    android:paddingRight="10sp">

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="Ajustes"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvHost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="@string/host"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView9" />

    <EditText
        android:id="@+id/etAlertaAjustesHost"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:gravity="start|top"
        android:hint="@string/host"
        android:inputType="textMultiLine"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvHost" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/zona_horaria"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/etAlertaAjustesHost" />

    <EditText
        android:id="@+id/etAlertaAjustesZonaHoraria"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:hint="@string/zona_horaria"
        android:inputType="textPersonName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView11" />

    <Button
        android:id="@+id/btnAlertaAjustesGuardar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="@string/guardar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/etAlertaAjustesZonaHoraria" />

</androidx.constraintlayout.widget.ConstraintLayout>

El cual se ve así:

De este modo tenemos infinidad de aplicaciones de esta alerta. Cabe mencionar que desde el punto de vista de diseño de interfaces las alertas deberían ser muy simples, pero en ocasiones se requiere eso, y por eso escribí este post.

Si quieres leer más sobre programación en Android haz click aquí.