Create a Circular Progress Bar in Android

For my current project, BreakFree, I needed a circular Progress bar, and not the spinning kind. A progress bar that behaves like the horizontal one, but is circular. 

A circular one would fit my layout a lot better. I did not find a straight answer on the internet  but I did manage to put one together, so I thought I'd write a TUT for it. In case anyone decides on creating such a Progress Bar.

This is what the final result should look like (Ignore the number in the center):

Lets start with the steps to recreate this view.

1) You will need to create a drawable which defines your progress bar. Here you will give it the shape of a ring. Adjust the inner radius and thickness of the ring as you wish. I have also added a gradient starting from red, moving to yellow and then ending in green. You can play around with these settings.

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:id="@android:id/progress">

    <shape

             android:innerRadiusRatio="3"

             android:shape="ring"

             android:thicknessRatio="7.0"
             android:useLevel="true">

  <gradient

             android:startColor="#fb0000"

             android:endColor="#00FF00"

             android:centerColor="#fbf400"

             android:type="sweep" />   

</shape>

</item>

</layer-list>

2) In your layout xml, create a horizontal Progress bar. And set the progressDrawable to the drawable file created in step 1 (in my case I have named the file in step 1 circular_progress_bar.xml.

<ProgressBar

        android:id="@+id/progressBarToday"

        style="?android:attr/progressBarStyleHorizontal"

        android:layout_width="250dp"

        android:layout_height="273dp"

        android:layout_centerInParent="true"  

        android:indeterminate="false"

        android:max="48"

        android:progress="45"

        android:progressDrawable="@drawable/circular_progress_bar" />

3) Most of our job is done. Now the only problem is that since this is a horizontal progress bar, it is aligned horizontally and not vertically. So basically the start and finish is to the right of the circle and not at the bottom. To counter this I used RotationAnimation to rotate the Progress Bar by 90 degrees. This will rotate the progress bar and the start and finish will be at the bottom of the circle making it look realistic. Since I have not specified a duration the animation will happen as soon as the view is created.

ProgressBar pb = (ProgressBar) view.findViewById(R.id.progressBarToday);

Animation an = new RotateAnimation(0.0f, 90.0f, 250f, 273f);

an.setFillAfter(true);

pb.startAnimation(an);

I hope this helps.

Until next time.

EDIT: Lollipop onwards Android has changed the default value for useLevel from "true" to "false". Hence you now need to add android:useLevel="true" in the shape tag in the drawable.