Android Custom Progress Bar Using XML Drawables

Progress Indicator is very handy when you want to show some process running in background. Android provides verity of Views like Horizontal Progress Bar, Vertical Progress Bar,  Circular Progress Indicator, Progress Dialog.And may be few other things that I don’t know. Progress Bar are really easy to use so I decided to write a whole tutorial cause we will use Progress Bar in future very frequently.

So first of all why we need a custom Progress Indicator?? Answer is very simple to match our Application color scheme.

Android Provides very simple approach to customize your Progress Bar with Android XML Resources. In my previous tutorial I have explained how to use them, if you have not read them yet here is a link.

In this tutorial we will create a Custom Circular Progress Indicator, you can create a horizontal progress bar or a RADAR using the same code with few changes.

Before we start our tutorial we will need to know about  <layer-list> . A <layer- list> is a stack of drawables. You can put as many element you want in a stack but the last element will be the front most for any operation. Using <layer-list> we can overlap drawables. 

Before Material Design was introduced people like me used to achieve shadow using <layer-list>.

I think it will be enough overview let’s start our tutorial.

 

To set custom drawable use this property,

 

To define a style use this snippet,

 

This property is used for setting up max value for a Progress Bar,

 

This property will set current value to Progress Bar drawable,

 

 

Into your new project go-to res > drawable, right click and create new file progressbarstyleone.xml and write following,

 

Look for the comments in above code,

 

Now in your activity_main.xml write following code,

 

What we have done is create a new Progress Bar View in our layout and provided it a custom drawable.

Try to change it’s value dynamically with EditText inputs and Buttons.

Exercise : Create your Horizontal Progress Bar.

No need to change any thing in other files. Play with the values, run the code & see the changes.

Leave a Reply

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