Custom progress bar in android application gives it a personal touch. In this tutorial, we’ll create a custom progress bar by implementing a spinning logo icon in our application. Most of the time, we end up using a ProgressBar as the loading icon while the data gets loaded. Going by the current trend, apps like Reddit, UBER, Foodpanda and Twitter have replaced the commonly used Progress Bar with their application’s icon as the loading icon. This gives their application as well as logo brand a touch that makes them stand out from the rest.

Custom Progress Bar in Android

Let’s see the classical way of showing a loading icon in our application’s activity.

android-progress-bar-demo

The code for the layout above should look like this:

We’ve set three circular ProgressBars that rotate endlessly in the above layout. Now let’s try to add a ProgressBar that spins an icon indeterminately.

Custom Progress Bar Android Studio Project Structure

android-progress-bar-demo

Android Custom Progress Bar Code

The ProgressBar class contains an attribute indeterminateDrawable which replaces the default indicator with the drawable specified. Let’s see what happens when we place an icon in the ProgressBar.

The code for activity_main.xml looks like this:

The output that the above layout reflects in our application is given below.

android-progress-bar-demo

Oops! What’s wrong with the ProgressBar? Why isn’t it rotating?

Well we need to set a RotateDrawable as the value of the attribute.

A RotateDrawable is defined in the xml by encapsulating the current drawable and assigning it the angle and degrees of rotation. The tag <rotate> is used to do so in the xml as shown below.

The code for the progress_icon.xml RotateDrawable is given below.

The attribute android:fillAfter indicates that the transformation is applied after the
animation is over.

android:toDegrees value can be increased or decreased to change the speed of rotation. Generally it’s recommended to set it in multiples of 360.

Let’s set the above drawable in the ProgressBar present in the activity_main.xml.

The output reflected in the application is shown below.
android spinning image, android rotate image animation

Let’s create a basic application that displays a string in a TextView from an ArrayList after a delay.

The code for the xml layout file activity_main.xml is given below.

Take note of the efficient use of ConstraintLayout in the above code.

The code for the MainActivity.java is given below.

The output of the above application in action is given below.

android custom progress bar example

Note: Ignore the flickering rotation in the gifs. It’s absolutely smooth when running on a device.

This brings an end to this tutorial. We’ve implemented a RotationDrawable inside a ProgressBar to achieve a spinning logo like indicator. This should be good for showing a loading progress in apps.

You can download the final Android Custom Progress Bar project from the link below.

Reference: API Doc

By admin

Leave a Reply