Progress Bar are used as loading indicators in android applications. These are generally used when the application is loading the data from the server or database. There are different types of progress bars used within the android application as loading indicators. In this article, we will take a look at How to use the ProgressBar in android. A sample video is given below to get an idea about what we are going to do in this article. This Android article covered in both Java and Kotlin languages.
Types of Progress Bar:
- Horizontal Progress Bar (Determinate) - A linear progress indicator that moves from left to right. Suitable when the progress of a task can be measured (e.g., file download or data processing). Requires setting a maximum value and updating the progress accordingly.
- Circular Progress Bar (Indeterminate) - A spinning circular indicator used when the duration or progress of a task is unknown. Ideal for operations where you cannot predict the completion time (e.g., loading content from the network).
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Working with the activity_main.xml file
Navigate to app > res > layout > activity_main.xml and add the below code to it. Comments are added in the code to get to know in detail.
activity_main.xml:
XML
<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"
android:background="@color/white"
tools:context=".MainActivity">
<!--on below line we are creating
a text for our app-->
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:padding="10dp"
android:text="Progress Bar in Android"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/progressBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<!--on below line we are creating a progress bar-->
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="@+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<!--on below line we are creating a button-->
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="Show Progress Bar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/progressBar" />
</androidx.constraintlayout.widget.ConstraintLayout>
Design UI:
Step 3: Working with the MainActivity file
Navigate to app > java > your app's package name > MainActivity file and add the code below. Comments are added in the code to get to know in detail.
MainActivity File:
Java
package org.geeksforgeeks.demo;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private Button showProgressBtn;
private ProgressBar loadingPB;
private boolean isProgressVisible = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initializing the variables
showProgressBtn = findViewById(R.id.button);
loadingPB = findViewById(R.id.progressBar);
// Click listener for the button
showProgressBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (isProgressVisible) {
// Hide progress bar and update button text
showProgressBtn.setText("Show Progress Bar");
loadingPB.setVisibility(View.GONE);
isProgressVisible = false;
} else {
// Show progress bar and update button text
showProgressBtn.setText("Hide Progress Bar");
loadingPB.setVisibility(View.VISIBLE);
isProgressVisible = true;
}
}
});
}
}
package org.geeksforgeeks.demo
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.ProgressBar
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
private lateinit var showProgressBtn: Button
private lateinit var loadingPB: ProgressBar
private var isProgressVisible = false
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// initializing our variables.
showProgressBtn = findViewById(R.id.button)
loadingPB = findViewById(R.id.progressBar)
// click listener for button
showProgressBtn.setOnClickListener {
// checking if progress bar is already visible.
if (isProgressVisible) {
// if it is visible, update text of button
showProgressBtn.text = "Show Progress Bar"
// update visibility
loadingPB.visibility = View.GONE
// update isProgress visible to "false"
isProgressVisible = false
} else {
// this condition will be called
// if progress bar visibility is gone
isProgressVisible = true
// update text of button.
showProgressBtn.text = "Hide Progress Bar"
// update visibility of progress bar.
loadingPB.visibility = View.VISIBLE
}
}
}
}
Output: