How to Create a Custom Alert (Dialog Box) in Android

Tiempo de lectura: 2 minutos

Reading Time: 2 minutes

I’m going to explain how we can create a custom Alert in Android so that it doesn’t look like it has been generated by the system and can be integrated into our own APP. Remember that an Alert is a dialog box used to display text with options on the user interface. More info here: https://developer.android.com/guide/topics/ui/dialogs

To give you an idea, this is what a custom Alert would look like in Android:

Pretty cool, right?

To create a Custom Alert, we will follow these steps:

• Create a custom view inside res/layouts and name it 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="Alert Title" />

    </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="This is a test alert" />

        </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="Accept"
            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="Cancel"
            android:textAllCaps="false"
            android:textColor="#FFFFFFFF" />

    </LinearLayout>

</LinearLayout>

With this code, we have created the following view:

• Next, we create a class called CustomAlert.java

In the class, we add the following:

public class CustomAlert {
 
    //Store Activity to access system elements
    private Activity activity;
    
    //Here we store our constructed dialog
    private Dialog dialog;

    //Dialog view
    private View dialogView;
java
Copy code
//Constructor with Activity parameter
public CustomAlert(Activity activity) {

    this.activity = activity;
 
    //Create the alert
    AlertDialog.Builder dialog = new AlertDialog.Builder(activity);
    //Instantiate LayoutInflater to load a custom view (View)
    LayoutInflater inflater = activity.getLayoutInflater();
    //Load the custom view custom_alert.xml that we created in the previous step.
    dialogView = inflater.inflate(R.layout.custom_alert, null);
    //Add the view to the dialog
    dialog.setView(dialogView);
}
//Get the cancel button
public Button cancelButton(){
return dialogView.findViewById(R.id.botonNegativo);
}
//Get the accept button
public Button acceptButton(){
return dialogView.findViewById(R.id.botonAceptar);
}
//Show the alert
public void show(){
dialog.show();
}
}

With this code, we can now handle the button event (methods acceptButton(), cancelButton()), for example, hide them or assign an onclick event to them.

And with the show() method, we can display the alert.