Android Custom Dialog Example

In this post we will see an Android Custom Dialog Example. I hope you know about creating Dialogs in Android, and then you might be thinking that what if I can customized the dialog completely as per my need. Then the answer is “YES” you can customized it as you want, you can put whatever design or component you need in your Alert Dialog.

Enough talking right? Now let’s start our Android Custom Dialog Example.

Again the first thing is creating a new Android Studio project. You can implement the same in your existing project too.
I have created a project named Android Custom Dialog.
First come inside colors.xml and change the default colors to the following.

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

</resources>

Now below you can see the design of the Custom Dialog that I am going to create.

For the above design we have defined the colors, now we need the background of the OK button and the icon for the header.
For the button background just create a new drawable resource file named button_background.xml and put the following code.

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

<item>

<shape>

</shape>

</item>

</selector>

For the icon that is displaying in the header, create one more drawable file. I created ic_success.xml and put the following code inside.

<vector android:height="24dp" android:viewportHeight="512"

android:viewportWidth="512" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">

</vector>

You can also use any other icon if you want.
Now for our Custom Alert Dialog create a layout. I have created my_dialog.xml. Inside this file we will design our Android Custom Dialog.

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="80dp"

android:background="@color/colorPrimary">

<ImageView

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_centerInParent="true"

android:background="@drawable/ic_success" />

</RelativeLayout>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

android:padding="16dp">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Success"

android:textAlignment="center"

android:textAppearance="@style/TextAppearance.AppCompat.Headline" />

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu erat tincidunt lacus fermentum rutrum."

android:textAlignment="center"

android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

<Button

android:id="@+id/buttonOk"

android:layout_width="200dp"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="15dp"

android:background="@drawable/button_background"

android:text="Ok"

android:textColor="@color/colorPrimary" />

</LinearLayout>

The above layout code will generate the following design.

Now we need to display the above Custom Dialog Design as an Alert Dialog when a button is clicked.
For this come inside activity_main.xml and create a button inside the activity.

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

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

tools:context=".MainActivity">

<Button

android:id="@+id/buttonShowDialog"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:background="@color/colorPrimary"

android:padding="15dp"

android:text="Android Custom Dialog Example"

android:textAllCaps="false"

android:textColor="#ffffff" />

</RelativeLayout>

So your activity_main.xml will look as below.

Now the last task is to display our Custom Dialog when the button is clicked.
For displaying the dialog come inside MainActivity.java and write the following code.

package net.simplifiedcoding.androidcustomdialog;

import android.support.v7.app.AlertDialog;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//attaching click listener

findViewById(R.id.buttonShowDialog).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

//calling this method to show our android custom alert dialog

showCustomDialog();

}

});

}

private void showCustomDialog() {

//before inflating the custom alert dialog layout, we will get the current activity viewgroup

ViewGroup viewGroup = findViewById(android.R.id.content);

//then we will inflate the custom alert dialog xml that we created

View dialogView = LayoutInflater.from(this).inflate(R.layout.my_dialog, viewGroup, false);

//Now we need an AlertDialog.Builder object

AlertDialog.Builder builder = new AlertDialog.Builder(this);

//setting the view of the builder to our custom view that we already inflated

builder.setView(dialogView);

//finally creating the alert dialog and displaying it

AlertDialog alertDialog = builder.create();

alertDialog.show();

}

Now run the application and you will see your custom alert dialog on clicking the button.

Bingo! It is working absolutely fine. Let me know in comments if you are having any question regarding this Android Custom Dialog Example.

And if you found this post helpful, then please help me by sharing this post with your friends learning Android Application Development. Thank You 🙂

Android Custom Dialog Example – Making Custom AlertDialog

Android Custom Dialog Example

Expand Your Knowledge: Next Tutorial Picks

Android Interview Questions Blueprint: Your Ultimate Reference

Kotlin Ktor Android Client – Simplifying Android Networking

Android Proto DataStore Mastery with Kotlin

Building an Android QR Code Scanner with ML Kit: A Step-by-Step Guide

A Sample Post with Comments

Android WorkManager Tutorial – Performing Tasks in Background