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"?>    <!--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
    <!-- 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    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:
Â
Â
