El AlertDialog es un elemento típico de nuestras aplicaciones Android, son el equivalente a las ventanas de diálogo comunes de otros lenguajes. Crearlas puede ser un poco curioso, porque se pueden realizar de múltiples formas. Debido a eso, en este artículo cubriremos la forma más sencilla y básica de crear un AlertDialog utilizando el lenguaje Java ¿Listo para trabajar? ¡Manos a la obra!
Tabla de Contenido
Preparemos el camino para nuestro AlertDialog
Antes de ver como hacemos un AlertDialog, preparemos el camino con una sencilla aplicación que interactúe con nuestra ventana de diálogo.
Abrimos nuestro Android Studio y damos clic en Create New Project.
Seleccionamos un Empty Activity y presionamos el botón Next.
El Name de nuestro proyecto será MiAlertDialog, el Minimum SDK es API 21. Cuando terminemos, presionamos el botón Finish.
Como lo muestra la imagen, colocamos 2 objetos TextView, un EditText de tipo PlainText y un Button.
Por supuesto, no olvidemos aplicarle desde el Component Tree los correspondientes Constrain a todos nuestros objetos. Los mínimos son: parent top y parent start. Recuerden que esto lo hacemos utilizando el botón derecho del ratón sobre los objetos.
Una vez aplicado esto. Abrimos el archivo strings.xml y añadimos los siguientes strings debajo de app_name:
<string name="texto1">Escribe tu nombre y presiona el botón Confirmar</string>
<string name="hint">Nombre Completo</string>
<string name="boton">CONFIRMAR</string>
<string name="texto2">... Esperando confirmación ...</string>
Necesitamos ajustar los Attributes de cada objeto. Tomamos el primer TextView, las propiedades a ajustar son las siguientes:
- gravity: Se establece a center
- textAlignment: Se establece a center
- text: Se establece a @string/texto1
- textSize: Se establece a 20sp
Tal como muestra la imagen.
Tomamos el EditText y ajustamos sus propiedades:
- id: Se establece a txtNombre
- hint: Se establece a @string/hint
- textAlignment: Se establece a center
Y queda como muestra la imagen:
Ahora, tomamos el Button y ajustamos sus propiedades:
- id: Se establece a btnConfirmar
- text: Se establece a @string/boton
- textSize: se establece a 20sp
Y queda como muestra la imagen:
Tomamos el último TextView y ajustamos sus propiedades:
- id: Se establece a txtConfirmar
- gravity: Se establece a center
- text: Se establece a @string/text2
- textAlignment: Se establece a center
- textSize: Se establece a 20sp
Y queda así.
Programemos la base de nuestra aplicación
Es hora de trabajar en el MainActivity, necesitamos un EditText, un Button, un TextView, un AlertDialog.Builder, un Toast y un String.
private EditText txtNombre;
private Button btnConfirmar;
private TextView txtConfirmar;
private AlertDialog.Builder builder;
private Toast aviso;
private String mensaje = "";
Instaciemos nuestros objetos en el método onCreate
txtNombre = (EditText) findViewById(R.id.txtNombre);
btnConfirmar = (Button) findViewById(R.id.btnConfirmar);
txtConfirmar = (TextView) findViewById(R.id.txtConfirmar);
Añadimos OnClickListener del botón
btnConfirmar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
Comprobamos la cantidad de texto en el EditText, si es cero, preparemos un mensaje y lo mostramos con el Toast.
if(txtNombre.length()==0){
mensaje = "Escriba por favor su nombre completo";
aviso = Toast.makeText(getApplicationContext(), mensaje,Toast.LENGTH_SHORT);
aviso.show();
}else{
// Aquí va lo que sigue
}
Ya comienza a tomar forma.
En la siguiente sección de nuestro artículo, trabajaremos dentro de ese else.
Construyamos nuestro AlertDialog
Los AlertDialog se construyen con dos objetos. El primero depende de AlertDialog.Builder, este objeto se encargará de construir la ventana de diálogo con sus propiedades básicas. El segundo objeto depende de AlertDialog que permite mostrar la ventana construida y también puede servir para enviarle parámetros adicionales.
Un detalle muy importante: Los AlertDialog deben llevar como contexto el nombre del activity del que dependen. NO SE USA getApplicationContext() ya que simplemente hará que la aplicación no funcione.
Comenzamos instanciado nuestro objeto constructor, recordemos que debe llevar de contexto el activity donde trabajamos.
builder = new AlertDialog.Builder(MainActivity.this);
Para que nuestro ventana de diálogo no sea muy simple, le añadiremos algunos objetos, así que creamos un LinearLayout para acomodarlos de manera lineal. Todos los objetos que van dentro del AlertDialog, también deben llevar como contexto el activity actual.
LinearLayout layout = new LinearLayout(MainActivity.this);
Crearemos 2 TextView para mostrar algo de texto y un EditText.
TextView txtTienes = new TextView(MainActivity.this);
EditText edtEdad = new EditText(MainActivity.this);
TextView txtEdad = new TextView(MainActivity.this);
Es momento de editar el archivo strings.xml nuevamente, necesitamos agregar los texto que usaremos en nuestra ventana de diálogo, son los siguientes:
<string name="dialogoTitulo">¡ATENCIÓN!</string>
<string name="dialogoMensaje">Gracias por darnos tu nombre. Ahora confirma tu edad</string>
<string name="dialogoTienes">¿Tienes</string>
<string name="dialogoEdad">años?</string>
<string name="dialogoBoton1">Si</string>
<string name="dialogoBoton2">No</string>
<string name="dialogoBoton3">Quiza...</string>
Debe ir así:
Una vez editado el archivo strings.xml, regresemos a continuar trabajando en nuestro código. Lo primero es establecer el título de la ventana de diálogo, esto lo logramos con el método setTitle que recibe como parámetro un string o el name de nuestra cadena dentro del archivo strings.xml
builder.setTitle(R.string.dialogoTitulo);
Ahora, coloquemos el mensaje de la misma forma en como lo hicimos con el título, usando el name de nuestra cadena de texto en el método setMessage.
builder.setMessage(R.string.dialogoMensaje);
A nuestro primer TextView también le cargamos el texto que necesitamos con setText.
txtTienes.setText(R.string.dialogoTienes);
El EditText de nuestra ventana de diálogo, lo convertimos en una caja numérica con el método setInputType. Con la constante InputType.TYPE_CLASS_NUMBER hacemos que sea numérica y con la constante InputType.TYPE_NUMBER_VARIATION_NORMAL hacemos que sea un número entero.
edtEdad.setInputType(InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_VARIATION_NORMAL);
En algunos dispositivos, el EditText por no estar instanciado de un objeto dentro de un activity, aparecerá muy pequeño, para evitar esto con setWidth lo hacemos que tenga al menos 100 píxeles de ancho.
edtEdad.setWidth(100);
Con el método setTextAlignment y la constante EditText.TEXT_ALIGNMENT_CENTER, centramos el texto de nuestro EditText.
edtEdad.setTextAlignment(EditText.TEXT_ALIGNMENT_CENTER);
Y para evitar que crezca más de lo necesario, con setFilters y la propiedad LengthFilter lo establecemos a 5 dígitos máximo.
edtEdad.setFilters(new InputFilter[]{
new InputFilter.LengthFilter(5)
});
Agregamos el texto de nuestro segundo TextView con setText.
txtEdad.setText(R.string.dialogoEdad);
Cambiamos la orientación de nuestro LinearLayout con el método setOrientation y la constante LinearLayout.HORIZONTAL
layout.setOrientation(LinearLayout.HORIZONTAL);
Con el método setPadding, le ponemos 30 píxeles de espaciado a la izquierda, 0 arriba, 30 a la derecha y 0 abajo.
layout.setPadding(30,0,30,0);
Y con setGravity colocamos el LinearLayout justo en el centro con Gravity.CENTER.
layout.setGravity(Gravity.CENTER);
Añadimos los tres objetos al LinearLayout con el método addView.
layout.addView(txtTienes);
layout.addView(edtEdad);
layout.addView(txtEdad);
Luego añadimos el LinearLayout a la ventana de diálogo con el mismo método.
builder.setView(layout);
Pongamos botones en nuestro AlertDialog
Podemos colocar hasta 3 botones básicos:
- setPositiveButton: Coloca un típico botón de “Aceptar”, normalmente a la derecha de la ventana. Lleva dos parámetros, el texto que llevará el botón y el Listener derivado de DialogInterface.OnClickListener.
- setNegativeButton: Coloca un típico botón de “Cancelar”, normalmente a la izquierda del botón positivo. Lleva dos parámetros, el texto que llevará el botón y el Listener derivado de DialogInterface.OnClickListener.
- setNeutralButton: Coloca un típico botón sin una función definida, normalmente a la izquierda de la ventana. Lleva dos parámetros, el texto que llevará el botón y el Listener derivado de DialogInterface.OnClickListener.
Comencemos con el botón positivo, simplemente le notificaremos al usuario que hemos recibido sus datos, esta información la enviaremos al segundo TextView de nuestro activity. Recordemos que el primer parámetro es el String name que declaramos en el archivo strings.xml
builder.setPositiveButton(R.string.dialogoBoton1, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
mensaje = txtNombre.getText() + ": Gracias por confirmar que tienes " + edtEdad.getText() + " años";
txtConfirmar.setText(mensaje);
}
});
Con el botón neutral, le pediremos al usuario que revise su información.
builder.setNeutralButton(R.string.dialogoBoton3, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
mensaje = "Por favor revisa bien tu edad";
txtConfirmar.setText(mensaje);
}
});
Y con el botón negativo le pedimos que ingrese de nuevo los datos.
builder.setNegativeButton(R.string.dialogoBoton2, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
mensaje = "¿Entonces que edad tienes?";
txtConfirmar.setText(mensaje);
}
});
Mostrar el AlertDialog y probar la aplicación
Por último, crearemos el objeto tipo AlertDialog que será el encargado de mostrarlo. No le pasaremos parámetros adicionales, así que será sencillo. Este objeto recibe como valor de inicio el método create del objeto AlertDialog.Builder.
AlertDialog dialogo = builder.create();
Por último, mostramos la ventana de diálogo con el método show.
dialogo.show();
Con el código finalizado ¡Es hora de ponerlo a prueba! Por favor observa el siguiente vídeo que muestra el resultado.
¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.
Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.
