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:
