Custom indeterminate ProgressBar on Android

The default loading circle animation on Android is a bit choppy and grey. It’s very easy to roll your own with perfectly smooth animation and a bit of colour to match your app’s branding. In this simple example I’m not using any bitmaps, just a basic shape in an XML drawable.

First you need to create a drawable resource, simply put the following XML into /res/drawable/progressbar_custom.xml:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" >

    <shape
        android:innerRadius="20dp"
        android:shape="ring"
        android:thickness="4dp"
        android:useLevel="false" >
        <size
            android:height="48dp"
            android:width="48dp" />

        <gradient
            android:centerColor="#80ec7e2a"
            android:centerY="0.5"
            android:endColor="#ffec7e2a"
            android:startColor="#00ec7e2a"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

It is a simple ring shape with sweep gradient, in this case using a nice orange colour #ec7e2a. The gradient only changes the colour’s alpha value by adding an extra byte to the front: #ffec7e2a is opaque, #00ec7e2a is fully transparent and #80ec7e2a is halfway in-between.

Here's how it looks like against different backgrounds,

Here’s how it looks like against different backgrounds,

To use it in your layout, simply set the indeterminateDrawable attribute of your ProgressBar:

<ProgressBar
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:indeterminateDrawable="@drawable/progressbar_custom" />

Animation speed

The rotation speed of the indeterminate progress bar is fixed at one revolution every 4 seconds, changing the duration attribute in the drawable XML has no effect. If you prefer to speed it up, you can change the toDegrees attribute to multiples of 360:

  • 720 makes one turn in 2 seconds
  • 1080 makes one turn in 1.33 seconds
  • 1440 makes one turn in 1 second

Any higher would make your eyes water. 🙂

Share Button
Posted in Blog Tagged with:
3 comments on “Custom indeterminate ProgressBar on Android

Leave a Reply