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

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.

  1. Success Alert Dialog.
  2. Warning Alert Dialog.
  3. 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();
}
}

Output:

You can follow me on YouTube:

Golap Barman

Also, visit my website for more content like this

www.gbandroidblogs.com

Follow me on Instagram

Android App Developer

Follow me on Facebook

GBAndroidBlogs

Hi everyone, myself Golap an Android app developer with UI/UX designer.