How to Implement Loading AlertDialog in Android?

0 0 4 minutes read

AlertDialog is defined as the small window that shows a particular message to the user when the user performs or commits certain action. In this article, we are going to build a simple android application in which we learn how to implement a Loading AlertDialog that means whenever the user clicks on the submit button it shows a dialog with a loading ProgressBar and a message please wait and after a certain time it gets dismissed and shows a message done. A sample GIF 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

In this step, we are going to design our activity_main.xml. These are the following things that we will add to our activity_main.xml

An ImageView with the image of the GEEKSOFGEEKS symbol.
Two EditTexts one for username and one for the password field
A Button with the text SUBMIT.

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">
  
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="276dp"
        android:text="SUBMIT"
        android:textColor="#0f9d58"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.504"
        app:layout_constraintStart_toStartOf="parent" />
  
    <EditText
        android:id="@+id/editTextTextPersonName2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="52dp"
        android:ems="10"
        android:hint="Password"
        android:inputType="textPassword"
        android:text=""
        android:textAlignment="center"
        android:textColorHint="#0f9d58"
        android:textSize="20dp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPersonName3" />
  
    <EditText
        android:id="@+id/editTextTextPersonName3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="180dp"
        android:ems="10"
        android:hint="Username"
        android:inputType="textPersonName"
        android:text=""
        android:textAlignment="center"
        android:textColorHint="#0f9d58"
        android:textSize="20dp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="138dp"
        android:layout_height="123dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="40dp"
        app:layout_constraintBottom_toTopOf="@+id/editTextTextPersonName3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0"
        app:srcCompat="@drawable/gfg" />
      
</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Create a new layout file

In this step, we are going to create a new layout file for designing our dialog. Now create a new layout file to design the dialog that includes a loading ProgressBar and a text field with a text please wait. To create a new layout file please follow the following steps: Right-click on layout > new > Layout Resource file and name it loading and add the following code in it.

Below is the code for the loading.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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="50dp">
  
    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="80dp"
        android:layout_height="66dp"
        android:layout_marginBottom="24dp"
        app:layout_constraintBottom_toTopOf="@+id/message"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent" />
  
    <TextView
        android:id="@+id/message"
        android:layout_width="150dp"
        android:layout_height="56dp"
        android:text=" Please Wait "
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent" />
      
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Create a new java file

In the fourth step create a new java file named Dialog to implement alert dialog and methods like startloadingdialog and dismissdialog. startloadingdialog function that will have an AlertDialog and on calling startloadingdialog function an alert loading dialog will appear on the user screen that gets dismisses after 4 seconds. dismissdialog function with the help of dialog.dismiss method that will dismiss the dialog. Below is the code for the Dialog.java file:

Java

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.view.LayoutInflater;
  
public class dialog {
    // 2 objects activity and dialog
    private Activity activity;  
    private AlertDialog dialog;
  
    // constructor of dialog class 
    // with parameter activity
    dialog(Activity myActivity) {   
        activity = myActivity;
    }
  
    @SuppressLint("InflateParams")
    void startLoadingdialog() {
          
        // adding ALERT Dialog builder object and passing activity as parameter
        AlertDialog.Builder builder = new AlertDialog.Builder(activity);
  
        // layoutinflater object and use activity to get layout inflater
        LayoutInflater inflater = activity.getLayoutInflater(); 
        builder.setView(inflater.inflate(R.layout.loading, null));
        builder.setCancelable(true);
  
        dialog = builder.create();
        dialog.show();
    }
  
    // dismiss method
    void dismissdialog() {
        dialog.dismiss();
    }
      
}

Step 5: Create a vector asset icon

In this step, we are going to create a vector asset icon that we will use in the 6th step to design a layout that appears on the screen after dismiss dialog function gets executed or invoked. Create a new vector asset for click icon using the following steps: Right-click on drawable > new > vector asset and search for check > select and finish

fig = vector asset

XML

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#0F9D58"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z" />
</vector>

After changing color code to green:

FIG = VECTOR ASSET

Step 6: In this step, we are going to make a new activity that contains a vector asset click icon that we created in the previous step (step 5) and a TextView with text done this activity will be visible to the user after the dismissing of the dialog that happened in the interval of 4 seconds. Following is the xml code to implement vector asset click icon with the help of ImageView and a TextView with text done.

1. 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=".finished">
  
    <TextView
        android:id="@+id/textView3"
        android:layout_width="118dp"
        android:layout_height="44dp"
        android:layout_marginTop="24dp"
        android:text=" DONE "
        android:textAlignment="center"
        android:textSize="25dp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.477"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />
  
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="112dp"
        android:layout_height="86dp"
        android:layout_marginTop="220dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.468"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_baseline_check_circle_24" />
      
</androidx.constraintlayout.widget.ConstraintLayout>

2. Java file

No need to change anything in the java class of this activity

Java

import androidx.appcompat.app.AppCompatActivity;
  
import android.os.Bundle;
  
public class finished extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_finished);
    }
}

Step 7: Working with the MainActivity.java file

Now in the final step, we are going to add the onclick listener on our submit button in our MainActivity.java file.

Approach:

First, we will create an object of dialog class, and after finds the view of our submit button id we will implement set onclicklistener method on the submit button and invoke or implement the start loading function that we create in the dialog class and with the use of handler class we implement the time delay method for dismissdialog function and start new activity method using the intent that takes the user to finishedactivity after 4 seconds of delay time.

Java

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.Button;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
    Button login_btn;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        login_btn = findViewById(R.id.button);
  
        // creating object of Loadingdialog class and passing MainActivity as argument
        final dialog loadingdialog = new dialog(MainActivity.this);
  
        // onclicklistener implementation
        login_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
  
                // invoking startLoadingDialog method
                loadingdialog.startLoadingdialog();
  
                // using handler class to set time delay methods
                Handler handler = new Handler();
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        // after 4 seconds
                        loadingdialog.dismissdialog();
                        Intent i = new Intent(MainActivity.this, finished.class);
                        // starting finished activity
                        startActivity(i);
                    }
                }, 4000); // 4 seconds
            }
        });
    }
}