Skip to content
Related Articles

Related Articles

How to Create Circular Determinate ProgressBar in Android?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Hard
  • Last Updated : 24 Jun, 2021

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. 

Create Circular Determinate 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 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 version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="">
    <!--Adding our first 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"-->
            <solid android:color="#DDD" />
    <!--Adding our second item-->
        <!--Rotation degree of Ring is made from 270 to 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.-->
                    android:type="sweep" />



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.



<resources xmlns: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. -->
    <!--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>



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 version="1.0" encoding="utf-8"?>
    <!--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.-->
        tools:progress="60" />
        tools:text="60%" />
    <!--Increment button that will decrement the progress by 10%-->
        android:text="- 10%"
        app:layout_constraintTop_toBottomOf="@+id/progress_bar" />
    <!--Increment button that will increment the progress by 10%-->
        android:text="+ 10%"
        app:layout_constraintTop_toBottomOf="@+id/progress_bar" />



Step 6: Working with the file


Go to the 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.



import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
    private int progress = 0;
    Button buttonIncrement;
    Button buttonDecrement;
    ProgressBar progressBar;
    TextView textView;
    protected void onCreate(Bundle savedInstanceState) {
        buttonDecrement = (Button) findViewById(;
        buttonIncrement = (Button) findViewById(;
        progressBar = (ProgressBar) findViewById(;
        textView = (TextView) findViewById(;
        // when clicked on buttonIncrement progress in increased by 10%
        buttonIncrement.setOnClickListener(new View.OnClickListener() {
            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;
        // when clicked on buttonIncrement progress in decreased by 10%
        buttonDecrement.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                // If progress is greater than
                // 10% then only it can be decreased
                if (progress >= 10) {
                    progress -= 10;
    // updateProgressBar() method sets
    // the progress of ProgressBar in text
    private void updateProgressBar() {






My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!