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 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"?> <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.
