ANDROID CUSTOM PROGRESS BAR

Android Custom Progress Bar: A Complete Guide

Introduction to Progress Bars in Android

Progress bars are a vital component in modern Android applications, used to indicate the progress of an ongoing task. Whether it's a file upload, network request, or data processing, progress bars provide visual feedback to users about the current state of an operation. In Android development, the default progress bars are useful, but often, developers need something more tailored to their app's look and feel. This is where custom progress bars come into play.

In this guide, we will explore the importance of custom progress bars in Android, how to create and customize them, and best practices for incorporating them into your application. By the end of this article, you’ll be well-equipped to add a unique and efficient progress bar to your Android projects.

What is an Android Custom Progress Bar?

A custom progress bar is a user interface (UI) component that allows you to modify the appearance and behavior of a standard progress bar to meet specific design requirements. Unlike the default progress bars that come with Android, a custom progress bar allows you to create unique visuals, animations, and interactions that are consistent with your app's overall design language.

Why Use a Custom Progress Bar?

1. Branding: Custom progress bars let you align the progress indicator with your app's branding, making it visually consistent with your theme, colors, and typography.
2. Unique User Experience: A custom progress bar can be designed to enhance user interaction and create a more engaging experience, which might not be possible with the standard progress bar.
3. Better Visual Feedback: With custom progress bars, you can provide clearer, more meaningful visual feedback. You can incorporate animations, icons, or even text inside the progress bar.
4. Enhanced Control: Custom progress bars offer full control over how the progress is represented, whether it's a circular, linear, or even a completely unique shape.

Types of Progress Bars in Android

Before we dive into creating a custom progress bar, it's helpful to understand the basic types of progress bars in Android. There are two main categories:

1. Determinate Progress Bar

A determinate progress bar shows the amount of work completed, such as a percentage. It’s typically used when the developer knows the total task length.

Example:

• File downloads
• Data processing with known completion time

2. Indeterminate Progress Bar

An indeterminate progress bar, on the other hand, doesn’t show the percentage of work completed. Instead, it simply indicates that something is happening, but the system doesn’t know how long it will take.

Example:

• Performing tasks like network calls or background data synchronization
• Unknown processing time

Creating a Basic Custom Progress Bar in Android

Let's start by creating a custom progress bar in Android. We will modify the default progress bar to match a specific design aesthetic.

Step 1: Create the Layout XML for the Progress Bar

In this example, we will customize the ProgressBar widget and adjust its appearance.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Custom progress bar -->
    <ProgressBar
        android:id="@+id/customProgressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progress="50"
        android:max="100"
        android:layout_centerInParent="true"
        android:progressDrawable="@drawable/custom_progress_bar" />

    <!-- Text to show the percentage -->
    <TextView
        android:id="@+id/progressPercentage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="50%"
        android:textSize="18sp"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="10dp"
        android:layout_marginTop="10dp" />

</RelativeLayout>

Here, we've created a horizontal progress bar and applied a custom drawable (@drawable/custom_progress_bar). We'll define this drawable in the next steps to customize its appearance.

Step 2: Create a Custom Drawable for the Progress Bar

Now, we will design the custom drawable (custom_progress_bar.xml) for the progress bar’s background and progress color. This file will be placed in the res/drawable directory.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Background Color -->
    <item android:id="@android:id/background">
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="#e0e0e0" />
            <corners android:radius="10dp" />
        </shape>
    </item>

    <!-- Progress Color -->
    <item android:id="@android:id/progress">
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="#3F51B5" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

This drawable file defines two layers:

1. The background layer with a gray color (#e0e0e0) and rounded corners.
2. The progress layer with a blue color (#3F51B5) and rounded corners as well.

You can replace the colors with your app's theme colors or any custom values.

Step 3: Update the Activity to Control the Progress Bar

Now that we have the layout and drawable defined, let's control the progress in our MainActivity.java file.

import android.os.Bundle;
import android.widget.ProgressBar;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ProgressBar progressBar;
    private TextView percentageTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        progressBar = findViewById(R.id.customProgressBar);
        percentageTextView = findViewById(R.id.progressPercentage);

        // Start the progress
        startProgress();
    }

    private void startProgress() {
        // Simulate a background task and update the progress
        new Thread(new Runnable() {
            @Override
            public void run() {
                for (int progress = 0; progress <= 100; progress++) {
                    try {
                        Thread.sleep(100); // Simulate work
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    final int finalProgress = progress;
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            progressBar.setProgress(finalProgress);
                            percentageTextView.setText(finalProgress + "%");
                        }
                    });
                }
            }
        }).start();
    }
}

In this code, we use a background thread to simulate a task that updates the progress bar every 100 milliseconds. We also update the TextView to display the percentage.

Step 4: Customizing the Progress Bar’s Animation

To add more appeal, you can animate the progress bar’s transition. Android allows for smooth animations for progress updates by using the ObjectAnimator class.

ObjectAnimator progressAnimator = ObjectAnimator.ofInt(progressBar, "progress", 0, 100);
progressAnimator.setDuration(2000); // 2 seconds
progressAnimator.setInterpolator(new DecelerateInterpolator());
progressAnimator.start();

This will animate the progress bar smoothly from 0% to 100% in two seconds.

Creating an Indeterminate Custom Progress Bar

An indeterminate progress bar is useful when you don't know the duration of the task, such as when you're waiting for a network request to complete.

Step 1: Indeterminate Progress Bar Layout

You can use the same layout file but change the ProgressBar style to indeterminate:

<ProgressBar
    android:id="@+id/indeterminateProgressBar"
    style="@android:style/Widget.ProgressBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:layout_centerInParent="true"/>

Step 2: Handling the Indeterminate Progress Bar

In your MainActivity, you can control the visibility of the indeterminate progress bar like this:

ProgressBar indeterminateProgressBar = findViewById(R.id.indeterminateProgressBar);

// Show the indeterminate progress bar
indeterminateProgressBar.setVisibility(View.VISIBLE);

// Hide it when the task is complete
indeterminateProgressBar.setVisibility(View.GONE);

Best Practices for Custom Progress Bars in Android

1. Provide Clear Feedback

A progress bar should always provide clear feedback to users. Use a determinate progress bar when possible, and show the exact percentage or steps of completion. If you can’t provide an exact estimate, use an indeterminate progress bar and make sure it’s visible for the appropriate duration.

2. Avoid Blocking the UI Thread

Never perform long-running operations on the main (UI) thread. Use background threads or AsyncTask to ensure that your UI remains responsive, especially when updating the progress.

3. Use Progress Bars Sparingly

While progress bars are useful, avoid overusing them. Display progress only when necessary and make sure the task being tracked is significant enough to warrant a progress bar.

4. Test on Multiple Devices

Custom progress bars should scale well on different screen sizes and resolutions. Always test your progress bars on multiple devices to ensure they look good on both small and large screens.

Conclusion

Custom progress bars in Android can dramatically improve the user experience by providing clear and visually appealing feedback during long-running operations. Whether you're displaying a simple linear progress bar or a complex custom animation, Android gives you the tools to create a progress indicator that matches your app’s design and user needs.

In this guide, we’ve covered how to create both determinate and indeterminate custom progress bars, customize their appearance, and control their behavior. By following the steps and best practices outlined in this article, you can ensure that your app delivers a seamless and engaging user experience.

---

FAQs

1. How do I make my progress bar circular? You can create a circular custom progress bar by using a ProgressBar with style="?android:attr/progressBarStyleLarge" and customizing the drawable as per your requirements.

2. Can I update the progress bar without using a background thread? No, it’s not recommended to update the progress bar on the main UI thread as it could lead to UI freezing. Always use background threads for long-running operations.

3. How can I make my progress bar more visually interesting? You can add animations, change the shape, or use different colors and gradients in the progress bar’s drawable to make it more dynamic.

4. Can I add text inside the progress bar? Yes, you can include a TextView inside the layout and update it dynamically to display progress text alongside the progress bar.

---

This comprehensive guide will help you incorporate custom progress bars into your Android app, improving both its usability and aesthetic appeal.