How to Display Percentage on a ProgressBar in Android?
Last Updated :
28 Apr, 2025
Android ProgressBar is a visual representation or graphical view, that is used to indicate the progress of an operation or task. Android progress bar can be used to show any numeric value. There are many types of progress bars:
- Spinning Wheel ProgressBar
- Horizontal ProgressBar
In the given article we will implement percentage on the Android ProgressBar. A sample image is given below to get an idea about what we are going to do in this article.
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. Note that select Java as the programming language.
Step 2: Working with the activity_main.xml file
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"?>
<LinearLayout
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:orientation="vertical"
android:gravity="center_horizontal"
tools:context=".MainActivity">
<androidx.cardview.widget.CardView
android:layout_width="300dp"
android:layout_height="400dp"
android:backgroundTint="#ECFAF5"
app:cardElevation="2dp"
android:layout_marginTop="40dp"
app:cardCornerRadius="25dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Progress Bar"
android:textSize="30sp"
android:textStyle="bold"
android:textColor="@color/black"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp" />
<TextView
android:id="@+id/txtper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0%"
android:textStyle="bold"
android:layout_gravity="center_horizontal"
android:layout_marginTop="240dp"
android:textSize="16dp"/>
<ProgressBar
android:id="@+id/Prog"
android:layout_marginTop="140dp"
android:layout_width="230dp"
android:layout_height="230dp"
android:indeterminateOnly="false"
tools:progress="1"
android:layout_gravity="center_horizontal"
android:layout_marginRight="10dp"
android:progressDrawable="@drawable/circle"
android:progress="75">
</ProgressBar>
</androidx.cardview.widget.CardView>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/edtNumb"
android:textColorHint="#A5A5A5"
android:hint="Enter Number:"
android:textSize="15sp"
android:inputType="number"
android:layout_marginTop="20dp"
android:maxLength="2"
android:maxLines="1"
android:padding="10dp"
android:background="@color/white" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/edtTotal"
android:textColorHint="#A5A5A5"
android:inputType="number"
android:maxLength="2"
android:textSize="15sp"
android:hint="Enter total:"
android:maxLines="1"
android:padding="10dp"
android:background="@color/white" />
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/btnCal"
android:layout_width="300dp"
android:layout_height="49dp"
android:layout_marginTop="35dp"
android:backgroundTint="#258344"
android:inputType="textCapSentences"
android:elevation="10dp"
android:padding="10dp"
android:text="Calculate"
android:shadowColor="#7061D7"
android:textColor="@color/white"
android:textSize="17sp"
android:textStyle="bold" />
</LinearLayout>
Output UI:
activity_main
Step 3: Find the drawable in your res folder
In drawable create a drawable resource file as, circle.xml. And write the below code in it.
XML
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="ring"
android:thicknessRatio="16"
android:useLevel="false">
<solid android:color="#DDD"/>
</shape>
</item>
<item>
<shape
android:shape="ring"
android:thicknessRatio="16"
android:useLevel="true">
<solid android:color="#268E50"/>
</shape>
</item>
</layer-list>
Output UI:
This is the basic layout of progress Bar.
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.
The steps to find the percentage:
- Take input from the user for which, the percentage has to be calculated.
- Take the total from the user.
- Display the output.
Java
package com.shruti.gfgprogress;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
EditText edtTotal;
EditText edtNumb;
Button btnCal;
TextView txtper;
ProgressBar Prog;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
edtTotal = findViewById(R.id.edtTotal);
edtNumb = findViewById(R.id.edtNumb);
btnCal = findViewById(R.id.btnCal);
txtper = findViewById(R.id.txtper);
Prog = findViewById(R.id.Prog);
btnCal.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
float At = Integer.parseInt(edtNumb.getText().toString());
float Tl = Integer.parseInt(edtTotal.getText().toString());
float percen = (At/Tl)*100;
txtper.setText(String.valueOf(String.format("%.2f", percen)+"%"));
Prog.setProgress((int) percen);
}
});
}
}
Output:
Emulator preview
Some Points To Remember:
- Use the same names in MainActivity, that you have used in the xml file.
- It is better to use up to 2 decimal values.
- Try to add some color that you have used as your base color. For a better UI experience.
Similar Reads
How to Display Webpage Loading Progress Percentage in Android? In Android, a WebView is used to display a web page. Additionally, web clients are used to connect to a webpage and loading it. While the webpage loads, no real-time information about loading status is provided by the WebView. However, we can fetch the loading progress and display this information.
3 min read
How to Implement Circular ProgressBar in Android? ProgressBar is used when we are fetching some data from another source and it takes time, so for the user's satisfaction, we generally display the progress of the task. In this article, we are going to learn how to implement the circular progress bar in an Android application using Java. So, this ar
5 min read
How to Display Progress in ProgressBar While Loading URL in WebView in Android? ProgressBar in Android is a UI element that displays the status of some work being done in the background in the form of some animation. It can be anything, like computing, loading, searching, fetching, downloading, etc. ProgressBar broadly has two types namely spinning wheel and horizontal bar. Sp
2 min read
How to Make SpinKit Progress Bar in Android? In this article Custom Progress Bar in Android, we have discussed some good And captivating Progress Bar that is used in many Google Apps. In this article, we are going to add some more Custom Progress Bar For Android using the Android-SpinKit library. In simpler terms, Progress Bar is a visual repr
4 min read
How to Change the ProgressBar Color in Android? In this article, we will see how we can add color to a ProgressBar in android. Android ProgressBar is a user interface control that indicates the progress of an operation. For example, downloading a file, uploading a file on the internet we can see the ProgressBar estimate the time remaining in oper
3 min read
ProgressBar in Android using Jetpack Compose ProgressBar is a material UI component in Android which is used to indicate the progress of any process such as for showing any downloading procedure, as a placeholder screen, and many more. In this article, we will take a look at the implementation of ProressBar in Android using Jetpack Compose.Att
3 min read