Android Circular Progress Bar Customization Tutorial

Okay this is interesting while surfing the internet I found a great new git project by the name of HoloCircularProgressBar, by Pascal Welsch. This project is all about displaying a custom circular progress bar in Android. What I like about this project is that it has really smooth transitions, second we can control its progress. Unlike default ProgressBar widget in android, which keeps revolving on its own. Hence I thought of writing Android Circular Progress Bar Customization Tutorial which utilizes HoloCircularProgressBar project.

Till now I have been using a standard Android Circular Progress Bar, but now that I found this great library project, it has given me a great amount of ideas, on how can I improve the UI of my apps. Although this library is very much made for just displaying a circular progress bar. I thought of exploiting it a little bit by using it for a different purpose. In this tutorial I would show, how to use Android Circular Progress Bar for displaying progress of a task in steps. Further I would show how to customize this library and use it accordingly to your app’s theme. After we are done our Android Circular Progress Bar Customization would look something like this.

How to include a project as library?

Firstly to show this Android circular progress bar we need to download HoloCircularProgressBar project and use it as a library in our project. The steps for it are:

1. Goto this project page.
2. Locate a button with ZIP written on it and press it do download the project.
3. Now go to eclipse File->Import->Existing Android Code Into Workspace-> Point it to zip file.
4. Check only library folder and import.

Now to create a project with this library and show Android circular progress bar, follow these steps:

1. Create a new project.
2. Right click on it and select properties.
3. Select Android from the left panel.
4. Then in lower right library panel press add.
5. Select library (the one we just added).
6. And we are ready to start.

Custom Android Circular Progress Bar

Now that we have a project with our library included, we can move forward. I am going to show you how to make a custom Android circular progress bar with some steps. The reason I chose this HoloCircularProgressBar project for this purpose is because it has the functionality to move in reverse direction as well. Yes that’s true in circular ProgressBar, we can also animate in reverse direction. And according to me its really cool. To start lets have a look at the layout I used.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".CircularProgressBar">

    <de.passsy.holocircularprogressbar.HoloCircularProgressBar
        android:id="@+id/holoCircularProgressBar1"
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/truiton" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/holoCircularProgressBar1"
        android:layout_centerHorizontal="true"
        android:text="Step 2"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/holoCircularProgressBar1"
        android:text="Step 3"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/holoCircularProgressBar1"
        android:layout_centerHorizontal="true"
        android:text="Complete"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView3"
        android:layout_alignBottom="@+id/textView3"
        android:layout_toRightOf="@+id/holoCircularProgressBar1"
        android:text="Step 1"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

The main thing to be noticed in the layout above is de.passsy.holocircularprogressbar.HoloCircularProgressBar tag. This tag is used to show the custom Android circular progress bar. Rest all are the TextViews used to show the steps. Next lets have a look at the CircularProgressBar.java, this is the main java file which is used to display the Android loader.

package com.truiton.circularprogressbar;

import android.animation.Animator;
import android.animation.Animator.AnimatorListener;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.animation.ValueAnimator.AnimatorUpdateListener;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import de.passsy.holocircularprogressbar.HoloCircularProgressBar;

public class CircularProgressBar extends Activity {
 private float TruitonProgress;
 @Override
 protected void onCreate(final Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_home);

 TruitonProgress = 0.25f;

 final HoloCircularProgressBar progressBar = (HoloCircularProgressBar) findViewById(R.id.holoCircularProgressBar1);
 animate(TruitonProgress ,progressBar, new AnimatorListener() {

 @Override
 public void onAnimationCancel(final Animator animation) {
 }

 @Override
 public void onAnimationEnd(final Animator animation) {
 if(TruitonProgress<=1)
 animate(TruitonProgress ,progressBar, this);
 }

 @Override
 public void onAnimationRepeat(final Animator animation) {
 }

 @Override
 public void onAnimationStart(final Animator animation) {
 }
 });
 }

 /**
  * Animate.
  * 
  * @param progressPercentage
  *  Percentage of progress bar
  * 
  * @param progressBar
  *            The progress bar
  * @param listener
  *            The listener
  */
 private void animate(float progressPercentage, final HoloCircularProgressBar progressBar, final AnimatorListener listener) {
 final float progress = progressPercentage;
 Log.i("Progress", progress+"");
 final ObjectAnimator progressBarAnimator = ObjectAnimator.ofFloat(progressBar, "progress", progress);
 progressBarAnimator.setDuration(2000);

 progressBarAnimator.addListener(new AnimatorListener() {

 @Override
 public void onAnimationCancel(final Animator animation) {
 }

 @Override
 public void onAnimationEnd(final Animator animation) {
 progressBar.setProgress(progress);
 }

 @Override
 public void onAnimationRepeat(final Animator animation) {
 }

 @Override
 public void onAnimationStart(final Animator animation) {
 }
 });
 progressBarAnimator.addListener(listener);
 progressBarAnimator.reverse();
 progressBarAnimator.addUpdateListener(new AnimatorUpdateListener() {

 @Override
 public void onAnimationUpdate(final ValueAnimator animation) {
 progressBar.setProgress((Float) animation.getAnimatedValue());
 }
 });
 progressBar.setMarkerProgress(progress);
 progressBarAnimator.start();
 this.TruitonProgress = this.TruitonProgress + 0.25f;
 }

 @Override
 public boolean onCreateOptionsMenu(final Menu menu) {
 // Inflate the menu; this adds items to the action bar if it is present.
 getMenuInflater().inflate(R.menu.circular_progress_bar_sample, menu);
 return true;
 }

}

In the above class we are controlling Android circular progress bar by HoloCircularProgressBar class. Above, the main method is animate, this method is called with AnimatorListener, and the progress percentage as argument. In this method I am incrementing the percentage by 0.25, hence making four stopping points. Also to make the animation smooth I have used the setDuration method, which sets the duration for animation. Have a look at the screens below :

The interesting part here, in custom Android circular progress bar is that, it can also be animated in reverse direction. For e.g. if you pass a lower percentage than the current one, as an argument, the result would be a backward animation. Therefore this could also be used to display the progress steps or segmented progress.

Android Circular Progress Bar Customization

The good part about this HoloCircularProgressBar project is that, it is included as a library project. Meaning we can alter its original code and customize it according to our needs. I did a little customization, like changing the colors of the Android circular progress bar. Originally this library defines two styles named CircularProgressBar, and CircularProgressBarLight. In the images above I have used CircularProgressBarLight style. I tried customizing it, here’s the output:

If you also wish to customize it, you can do so by changing the styles.xml located in the res/values directory of HoloCircularProgressBar library project. Although this is a great library, but this too has a drawback, it only works for API 14 and above. Hence only use this library only if you are targeting your app for Android API 14+. If you like this tutorial, share it with your friends on Google+ and Facebook, also like our Facebook page for more updates.

Mohit Gupt

Born in New Delhi, India. A software engineer by profession, an android enthusiast and an evangelist. My motive here is to create a group of skilled developers, who can develop something new and good. Reason being programming is my passion, and also it feels good to make a device do something you want. In a very short span of time professionally I have worked with many tech firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, and whenever I get spare time I share my thoughts here at Truiton.