How to Display Percentage on a ProgressBar in Android?

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:

1. Take input from the user for which, the percentage has to be calculated.
2. Take the total from the user.
3. 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.