Creating Custom Progress Bars in Android

Progress bars are essential UI elements in Android applications, particularly for showing the status of ongoing tasks. Customizing these progress indicators allows you to maintain a unique look and feel for your app. This guide will walk you through creating a custom progress bar using Android’s built-in features.

Basic Circular Progress Bars

Let’s first look at a simple way to display a progress indicator. The following example shows three circular ProgressBar elements aligned vertically within a ConstraintLayout.

 
< ?xml version="1.0" encoding="utf-8"?>


    

    

    

In this layout, you have three types of progress bars (Large, Small, and Medium), each with its own size and position within the view. The progress bars will rotate endlessly, signaling an ongoing background task.

Adding a Custom ProgressBar with an Icon

Next, let’s take it up a notch by adding an icon to the ProgressBar. The indeterminateDrawable attribute allows you to replace the default rotating indicator with a custom image or icon.

Here’s the updated layout where an icon spins in place of the standard progress bar indicator:

 
< ?xml version="1.0" encoding="utf-8"?>


    

At first glance, the icon may appear static. This is because we need to animate it. To do so, we’ll utilize the RotateDrawable to define the animation parameters, such as rotation angle and pivot points.

Using RotateDrawable for a Spinning Effect

A RotateDrawable is created by wrapping a drawable (like an image or icon) inside a rotate tag. You can set parameters like the rotation angle and speed. Here’s how you can define a rotating drawable in progress_icon.xml:

 
< ?xml version="1.0" encoding="utf-8"?>

    
        
    

In this example, the toDegrees attribute defines the number of degrees for one full rotation. You can modify this value to adjust the speed of the rotation. A full rotation is generally represented by 360 degrees.

Now, update the layout to use this drawable in your ProgressBar:

 
&lt ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminateDrawable="@drawable/progress_icon"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" >

A Basic Example with Progress Delays

Let’s combine the rotating progress bar with a delayed action. The following code displays a random message from a list after a few seconds of loading, mimicking a common use case of showing a loading spinner before content appears.

XML Layout (activity_main.xml)

 
<?xml version="1.0" encoding="utf-8"?>


    

    

    

MainActivity.java Code

 
package com.example.customprogressbar;

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    TextView textView;
    List quotesList;
    ProgressBar progressBar;
    int i = 0;

    Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        quotesList = new ArrayList<>();

        quotesList.add("Hi");
        quotesList.add("Happy New Year");
        quotesList.add("Hope you have a good day");
        quotesList.add("Merry Christmas");

        Button btnTap = findViewById(R.id.button);
        textView = findViewById(R.id.textView);
        progressBar = findViewById(R.id.progressBar);

        btnTap.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                progressBar.setVisibility(View.VISIBLE);
                textView.setVisibility(View.GONE);
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {

                        if (i == quotesList.size())
                            i = 0;

                        textView.setVisibility(View.VISIBLE);
                        textView.setText(quotesList.get(i++));
                        progressBar.setVisibility(View.GONE);

                    }
                }, 3000);
            }
        });
    }
}

Final Thoughts

This guide demonstrates how to create a custom rotating progress indicator in Android by using RotateDrawable. This feature provides a smooth and customizable way to display loading animations that fit your app’s branding. You can implement this in various scenarios to enhance the user experience while waiting for background tasks to complete.