How to Create Circular Determinate ProgressBar in Android?

In this article, we are going to demonstrate how to create a circular progress bar in Android Studio that displays the current progress value and has a gray background color initially. Here progress is shown in the center of the Bar. A sample GIF 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. 

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 you have to select Java as the programming language.

Step 2: Create a New Drawable Resource File

Create a new Drawable Resource File with the name circle.xml in the drawable folder. To create a new Drawable Resource File navigate to res > drawable and follow the images 

given below:

Click on Drawable Resource File, a new dialog box opens as shown in the below image. Add file name and choose Root element as layer-list and click OK. 

Step 3: Working with the circle.xml file

Navigate to res > drawable > circle.xml and add the code given below to that file. In this file, we will be drawing a circle that shows progress. Comments have been added to the code for better understanding.

XML

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Adding our first item-->
    <item>
        <!--Here ring shape is created. The important attribute
         used here is, android:useLevel="false". Attribute
         with the useLevel=true makes the ring disabled, so it must
         be false for the ring to appear with color code "#DDD"-->
        <shape
            android:shape="ring"
            android:thicknessRatio="16"
            android:useLevel="false">
            <solid android:color="#DDD" />
        </shape>
    </item>
    <!--Adding our second item-->
    <item>
        <!--Rotation degree of Ring is made from 270 to 270-->
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270">
            <!--The main attribute used here is android:useLevel="true" in
             shape tag. Also gradient is added to set the startColor and
             endColor of the ring.-->
            <shape
                android:shape="ring"
                android:thicknessRatio="16"
                android:useLevel="true">
                <gradient
                    android:endColor="@color/teal_700"
                    android:startColor="@color/black"
                    android:type="sweep" />

            </shape>
        </rotate>
    </item>
</layer-list>

Step 4: Adding style to the ProgressBar

Navigate to res > layout > theme.xml and add the code given below to that file. We have added a new style in this file. Comments have been added properly for clear understanding.

XML

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ProgressBar" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>


    <!--Here, android: indeterminateDrawable sets the picture displayed in
        the animation or the xml file of this animation and android: indeterminateOnly
           This property is set to true,the progress bar will be ignored Progress and present
           an infinite loop of animation
    -->
    <style name="CircularDeterminateProgressBar">
              <item name="android:indeterminateOnly">false </item>
        <item name="android:progressDrawable">@drawable/circle</item>
    </style>

</resources>

Step 5: Working with the activity_main.xml file

Go to res > layout > activity_main.xml and add the code given below to that file. Here we have added a ProgressBar that shows the progress and a TextView is added to display the percentage of progress. Two Buttons also have been added to increase or decrease the progress. Required comments have been added to the code.

XML

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <!--Add ProgressBar. Main Attribute used here are
        style="@style/CircularDeterminateProgressBar" that
        takes style as created in theme.xml file above and
         android:progressDrawable="@drawable/circle" that has been
        created in circle.xml file above.-->
    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/CircularDeterminateProgressBar"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:indeterminateOnly="false"
        android:progress="60"
        android:progressDrawable="@drawable/circle"
        android:rotation="-90"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:progress="60" />

    <TextView
        android:id="@+id/text_view_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toBottomOf="@+id/progress_bar"
        app:layout_constraintEnd_toEndOf="@+id/progress_bar"
        app:layout_constraintStart_toStartOf="@+id/progress_bar"
        app:layout_constraintTop_toTopOf="@+id/progress_bar"
        tools:text="60%" />

    <!--Increment button that will decrement the progress by 10%-->
    <Button
        android:id="@+id/button_decr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="- 10%"
        app:layout_constraintStart_toStartOf="@+id/progress_bar"
        app:layout_constraintTop_toBottomOf="@+id/progress_bar" />

    <!--Increment button that will increment the progress by 10%-->
    <Button
        android:id="@+id/button_incr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="+ 10%"
        app:layout_constraintEnd_toEndOf="@+id/progress_bar"
        app:layout_constraintTop_toBottomOf="@+id/progress_bar" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 6: Working with the MainActivity.java file

Go to the MainActivity.java file and add the code given below to that file. ProgressBar property is implemented here. Comments have been added to the code for quick and clear understanding.

Java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private int progress = 0;
    Button buttonIncrement;
    Button buttonDecrement;
    ProgressBar progressBar;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        buttonDecrement = (Button) findViewById(R.id.button_decr);
        buttonIncrement = (Button) findViewById(R.id.button_incr);
        progressBar = (ProgressBar) findViewById(R.id.progress_bar);
        textView = (TextView) findViewById(R.id.text_view_progress);

        // when clicked on buttonIncrement progress is increased by 10%
        buttonIncrement.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // if progress is less than or equal
                // to 90% then only it can be increased
                if (progress <= 90) {
                    progress += 10;
                    updateProgressBar();
                }
            }
        });

        // when clicked on buttonIncrement progress is decreased by 10%
        buttonDecrement.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // If progress is greater than
                // 10% then only it can be decreased
                if (progress >= 10) {
                    progress -= 10;
                    updateProgressBar();
                }
            }
        });
    }

    // updateProgressBar() method sets
    // the progress of ProgressBar in text
    private void updateProgressBar() {
        progressBar.setProgress(progress);
        textView.setText(String.valueOf(progress));
    }
}

Output: