Create Custom Alert Dialog In Android

If you wanted to ask the user about taking a decision between yes or no in the response of any particular action taken by the user, by remaining in the same activity and without changing the screen, you can use Alert Dialog.

By default, In order to make an alert dialog, you need to make an object of AlertDialogBuilder which an inner class of AlertDialog.

Its syntax is given below:

AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);

Same like Alert Dialog, We can use android PopupWindow to show menu option as a dialog.

Create PopupWindow In Android Example


Creating Custom Alert Dialog View

create an alert dialog view by extending AlertDialog.

Create Alert Dialog class

MyAlertDialog.java

public class MyAlertDialog extends AlertDialog {

    protected MyAlertDialog(Context context) {
        super(context);
        initialize();
    }

    private void initialize() {
        View view = LayoutInflater.from(getContext()).inflate(R.layout.my_alert_layout,null);
        setView(view);
    }
}

In the constructor, Inflate your view into the alert dialog.

Create Custom Alert Dialog Layout

my_alert_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/alert_background"
    android:layout_margin="10dp"
    android:padding="10dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/alert_icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:visibility="gone"
        android:background="@drawable/ic_info_black_24dp"/>

    <TextView
        android:id="@+id/tv_title"
        style="@style/TextTitleStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:visibility="gone"
        android:text="Title"/>

    <TextView
        android:id="@+id/tv_desc"
        style="@style/TextDescStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/desc"
        android:padding="10dp"
        android:gravity="center"/>

    <LinearLayout
        android:id="@+id/layout_two_button"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_left"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            style="@style/ButtonStyle"
            android:text="@string/cancel"
            android:background="@drawable/button_background"
            android:layout_margin="5dp"
            android:layout_weight="1"/>

        <Button
            android:id="@+id/btn_right"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            style="@style/ButtonStyle"
            android:text="@string/delete"
            android:background="@drawable/button_background"
            android:layout_margin="5dp"
            android:layout_weight="1"/>

    </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_one_button"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:visibility="gone"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btn_middle"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@drawable/button_background"
                style="@style/ButtonStyle"
                android:text="@string/ok"/>

    </LinearLayout>
</LinearLayout>

In the above layout, I have designed two different custom alert dialog.

  1. Alert dialog with one button.
Alert dialog with one button

2.Alert dialog with two buttons.

Alert dialog with two buttons

Implement the click listener

create an interface for the click event.

public interface DialogActionListener{
        void onAction(View viewId);
}
public void setOnActionListener(DialogActionListener dialogActionListener){
    this.dialogActionListener = dialogActionListener;
}

Set the click listener for the views in MyAlertDialog class.

private void setClickListener(View... views){
        for (View view: views){
            view.setOnClickListener(mOnClickListener);
        }
}
private final View.OnClickListener mOnClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            dialogActionListener.onAction(v);
        }
};

Implement the click action in your MainActivity to get the action view.

myAlertDialog.setOnActionListener(new MyAlertDialog.DialogActionListener() {
                    @Override
                    public void onAction(View view) {

                        switch (view.getId()){
                            case R.id.btn_left:
                                Toast.makeText(getApplicationContext(),"left",Toast.LENGTH_SHORT).show();
                                break;
                            case R.id.btn_right:
                                Toast.makeText(getApplicationContext(),"right",Toast.LENGTH_SHORT).show();
                                break;
                        }
         }
});

Using Alert Dialog

As mentioned above, I have create two different alert dialog.

To enable single button alert dialog you need to set,

myAlertDialog.setMiddleButtonText("Okay");

Or you want to enable two-button alert dialog, you need to set,

myAlertDialog.setRightButtonText(getString(R.string.delete));
myAlertDialog.setLeftButtonText(getString(R.string.cencel));

To set the title for the alert dialog:

 myAlertDialog.setAlertTitle(getString(R.string.delete));

Note : If you don’t want to show the Title or the Title image you don’t need to set it.

To set the icon for the alert dialog:

myAlertDialog.setAlertIcon(getResources().getDrawable(R.drawable.ic_info_black_24dp));
Alert Dialog With Icon

put all the code together to show the alert dialog.

MyAlertDialog myAlertDialog = new MyAlertDialog(MainActivity.this);
                myAlertDialog.setAlertTitle(getString(R.string.delete));
                myAlertDialog.setAlertIcon(getResources().getDrawable(R.drawable.ic_info_black_24dp));
                myAlertDialog.setAlertDesciption(getResources().getString(R.string.desc));
                myAlertDialog.setMiddleButtonText(getString(R.string.ok));

                myAlertDialog.setOnActionListener(new MyAlertDialog.DialogActionListener() {
                    @Override
                    public void onAction(View view) {

                        switch (view.getId()){
                            case R.id.btn_middle:
                                Toast.makeText(getApplicationContext(),"middle",Toast.LENGTH_SHORT).show();
                                break;
                            case R.id.btn_left:
                                Toast.makeText(getApplicationContext(),"left",Toast.LENGTH_SHORT).show();
                                break;
                            case R.id.btn_right:
                                Toast.makeText(getApplicationContext(),"right",Toast.LENGTH_SHORT).show();
                                break;
                        }

                    }
                });
                myAlertDialog.show();

Styling The Alert Dialog

To give rich feeling to the alert dialog, I have added style to it.

simple create styles in your res/style.xml file.

style.xml

<style name="TextTitleStyle">
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">20sp</item>
        <item name="android:fontFamily">monospace</item>
        <item name="android:textAllCaps">true</item>
        <item name="android:textColor">@android:color/holo_red_dark</item>
    </style>

    <style name="TextDescStyle">
        <item name="android:textSize">15sp</item>
        <item name="android:fontFamily">monospace</item>
        <item name="android:textColor">@android:color/background_dark</item>
    </style>

    <style name="ButtonStyle" parent="TextTitleStyle">
        <item name="android:textSize">15sp</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

You can download this example in GITHUB.

Conclusion

Thanks for reading.

Please provide your feedback in comments. Share it if you like it.

Leave a Reply

Your email address will not be published. Required fields are marked *