Android's progress bars

  • Written by  Clive

How to customise your Progress Bars

Android ProgressBar tutorial icon

Progress bars let the user know that the device is busy, for example, downloading a file. It can also show roughly how much longer the download will take.

Progress bars don’t always look the same on all devices.

We’ll show you how to customise your progress bars so that they look the same on all devices

Our Tutorial app

Our tutorial app displays four progress bars. We’ll use them to show you how to customise a progress bar.

Pressing the button simulates downloading a file and advances the progress indicator of the top and middle progress bars.

Here’s a screenshot:

Android ProgressBar tutorial screenshot

There are three horizontal progress bars and one indeterminate progress bar

The layout: Defining the Progress Bars

The first horizontal ProgressBar

Android ProgressBar tutorial screenshot horizontal ProgressBar

The look of the ProgressBar depends on the Theme, Style and the progressDrawable attribute

Looking at the above image, the progress bars are numbered 1, 2 and 3 from the top down.

  • All three bars were created using the code below
  • Bars 1 and 2 are displayed on a Jelly Bean device while bar 3 is displayed on a Froyo device
  • this line: android:progressDrawable="@android:drawable/progress_horizontal"
    • causes the Jelly Bean device’s bar to display as 2 above. Without it, the bar displays as 1 above
    • has no effect on how the Froyo device displays the bar

Android ProgressBar tutorial horizontal ProgressBar 1

We define the first horizontal ProgressBar in the res/layout/main.xml layout file

Note the following:

  • style -  indicates that we want to use a horizontal ProgressBar and not the spinning wheel ProgressBar
  • width and height – the device’s theme determines the default width and height which you may or may not be able to override (See above). You can, however, control these by customising the ProgressBar as we will see later
  • progress – the length of the progress indicator bar. We set the progress bar’s progress to zero
  • secondaryProgress – we also set this to zero. Secondary progress is an intermediary progress. A common example would be the buffer indicator displayed while streaming Youtube videos

The second horizontal ProgressBar

Let’s look at what happens when we use our own drawable for the progressDrawable attribute.

Have a look at the middle horizontal ProgressBar in the image below. The top half of the image shows the ProgressBar displayed on a Jelly Bean device. The bottom half shows it displayed on a Froyo device.

The colour are more or less the same but there is a difference in size.

Android ProgressBar tutorial screenshot ProgressBar

Our progress bars: The middle horizontal ProgressBar displays a progress of 50. The maximum progress is set to 100

Here’s the code for the middle ProgressBar:

Android ProgressBar tutorial ProgressBar 2

Our second horizontal ProgressBar: We use our own custom progressDrawable drawable which gives us some control over the look of the ProgressBar

Note the following:

  • style -  indicates that we want to use a horizontal progress bar and not the spinning wheel progress bar
  • width and height – we set the width and height of the progress bar
  • max – the maximum value for the progress bar indicator
  • progress – we set the progress to 10
  • progressDrawable – the drawable that we’ll use for the progress mode. This specifies the shape and color of the background, the progress bar indicator and the secondary progress bar indicator
  • secondaryProgress – we set the value of the secondary progress to 30

Our customised drawable: custom_progress_bar_horizontal

We define our custom drawable in the res/drawable/custom_progress_bar_horizontal.xml file. It’s defined with a <layer-list> element as the root element. This contains three drawable items, each containing a <shape> element describing the drawable:

  • the background drawable - used for the background of the progress bar
  • secondary progress drawable - used for the secondary progress
  • progress drawable - used for the progress

This is what the progress <item> looks like:

Android ProgressBar tutorial custom drawable progressDrawable

The progress drawable is defined as a <layer-list> item and contains a description of the shape and color of the progress indicator bar. The secondary progress indicator and the background shapes and colours are defined as separate <items>

The third horizontal ProgressBar

Let’s look at what happens when we use our own custom style for the ProgressBar.

Have a look at the bottom horizontal ProgressBar in the image below. The top half of the image shows the ProgressBar displayed on a Jelly Bean device. The bottom half shows it displayed on a Froyo device.

The bottom ProgressBar is almost identical when displayed on the different devices.

 

Android ProgressBar tutorial screenshot ProgressBar

The bottom horizontal ProgressBar, using our custom style, displays almost identically on both Jelly Bean and Froyo devices

Have a look at the code below to see how we achieved this.

Android ProgressBar tutorial ProgressBar bar 3

We use our custom style to define the look of the ProgressBar

Note the following:

  • style – determines the look of the ProgressBar. We use our custom style. See below
  • width and height – we set the width and height (see the maximums set in our custom style)
  • max - the maximum value for the progress indicator. We set it at 100
  • progress – we set the progress to 25
  • secondaryProgress - we set the value of the secondary progress to 45

Our custom style: The CustomProgressBar style

Our CustomProgressBar style is defined in the res/values/styles.xml file:

Android ProgressBar tutorial ProgressBar custom style

We define our custom ProgressBar style in an XML resource file

Note the following:

  • name – the name of our custom style
  • parent – we inherit style properties from the horizontal progress bar widget’s style. We can then add or override it’s attributes
  • indeterminateOnly – we are not restricting this style to the indeterminate mode as we want to use it with the horizontal ProgressBar
  • progressDrawable – the drawable that we’ll use for the progress mode. We’re using the same custom_progress_bar_horizontal drawable as we did for the second ProgressBar. See the discussion above
  • minHeight – the minimum height for the progress bar
  • maxHeight – the maximum height for the progress bar

The forth ProgressBar: The spinning wheel

Let’s look at the indeterminate ProgressBar.

Looking at the image below, our customised indeterminate ProgressBar (top) replaces the default wheel (bottom):

Android ProgressBar tutorial ProgressBar custom indeterminate ProgressBar drawable

Our image replaces the default wheel in our customised indeterminate ProgressBar

Here’s the code:

Android ProgressBar tutorial ProgressBar indeterminate ProgressBar drawable

We use our own drawable resource to customise the indeterminate ProgressBar

Note the following:

  • width and height – we set the width and height of the progress bar
  • indeterminateDrawable – this is our drawable that replaces the default spinning wheel. It refers to a drawable which we define in the res/drawable/my_wheel.xml file

Our customised drawable for the spinning wheel:  my_wheel drawable

Android ProgressBar tutorial ProgressBar indeterminate ProgressBar custom drawable

Our customised drawable that we use to replace the default spinning wheel in the indeterminate ProgressBar

Note the following:

  • animated-rotate – rotates the image
  • drawable – the drawable we use to display in the progress bar
  • pivotX – the x co-ordinate for the centre-point of the image
  • pivotY - the y co-ordinate for the centre-point of the image

Why not have a look at our SeekBar tutorial?

I hope that you have found this tutorial helpful.

This project was created using Android Studio.

You can download the project files here Download icon

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.