Android Circular Progress Bar Customization Tutorial

Tired of WaitingOkay 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.

Android Circular Progress Bar

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.

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, this is the main java file which is used to display the Android loader.

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:

Android Circular Progress Bar Customization

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.

About Mohit Gupt

An android enthusiast, and an iPhone user with a keen interest in development of innovative applications.

Leave a comment

Your email address will not be published. Required fields are marked *

4 thoughts on “Android Circular Progress Bar Customization Tutorial