How to Implement an Android Circular Progress Bar: A Complete Guide

A Circular Progress Bar is a commonly used UI element that represents the progress of an ongoing task in a circular, visually appealing way. It is ideal for scenarios where you need to show users that the app is working in the background, such as during file downloads, network operations, or heavy computations.

In Android, you can implement a Circular Progress Bar using a variety of methods. This guide will walk you through the steps for creating and customizing a circular progress bar in your Android app.

What is a Circular Progress Bar?

A Circular Progress Bar is a UI widget that displays the completion status of a task in a circular format. Unlike a linear progress bar that fills a straight line, the circular progress bar fills in a circular motion, which often gives a more polished and engaging user experience.

It typically appears when an operation takes time, and users need feedback to indicate that something is being processed. It provides a visual cue to the users about the progress of tasks, without the need for additional text-based indicators.

Why Use a Circular Progress Bar?

Here are some reasons why you might want to use a circular progress bar in your Android application:

  1. Enhanced User Experience: It provides a more modern and engaging look, making your app feel more professional.
  2. Space Efficiency: Circular progress bars are compact and often occupy less space, making them ideal for displaying progress without consuming a lot of screen real estate.
  3. Aesthetically Pleasing: The circular shape adds a sleek visual effect that can match modern app design trends.

Types of Circular Progress Bars in Android

Android provides two main types of circular progress bars:

  1. Indeterminate Circular Progress Bar: This type of progress bar shows that a task is running but does not show how much progress has been made. It’s often used when you don’t know the exact length of the task (e.g., network requests or background processing).

  2. Determinate Circular Progress Bar: This type of progress bar shows the exact percentage of completion. It’s ideal when you can track the progress of a task, such as downloading a file or processing data.

Creating Circular Progress Bar in Android

Let’s go through the process of implementing both types of Circular Progress Bar in your Android application.

1. Using the Android Built-In ProgressBar

Android provides a built-in ProgressBar widget that you can customize to create both indeterminate and determinate circular progress bars.

Indeterminate Circular Progress Bar (Default Style)

  1. Add the ProgressBar to your Layout:

    To create a circular progress bar, use the <ProgressBar> widget in your XML layout file. Set the style attribute to @android:style/Widget.ProgressBar to make it a circular style.

    <!-- activity_main.xml -->
<ProgressBar
    android:id="@+id/circularProgressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:indeterminate="true"
    android:visibility="gone" /> <!-- Initially hidden -->

    In this case, the progress bar is indeterminate, which means it will keep spinning without showing progress percentage. The visibility="gone" ensures that the progress bar doesn’t show until it's required.

  2. Control Progress Bar in Your Activity:

    In your MainActivity.java or MainActivity.kt, you can show and hide the progress bar programmatically when needed:

    ProgressBar progressBar = findViewById(R.id.circularProgressBar);

// Show the ProgressBar
progressBar.setVisibility(View.VISIBLE);

// Hide the ProgressBar (after the task is done)
progressBar.setVisibility(View.GONE);

Determinate Circular Progress Bar

To create a determinate circular progress bar, you will need to set the style to @android:style/Widget.ProgressBar.Horizontal but apply it as a circular one by adjusting the drawable.

  1. Update your XML Layout:

    <ProgressBar
    android:id="@+id/circularProgressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:max="100"         <!-- Maximum value (100%) -->
    android:progress="0"      <!-- Current progress -->
    android:progressDrawable="@drawable/circular_progress_bar"
    android:visibility="gone" />

  2. Set Progress Programmatically:

    In your MainActivity.java or MainActivity.kt, you can update the progress of the circular progress bar as follows:

    ProgressBar progressBar = findViewById(R.id.circularProgressBar);

// To update the progress dynamically
int progress = 50; // Example progress percentage
progressBar.setProgress(progress);

// Show the ProgressBar
progressBar.setVisibility(View.VISIBLE);

2. Using a Custom Circular Progress Bar (Using Drawable)

If you want more control over the appearance and style of the progress bar, you can create a custom drawable for the circular progress bar.

Creating a Custom Drawable

  1. Create a custom drawable resource file (e.g., circular_progress_bar.xml) inside the res/drawable/ folder:

    <!-- res/drawable/circular_progress_bar.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="oval">
            <solid android:color="#d3d3d3" /> <!-- Background Color -->
        </shape>
    </item>

    <item android:left="5dp" android:right="5dp" android:top="5dp" android:bottom="5dp">
        <shape
            android:shape="oval">
            <solid android:color="#FF0000" /> <!-- Progress Color -->
        </shape>
    </item>
</layer-list>

  2. Apply the Drawable to the ProgressBar:

    You can use this custom drawable as the background for the progress bar in your layout XML:

    <ProgressBar
    android:id="@+id/customCircularProgressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="50"
    android:progressDrawable="@drawable/circular_progress_bar"
    android:visibility="gone" />

3. Using Third-Party Libraries for Circular Progress Bar

While Android’s built-in progress bar and custom drawable give you flexibility, third-party libraries often provide more advanced features, customization options, and ease of use. One of the popular libraries for circular progress bars is SpinKit.

Using SpinKit Library

SpinKit provides multiple styles of animated circular progress indicators.

  1. Add SpinKit dependency to your project:

    Open your build.gradle file and add the following dependency:

    dependencies {
    implementation 'com.github.ybq:Android-SpinKit:1.4.0'
}

  2. Add SpinKit ProgressBar to Layout:

    You can easily add a circular progress bar to your layout:

    <com.github.ybq.android.spinkit.SpinKitView
    android:id="@+id/spinKit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:SpinKitColor="@android:color/white"
    app:SpinKitStyle="Circle" />

  3. Control SpinKit in Your Activity:

    In your MainActivity.java, you can control the visibility of the SpinKit progress bar:

    SpinKitView spinKitView = findViewById(R.id.spinKit);

// To show the ProgressBar
spinKitView.setVisibility(View.VISIBLE);

// To hide the ProgressBar after completing a task
spinKitView.setVisibility(View.GONE);

Conclusion

A Circular Progress Bar is a great way to provide users with visual feedback during long-running tasks or processes in your Android app. Whether you use Android's built-in ProgressBar, create a custom drawable, or integrate third-party libraries like SpinKit, you have multiple ways to implement this feature in your app.

To recap, here are the key approaches to implementing a circular progress bar in Android:

  1. Built-in ProgressBar: Simple to implement for both indeterminate and determinate progress indicators.
  2. Custom Drawable: Offers more control over appearance and behavior.
  3. Third-Party Libraries: Libraries like SpinKit provide additional functionality and easy-to-use circular progress bars with advanced features.

By using these methods, you can ensure that your app’s user interface is both functional and visually appealing, offering a smooth experience for users as they wait for background tasks to complete.