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