How to create Custom Alert Dialog in Android | Android Studio | Java

4 min readMar 24, 2021

How to create Custom Alert Dialog in Android | Android Studio | Java

In this blog, we are going to see how to create a custom alert dialog in android without any plugin.

Sometimes in your application, if you wanted to ask the user about deciding between yes or no in response to any particular action taken by the user, by remaining in the same activity and without changing the screen, you can use Alert Dialog.

Now, here we will create three different types of alert dialog.

Success Alert Dialog.
Warning Alert Dialog.
Error Alert Dialog.

Before going to create, let’s see what you’re going to see:

Let’s create these alert dialogs.

Step 1: create the drawable files.

here we will create the custom background for alert dialog and buttons.

dialog_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorWhite"/>
    <corners android:radius="10dp"/>
</shape>

success_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorSuccess"/>
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
</shape>

warning_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorWarning"/>
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
</shape>

error_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorError"/>
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
</shape>

button_success_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorSuccess"/>
    <corners android:radius="20dp"/>
</shape>

button_neutral_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorNeutral"/>
    <corners android:radius="20dp"/>
</shape>

button_warning_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorWarning"/>
    <corners android:radius="20dp"/>
</shape>

button_error_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorError"/>
    <corners android:radius="20dp"/>
</shape>

Step 2: design the custom dialog

now let’s create the three custom layouts for dialogs. Success, Warning, and Error.

layout_success_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layoutDialogContainer"
    android:layout_margin="20dp"
    android:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layoutDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/dialog_background"
        app:layout_constraintTop_toTopOf="parent">        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textTitle"
            android:background="@drawable/sucess_background"
            android:padding="10dp"
            android:textColor="@color/colorWhite"
            android:textSize="17sp"
            android:textStyle="bold"
            app:layout_constraintTop_toTopOf="parent"/>        <ImageView
            android:id="@+id/imageIcon"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginEnd="10dp"
            android:contentDescription="@string/app_name"
            app:layout_constraintBottom_toBottomOf="@id/textTitle"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/textTitle"
            app:tint="@color/colorWhite" />        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textMessage"
            android:layout_marginStart="20dp"
            android:layout_marginTop="18sp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="40dp"
            android:textColor="@color/colorTextPrimary"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textTitle"/>
    </androidx.constraintlayout.widget.ConstraintLayout>    <Button
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/buttonAction"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        android:background="@drawable/button_sucess_background"
        android:textColor="@color/colorWhite"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@id/layoutDialog"
        app:layout_constraintTop_toBottomOf="@id/layoutDialog"/></androidx.constraintlayout.widget.ConstraintLayout>

layout_warning_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layoutDialogContainer"
    android:layout_margin="20dp"
    android:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layoutDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/dialog_background"
        app:layout_constraintTop_toTopOf="parent">        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textTitle"
            android:background="@drawable/warning_background"
            android:padding="10dp"
            android:textColor="@color/colorWhite"
            android:textSize="17sp"
            android:textStyle="bold"
            app:layout_constraintTop_toTopOf="parent"/>        <ImageView
            android:id="@+id/imageIcon"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginEnd="10dp"
            android:contentDescription="@string/app_name"
            app:layout_constraintBottom_toBottomOf="@id/textTitle"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/textTitle"
            app:tint="@color/colorWhite" />        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textMessage"
            android:layout_marginStart="20dp"
            android:layout_marginTop="18sp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="40dp"
            android:textColor="@color/colorTextPrimary"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textTitle"/>
    </androidx.constraintlayout.widget.ConstraintLayout>    <Button
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:id="@+id/buttonNo"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/button_neutral_background"
        android:textColor="@color/colorWhite"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@id/layoutDialog"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/buttonYes"
        app:layout_constraintTop_toBottomOf="@id/layoutDialog"/>    <Button
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:id="@+id/buttonYes"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="40dp"
        android:background="@drawable/button_warning_background"
        android:textColor="@color/colorWhite"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@id/layoutDialog"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/buttonNo"
        app:layout_constraintTop_toBottomOf="@id/layoutDialog"/></androidx.constraintlayout.widget.ConstraintLayout>

layout_error_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layoutDialogContainer"
    android:layout_margin="20dp"
    android:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layoutDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/dialog_background"
        app:layout_constraintTop_toTopOf="parent">        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textTitle"
            android:background="@drawable/error_background"
            android:padding="10dp"
            android:textColor="@color/colorWhite"
            android:textSize="17sp"
            android:textStyle="bold"
            app:layout_constraintTop_toTopOf="parent"/>        <ImageView
            android:id="@+id/imageIcon"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginEnd="10dp"
            android:contentDescription="@string/app_name"
            app:layout_constraintBottom_toBottomOf="@id/textTitle"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/textTitle"
            app:tint="@color/colorWhite" />        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textMessage"
            android:layout_marginStart="20dp"
            android:layout_marginTop="18sp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="40dp"
            android:textColor="@color/colorTextPrimary"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textTitle"/>
    </androidx.constraintlayout.widget.ConstraintLayout>    <Button
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/buttonAction"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        android:background="@drawable/button_error_background"
        android:textColor="@color/colorWhite"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@id/layoutDialog"
        app:layout_constraintTop_toBottomOf="@id/layoutDialog"/></androidx.constraintlayout.widget.ConstraintLayout>

Step 3: main layout

now in the main XML file create three buttons to triggering the custom alert dialogs.

activity_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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal"
    tools:context=".CustomAlertDialog">    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/buttonSuccess"
        android:textSize="16sp"
        android:text="@string/success"
        tools:ignore="ButtonStyle"/>    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/buttonWarning"
        android:textSize="16sp"
        android:text="@string/warning"
        tools:ignore="ButtonStyle"/>    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/buttonError"
        android:textSize="16sp"
        android:text="@string/error"
        tools:ignore="ButtonStyle"/></LinearLayout>

Step 4: add functionality

now in the main java file add the click listener on the buttons and build the alert dialogs.

CustomAlertActivity.java

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;public class CustomAlertDialog extends AppCompatActivity {    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_alert_dialog);        findViewById(R.id.buttonSuccess).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showSuccessDialog();
            }
        });        findViewById(R.id.buttonWarning).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showWarningDialog();
            }
        });        findViewById(R.id.buttonError).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showErrorDialog();
            }
        });    }    private void showSuccessDialog(){
        AlertDialog.Builder builder = 
                new AlertDialog.Builder
                        (CustomAlertDialog.this, R.style.AlertDialogTheme);
        View view = LayoutInflater.from(CustomAlertDialog.this).inflate(
                R.layout.layout_success_dailog,
                (ConstraintLayout)findViewById(R.id.layoutDialogContainer)
        );
        builder.setView(view);
        ((TextView) view.findViewById(R.id.textTitle))
                .setText(getResources().getString(R.string.success_title));
        ((TextView) view.findViewById(R.id.textMessage))
                .setText(getResources().getString(R.string.dummy_text));
        ((Button) view.findViewById(R.id.buttonAction))
                .setText(getResources().getString(R.string.okay));
        ((ImageView) view.findViewById(R.id.imageIcon))
                .setImageResource(R.drawable.done);        final AlertDialog alertDialog = builder.create();        view.findViewById(R.id.buttonAction).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                alertDialog.dismiss();
                Toast.makeText(CustomAlertDialog.this,
                        "Success", Toast.LENGTH_SHORT).show();
            }
        });        if (alertDialog.getWindow() != null){
            alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));
        }
        alertDialog.show();    }    private void showWarningDialog(){
        AlertDialog.Builder builder = 
                new AlertDialog.Builder
                        (CustomAlertDialog.this, R.style.AlertDialogTheme);
        View view = LayoutInflater.from(CustomAlertDialog.this).inflate(
                R.layout.layout_warning_dailog,
                (ConstraintLayout)findViewById(R.id.layoutDialogContainer)
        );
        builder.setView(view);
        ((TextView) view.findViewById(R.id.textTitle))
                .setText(getResources().getString(R.string.warning_title));
        ((TextView) view.findViewById(R.id.textMessage))
                .setText(getResources().getString(R.string.dummy_text));
        ((Button) view.findViewById(R.id.buttonYes))
                .setText(getResources().getString(R.string.yes));
        ((Button) view.findViewById(R.id.buttonNo))
                .setText(getResources().getString(R.string.no));
        ((ImageView) view.findViewById(R.id.imageIcon))
                .setImageResource(R.drawable.warning);        final AlertDialog alertDialog = builder.create();        view.findViewById(R.id.buttonYes).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                alertDialog.dismiss();
                Toast.makeText(CustomAlertDialog.this,
                        "Yes", Toast.LENGTH_SHORT).show();
            }
        });        view.findViewById(R.id.buttonNo).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                alertDialog.dismiss();
                Toast.makeText(CustomAlertDialog.this,
                        "No", Toast.LENGTH_SHORT).show();
            }
        });        if (alertDialog.getWindow() != null){
            alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));
        }
        alertDialog.show();
    }    private void showErrorDialog(){
        AlertDialog.Builder builder = 
                new AlertDialog.Builder
                        (CustomAlertDialog.this, R.style.AlertDialogTheme);
        View view = LayoutInflater.from(CustomAlertDialog.this).inflate(
                R.layout.layout_error_dailog,
                (ConstraintLayout)findViewById(R.id.layoutDialogContainer)
        );
        builder.setView(view);
        ((TextView) view.findViewById(R.id.textTitle))
                .setText(getResources().getString(R.string.error_title));
        ((TextView) view.findViewById(R.id.textMessage))
                .setText(getResources().getString(R.string.dummy_text));
        ((Button) view.findViewById(R.id.buttonAction))
                .setText(getResources().getString(R.string.okay));
        ((ImageView) view.findViewById(R.id.imageIcon))
                .setImageResource(R.drawable.error);        final AlertDialog alertDialog = builder.create();        view.findViewById(R.id.buttonAction).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                alertDialog.dismiss();
                Toast.makeText(CustomAlertDialog.this,
                        "Error", Toast.LENGTH_SHORT).show();
            }
        });        if (alertDialog.getWindow() != null){
            alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));
        }
        alertDialog.show();
    }
}

How to create Custom Alert Dialog in Android | Android Studio | Java

Step 1: create the drawable files.

Step 2: design the custom dialog

Step 3: main layout

Step 4: add functionality

Output:

You can follow me on YouTube:

Also, visit my website for more content like this

Follow me on Instagram

Follow me on Facebook

Written by Golap Gunjan Barman

Responses (1)