How to Implement Custom Dialog Maker in Android?

In this article, we are going to make an application of Custom Dialog Maker in android studio. In this application, we can create dialogs of our own choice of style, type, and animation.

What is a dialog?

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.

Goals/Purposes of a dialog:

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 that it is an error or not.
• To tell the user that his/her desired action has been succeeded.

What we are going to build in this article?

In this application, we will provide the user, the facility to choose which kind of dialog he wants i.e. he/she can select the type, style, and animation of the desired dialog box. Note that we are going to implement this application using Java language. A sample video is given below to get an idea about what we are going to do in this article.

Step by Step Implementation

Step 1: Creating a new project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• You can change the name of the project at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio? 

Step 2: Add dependency and JitPack Repository

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.   

implementation ‘com.github.gabriel-TheCode:AestheticDialogs:1.3.5’

Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.

allprojects {

 repositories {

   …

   maven { url “https://jitpack.io” }

     }

}

After adding this dependency sync your project and now we will move towards its implementation.  

Step 3: Working with the activity_main.xml file

Here we will design the user interface of our application. We will be using the following components for their respective works:

• TextView: to display a message to the user to select the type, style, or animation.
• Spinner: to open a dropdown list for users to select the type, style, or animation.
• Button: to show the dialog box.

Use the following code in the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<!-- linear layout as parent layout-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <!-- to display the message "Select dialog style-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Select Dialog style"
        android:textSize="16sp"
        android:textStyle="bold" />

    <!-- to allow user to select dialog style-->
    <Spinner
        android:id="@+id/sp_style"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!-- to display the message "Select dialog type"-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="Select Dialog Type"
        android:textSize="16sp"
        android:textStyle="bold" />

    <!-- to allow user to select dialog type-->
    <Spinner
        android:id="@+id/sp_type"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!-- to display the message "Select dialog animation"-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="Select Dialog Animation"
        android:textSize="16sp"
        android:textStyle="bold" />

    <!-- to allow the user to select dialog animation-->
    <Spinner
        android:id="@+id/sp_animation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!-- to perform the action  of Showing dialog box-->
    <Button
        android:id="@+id/bt_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Show Dialog" />

</LinearLayout>

After executing the above code design of the activity_main.xml file looks like this.

Step 4: 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 android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;

import androidx.appcompat.app.AppCompatActivity;

import com.thecode.aestheticdialogs.AestheticDialog;
import com.thecode.aestheticdialogs.DialogAnimation;
import com.thecode.aestheticdialogs.DialogStyle;
import com.thecode.aestheticdialogs.DialogType;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    // Initialize variables
    Spinner spStyle, spType, spAnimation;
    Button btShow;
    ArrayList<DialogStyle> styleList = new ArrayList<>();
    ArrayList<DialogType> typeList = new ArrayList<>();
    ArrayList<DialogAnimation> Animationlist = new ArrayList<>();
    DialogStyle dialogStyle;
    DialogAnimation dialogAnimation;
    DialogType dialogType;

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

        // assign variables
        spStyle = findViewById(R.id.sp_style);
        spType = findViewById(R.id.sp_type);
        spAnimation = findViewById(R.id.sp_animation);
        btShow = findViewById(R.id.bt_show);

        // add dialog styles to arraylist
        styleList.add(DialogStyle.FLASH);
        styleList.add(DialogStyle.CONNECTIFY);
        styleList.add(DialogStyle.TOASTER);
        styleList.add(DialogStyle.EMOJI);
        styleList.add(DialogStyle.EMOTION);
        styleList.add(DialogStyle.DRAKE);
        styleList.add(DialogStyle.RAINBOW);
        styleList.add(DialogStyle.FLAT);

        // set adapter to style spinner
        spStyle.setAdapter(new ArrayAdapter<>(this, android.R.layout.simple_spinner_dropdown_item, styleList));

        // add dialog types to arraylist
        typeList.add(DialogType.ERROR);
        typeList.add(DialogType.INFO);
        typeList.add(DialogType.WARNING);
        typeList.add(DialogType.SUCCESS);

        // set adapter to type spinner
        spType.setAdapter(new ArrayAdapter<>(this, android.R.layout.simple_spinner_dropdown_item, typeList));

        // add dialog animations to arraylist
        Animationlist.add(DialogAnimation.FADE);
        Animationlist.add(DialogAnimation.CARD);
        Animationlist.add(DialogAnimation.DEFAULT);
        Animationlist.add(DialogAnimation.DIAGONAL);
        Animationlist.add(DialogAnimation.IN_OUT);
        Animationlist.add(DialogAnimation.SHRINK);
        Animationlist.add(DialogAnimation.SLIDE_DOWN);
        Animationlist.add(DialogAnimation.SLIDE_LEFT);
        Animationlist.add(DialogAnimation.SLIDE_RIGHT);
        Animationlist.add(DialogAnimation.SLIDE_UP);
        Animationlist.add(DialogAnimation.SPIN);
        Animationlist.add(DialogAnimation.SPLIT);
        Animationlist.add(DialogAnimation.SWIPE_LEFT);
        Animationlist.add(DialogAnimation.SWIPE_RIGHT);
        Animationlist.add(DialogAnimation.WINDMILL);
        Animationlist.add(DialogAnimation.ZOOM);

        // set adapter to animation spinner
        spAnimation.setAdapter(new ArrayAdapter<>(this, android.R.layout.simple_spinner_dropdown_item, Animationlist));

        // to select style
        spStyle.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                // get selected style
                dialogStyle = styleList.get(i);
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });

        // to select type
        spType.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                // get selected style
                dialogType = typeList.get(i);
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });

        // to select animation
        spAnimation.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                // get selected style
                dialogAnimation = Animationlist.get(i);
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });

        // to show dialog as output
        btShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // initialize dialog
                AestheticDialog.Builder builder = new AestheticDialog.Builder(MainActivity.this, dialogStyle, dialogType);
                // set title
                builder.setTitle("Title");
                // set message
                builder.setMessage("Message");
                // set animation
                builder.setAnimation(dialogAnimation);
                // show dialog
                builder.show();
            }
        });
    }
}

Congratulations! we have successfully made the application of Custom Dialog maker in android studio. Here is the final output of our application.

Output: