How to Implement Loading AlertDialog in Android?
Last Updated :
03 Sep, 2021
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
}
});
}
}
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
Similar Reads
How to Implement Polling in Android?
Many times you may have seen on some apps like youtube, LinkedIn, etc. polling is done and users choose their options whatever they want to choose. Here we are going to implement polling in Android Studio. What we are going to build in this article? In this article, we will ask the user a question a
4 min read
How to Implement a Video Player Inside an AlertDialog in Android?
Mainly alert dialogues are used to display an important message to the user. It is possible to embed a video player inside it. This allows developers to create dynamic and interactive video-based dialogs that are useful in various use cases. In this article, we will explore the step-by-step process
3 min read
How to Customize AlertDialog Dimensions in Android?
AlertDialog in Android is a kind of pop-up message that alerts the user about the activity usages. This is specifically developed by a developer to perform any operations or ask for any permissions and not an Android OS call. Alert Dialog in general has no fixed dimension values and rather varies fr
3 min read
How to Add an Icon Inside an AlertDialog in Android?
In this article, we are going to see how to place an Icon inside an AlertDialog. The default AlertDialog provides a simple User interface, you can enhance the UI by adding an icon to the AlertDialog. By using the below code we can add an Icon inside an Alert Dialog // Find the ImageView and set the
3 min read
AlertDialog in Android using Jetpack Compose
AlertDialog shows the Alert message and gives the answer in the form of yes or no. Alert Dialog displays the message to warn you and then according to your response, the next step is processed. Android Alert Dialog is built with the use of three fields: Title, Message area, and Action Button.We have
3 min read
How to Change the Position of AlertDialog in Android?
AlertDialog in android is one of the UI widgets which immediately pops up to confirm the user interaction or to confirm the action which is done by the user. In most of the applications, the position of the alert dialog is in the center. In this article, it's been discussed how to change the positio
4 min read
How to Implement OnSavedInstanceState in Android?
In android, Preserving and restoring an activity's UI state in a timely fashion across system-initiated activity or application destruction is a crucial part of the user experience. In these cases the user expects the UI state to remain the same, but the system destroys the activity and any state st
4 min read
How to Implement Tooltip in Android Studio?
A tooltip is a message which appears when a cursor is positioned over an icon, image, hyperlink, or any other GUI component. In this application, we will be using an EditText to take the message from the user and then display that message as a tooltip over a view. Here is a sample video of the appli
4 min read
How to Implement Notification Counter in Android?
Notification Counter basically counts the notifications that you got through an application and shows on the top of your application icon so that you get to know you get new messages or any new update without opening your application or specific feature like the message button in Instagram. Notifica
7 min read
How to Implement TextWatcher in Android?
If an application contains a login form to be filled by the user, the login button should be disabled (meaning: it shouldn't be clickable). When the user enters the credentials of the form the button should be enabled to click for the user. So in this article, we are implementing a Text Watcher to t
3 min read