Skip to content
Related Articles

Related Articles

How to Implement Circular ProgressBar in Android?
  • Difficulty Level : Medium
  • Last Updated : 06 Apr, 2021

ProgressBar is used when we are fetching some data from another source and it takes time, so for user’s satisfaction, we generally display them 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 article will give you a complete idea of implementing a circular progress bar in an application built in Android Studio. So, without wasting further time let’s go to the article and read how we can achieve this task.

What we are going to develop in this article?  

We will be building a simple application in which we will be implementing a circular progress bar with a text display. A sample video 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.  

 Implement Circular ProgressBar in Android Sample GIF

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: Create circular_progress_bar.xml

Navigate to the app > res > drawable > right-click and select new > drawable resource file and name the new XML file as circular_progress_bar.xml and refer to the following code. Comments are added inside the code to understand the code in more detail.

XML




<?xml version="1.0" encoding="utf-8"?>
<rotate 
    android:fromDegrees="270"
    android:toDegrees="270">
      
    <!--styling the progress bar-->
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="8dp"
        android:useLevel="true">
        <gradient
            android:angle="0"
            android:endColor="@color/colorPrimary"
            android:startColor="#000000"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
  
</rotate>

Step 3: Create circular_shape.xml

Similarly, create a new drawable resource file and name the file as circular_shape.xml and refer to the following code.

XML




<?xml version="1.0" encoding="utf-8"?>
<shape 
    android:innerRadiusRatio="2.5"
    android:shape="ring"
    android:thickness="3dp"
    android:useLevel="false">
    <solid android:color="@color/colorPrimary" />
</shape>

Step 4: Working with the activity_main.xml file

Now it’s time to design the layout of the application. So for that, navigate to the app > res > layout > activity_main.xml and refer to the code written below. 



XML




<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <RelativeLayout
        android:id="@+id/progress_layout"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_margin="100dp">
          
        <!--progress bar implementation-->
        <ProgressBar
            android:id="@+id/progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/circular_shape"
            android:indeterminate="false"
            android:progressDrawable="@drawable/circular_progress_bar"
            android:textAlignment="center" />
          
        <!--Text implementation in center of the progress bar-->
        <TextView
            android:id="@+id/progress_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:text="---"
            android:textColor="@color/colorPrimary"
            android:textSize="28sp"
            android:textStyle="bold" />
    </RelativeLayout>
      
</LinearLayout>

Step 5: Working with the MainActivity.java file

Go to the app > java > package name > MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java




import android.os.Bundle;
import android.os.Handler;
import android.widget.ProgressBar;
import android.widget.TextView;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    private ProgressBar progressBar;
    private TextView progressText;
    int i = 0;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // set the id for the progressbar and progress text
        progressBar = findViewById(R.id.progress_bar);
        progressText = findViewById(R.id.progress_text);
  
        final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                // set the limitations for the numeric
                // text under the progress bar
                if (i <= 100) {
                    progressText.setText("" + i);
                    progressBar.setProgress(i);
                    i++;
                    handler.postDelayed(this, 200);
                } else {
                    handler.removeCallbacks(this);
                }
            }
        }, 200);
    }
}

That’s all, now the application is ready to install on the device. Here is what the output of the application looks like.

Output:

GitHub Link:

The project is available on GitHub, you can access it by following the link below: Circular Progress Bar in Android Application

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :