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:

See the gist on github.

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:

See the gist on github.

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í:

See the gist on github.

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:

See the gist on github.

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:

See the gist on github.

Por cierto, el layout es el siguiente:

See the gist on github.

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í:

See the gist on github.

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

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

See the gist on github.

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í.