Custom Alert Dialog Using Interface

Here i am gonna explain how we can create own custom dialog instead of using simple inbuilt Alert Dialog.
I am also going to show you how to create our own interface for handling dialog buttons click event.
For that follow the below steps:

STEP : 1

Create MainActivity.java as Launcher Activity

package com.example.climbachiya.customalertdialog;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    CustomAlertDialog dialog = null;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }

    public void showSingleDoubleDialog(View view) {
        dialog = new CustomAlertDialog(this, "Loading");
        dialog.setOwnDialogClick(new DialogInterface() {
            @Override
            public void showWarningDialog(View view) {
                Toast.makeText(MainActivity.this, "Warning", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void showConfirmationDialog(String action) {
                if (action.equalsIgnoreCase(ConstantData.OK)) {
                    Toast.makeText(MainActivity.this, "OK", Toast.LENGTH_SHORT).show();
                    dialog.dismiss();
                } else if (action.equalsIgnoreCase(ConstantData.CANCEL)) {
                    Toast.makeText(MainActivity.this, "CANCEL", Toast.LENGTH_SHORT).show();
                    dialog.dismiss();
                }
            }
        });
        dialog.show();
    }
}

STEP : 2

Create activity_main.xml as MainActivity UI

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.climbachiya.customalertdialog.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="41dp"
        android:gravity="center"
        android:text="Custom Alert Dialog"
        android:textSize="18sp" />


    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="143dp"
        android:onClick="showSingleDoubleDialog"
        android:text="Dialog With Two Buttons" />
</RelativeLayout>

STEP : 3

Create a CustomAlertDialog.java for custom alert dialog class

package com.example.climbachiya.customalertdialog;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.view.View;
import android.widget.TextView;

public class CustomAlertDialog extends AlertDialog {

    DialogInterface onOwnDialog;
    TextView txtMessage;
    String message;
    TextView btnOK, btnCancel;
    Context mContext;

    protected CustomAlertDialog(Context context, String message) {
        super(context);
        this.mContext = context;
        this.message = message;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.custom_dialog_view);

        txtMessage = (TextView) findViewById(R.id.txt_message);
        btnOK = (TextView) findViewById(R.id.button_ok);
        btnCancel = (TextView) findViewById(R.id.button_cancel);

        setMessageText();

        btnOK.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onOwnDialog.showConfirmationDialog(ConstantData.OK);
            }
        });

        btnCancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onOwnDialog.showConfirmationDialog(ConstantData.CANCEL);
            }
        });

        setMessageText();
    }

    public void setMessageText() {
        txtMessage.setText(message);
    }

    public void setOwnDialogClick(DialogInterface myInterface) {
        this.onOwnDialog = myInterface;
    }
}

STEP : 4

Create a custom_dialog_view.xml as CustomAlertDialog UI

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout android:id="@+id/body"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="14dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp">
        <com.wang.avi.AVLoadingIndicatorView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="14dp"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            app:indicator_color="#FFE75764"
            />
        <TextView
            android:id="@+id/txt_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="This is the test text for 
             showing message to user once user will click on show custom dialog button" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_below="@+id/body"
        android:showDividers="middle">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="OK"
            android:id="@+id/button_ok"
            android:fontFamily="sans-serif-medium"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"
            android:layout_weight="1"
            android:gravity="center"
            android:background="#ecf0f1" />

        <View
            android:id="@+id/seperator"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#d13033"/>


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="CANCLE"
            android:fontFamily="sans-serif-medium"
            android:id="@+id/button_cancel"
            android:layout_weight="0.5"
            android:gravity="center"
            android:background="#ecf0f1" />
    </LinearLayout>

</RelativeLayout>

STEP : 5

Create a DialogInterface.java interface for handling dialog buttons click event

package com.example.climbachiya.customalertdialog;

import android.view.View;

public interface DialogInterface {

    void showConfirmationDialog(String action);
}

STEP : 6

Create a ConstantData.java class for storing constant values

public class ConstantData {

    final static String OK = "OK";
    final static String CANCEL = "CANCEL";
}

STEP : 7

Add dependencies in build.gradle(Module:app)

compile 'com.wang.avi:library:1.0.5'
compile 'com.nineoldandroids:library:2.4.0'

:: Final Output ::

Check out the full demo here : https://github.com/CDL24/CustomAlertDailog

Just download and import full android studio project.

And if you like my efforts please share the blog and hits like Happy Coding ;)