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.
Ingeniero en Informática, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.