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

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>

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

styles.xml

<resources> ………..

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

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

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

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.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store