How to create Custom AlertDialog in Android

In this tutorial, we’re going to see how to create a custom AlertDialog in android. But before that, if you’re not familiar with what is AlertDialog, then go through my previous tutorial AlertDialog with an example.

Steps to create custom AlertDialog

1. Add the required colors for the custom AlertDialog in the colors.xml

colors.xml

<resources>
<color name=”colorPrimary”>#6200EE</color>
<color name=”colorPrimaryDark”>#3700B3</color>
<color name=”colorAccent”>#03DAC5</color>
<color name=”colorWhite”>#FFFFFF</color>
<color name=”colorSuccess”>#4BB543</color>
<color name=”colorWarning”>#FFCC00</color>
<color name=”colorNeutral”>#434343</color>
<color name=”colorError”>#CC0000</color>
<color name=”colorTextPrimary”>#212121</color>
</resources>

2. Here, in custom AlertDialog, we used several drawable files for my custom alert dialog. Below are the drawable files for our custom alert dialog. (res > drawable > drawable_file.xml) replace the drawable_file name with the below drawable file name.

dialog_background.xml

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorWhite"/>
<corners android:radius="10dp"/>
</shape>

Output of the above code:

dialog background

success_background.xml

<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>

Output of the above code:

success background

warning_background.xml

<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>

Output of the above code:

warning background

error_background.xml

<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>

Output of the above code:

Error Background

button_success_background.xml

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorSuccess"/>
<corners android:radius="20dp"/>
</shape>

Output of the above code:

Success Button

button_warning_background.xml

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorWarning"/>
<corners android:radius="20dp"/>
</shape>

Output of the above code:

Warning Button

button_error_background.xml

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorError"/>
<corners android:radius="20dp"/>
</shape>

Output of the above code:

Error Button

button_neutral_background.xml

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorNeutral"/>
<corners android:radius="20dp"/>
</shape>

Output of the above code:

Neutral Button

3. Here I used a simple animation for the custom dialog by using these 3 simple codes in the styles.xml file.

styles.xml

<resources> ………..

<style name=”AlertDialogTheme” parent=”Theme.AppCompat.Light.Dialog.Alert”> <item name=”android:windowAnimationStyle”>@android:style/Animation.Dialog</item> </style>
</resources>

4. Now create the custom alert dialog layout. For that create the custom layout inside the layout folder of the res directory (res > layout > layout_name.xml). Replace the layout_name with the below layout file name.

layout_success_dialog.xml

<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>

Output of the above code:

Success Layout

layout_warning_dialog.xml

<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>

Output of the above code:

Warning Layout

layout_error_dialog.xml

<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>

Output of the above code:

Error Layout

5. Now create the main file, where we called these three alert dialogs with the help of three buttons.

Create these buttons in the main layout file.

activity_custom_alert_dialog.xml

<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>

Output of the above code:

Main Layout

6. Set onClickListener in these three buttons, where the alert dialogs will be displayed. In the main activity file add these lines of codes.

CustomAlertDialog.java

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

Custom AlertDialog

Visit www.gbandroidblogs.com for more..

Follow me here for more content like this.

I hope you like it, if you will find any problem to implement it then comment down below. I will help you.

Thank you for your time!

Happy Coding!!