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 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 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
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 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 } }); }} |
Output:
1. Home Activity
FIG = HOME SCREEN
2. onclick
FIG = LOADING DIALOG
3. After 4 Seconds
FIG = CLICK VECTOR ASSET
Output Video:
Project Link: Click Here
