How to Create Dialog with Custom Layout in Android?

Last Updated : 21 Jun, 2022

In Android, A dialog is a small window that prompts the user to make a decision, provide some additional information, and inform the user about some particular task. The following are the main purposes or goals of a dialog

To warn the user about any activity.
To inform the user about any activity.
To tell the user whether it is an error or not.
To tell the user that his/her desired action has been succeeded.

So, in this article, we are going to learn how to create Custom Dialog in android Studio. In this project, we firstly design the layout which we want to show in our activity as a custom dialog after that we are going to integrate this layout into our java file. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/gfg_img"
        android:layout_marginTop="-150dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/dialogBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Dialog"
        android:layout_marginTop="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Create another layout XML file

Create another layout XML file that you want to show in your dialog. You can add any element to this layout.

XML

<?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="wrap_content"
    android:padding="10dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/success" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="392dp"
        android:layout_height="112dp"
        android:layout_marginTop="10dp"
        android:padding="10dp"
        android:layout_below="@id/imageView"
        android:text="Congratulations!! You have created custom dialog successfully"
        android:textAlignment="center"
        android:textSize="25sp"
        android:textStyle="bold"/>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textview"
        android:layout_margin="15dp"
        android:layout_centerHorizontal="true">

        <TextView
            android:id="@+id/okay_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="100dp"
            android:text="Okay"
            android:textStyle="bold"
            android:textColor="#3F51B5"
            android:textSize="30sp" />

        <TextView
            android:id="@+id/cancel_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginLeft="100dp"
            android:layout_toRightOf="@id/okay_text"
            android:text="Cancel"
            android:textStyle="bold"
            android:textColor="#FF0000"
            android:textSize="30sp" />

    </RelativeLayout>

</RelativeLayout>

Step 4: Modification in the theme.xml file

Add this code to your theme.xml file to create the opening and closing animation of Dialog.

XML

<style name="animation">
   <item name="android:windowEnterAnimation">@android:anim/fade_in</item>
   <item name="android:windowExitAnimation">@android:anim/fade_out</item>
</style>

Step 5: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import androidx.appcompat.app.AppCompatActivity;

import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    Button mDialogButton;
    TextView okay_text, cancel_text;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mDialogButton = findViewById(R.id.dialogBtn);
        Dialog dialog = new Dialog(MainActivity.this);

        mDialogButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                dialog.setContentView(R.layout.dialog_layout);
                dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                dialog.setCancelable(false);
                dialog.getWindow().getAttributes().windowAnimations = R.style.animation;

                okay_text = dialog.findViewById(R.id.okay_text);
                cancel_text = dialog.findViewById(R.id.cancel_text);

                okay_text.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        dialog.dismiss();
                        Toast.makeText(MainActivity.this, "okay clicked", Toast.LENGTH_SHORT).show();
                    }
                });

                cancel_text.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        dialog.dismiss();
                        Toast.makeText(MainActivity.this, "Cancel clicked", Toast.LENGTH_SHORT).show();
                    }
                });

                dialog.show();
              
            }
        });
    }
}