Customizing Android Progress Bar Colors

Android’s ProgressBar is a versatile UI element used to visually indicate the progress of an operation. While the default appearance is functional, often you’ll want to customize the color to match your application’s branding or design. This tutorial explores several methods to achieve this, covering both programmatic and XML-based approaches.

Understanding Progress Bar Types

Before diving into customization, it’s important to understand the two main types of ProgressBar:

• Determinate: These show a specific amount of progress, usually with a filled portion representing the percentage complete.
• Indeterminate: These display a looping animation, indicating that an operation is in progress but without a defined completion time. The customization methods differ slightly depending on the type of progress bar you’re using.

Method 1: Using Color Filters (Programmatic)

This method allows you to change the color of both determinate and indeterminate progress bars directly in your code.

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

// For determinate progress bars:
Drawable progressDrawable = progressBar.getProgressDrawable().mutate();
progressDrawable.setColorFilter(Color.RED, android.graphics.PorterDuff.Mode.SRC_IN);
progressBar.setProgressDrawable(progressDrawable);

//For indeterminate progress bars:
Drawable indeterminateDrawable = progressBar.getIndeterminateDrawable().mutate();
indeterminateDrawable.setColorFilter(Color.BLUE, android.graphics.PorterDuff.Mode.SRC_IN);
progressBar.setProgressDrawable(indeterminateDrawable);

• getProgressDrawable(): Retrieves the drawable representing the progress (the filled portion).
• getIndeterminateDrawable(): Retrieves the drawable for the animation of an indeterminate progress bar.
• .mutate(): Creates a new drawable instance, preventing modifications from affecting other drawables using the same resource. This is crucial to avoid unintended side effects.
• setColorFilter(): Applies a color filter to the drawable. The PorterDuff.Mode.SRC_IN mode ensures that the color replaces the existing colors within the drawable’s shape.

Method 2: Using setProgressTintList() (API 21+)

For API Level 21 (Lollipop) and higher, you can use setProgressTintList() to directly set the color of the progress bar. This is a cleaner and more straightforward approach.

ProgressBar progressBar = findViewById(R.id.myProgressBar);
progressBar.setProgressTintList(ColorStateList.valueOf(Color.GREEN));

• ColorStateList: Allows you to define different colors for different states of the progress bar (e.g., default, pressed, focused). Using ColorStateList.valueOf() provides a single color for all states.

Method 3: XML-Based Customization

You can also customize the progress bar’s color directly within your XML layout file. This method is often preferred for simple color changes, as it keeps the styling information separate from your code.

<ProgressBar
    android:id="@+id/myProgressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminateTint="@color/secondary"
    android:indeterminateTintMode="src_atop"/>

• indeterminateTint: Specifies the color for the indeterminate progress bar.
• indeterminateTintMode: Defines how the tint color is applied. src_atop blends the tint color with the drawable’s existing colors.

Method 4: Using Themes (API 21+)

For more complex scenarios, or if you want to maintain consistency across your application, you can leverage Android themes.

1. Extend your default theme: Create a new style that inherits from your application’s default theme and overrides the colorAccent attribute.

   <style name="AppTheme.WhiteAccent" parent="AppTheme">
       <item name="colorAccent">@color/white</item>
   </style>
   

2. Apply the theme to your ProgressBar: Add the android:theme attribute to your ProgressBar in the XML layout.

   <ProgressBar
       android:id="@+id/loading"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:theme="@style/AppTheme.WhiteAccent"/>
   

This method effectively changes the accent color used for the progress bar, ensuring consistency throughout your app.

Best Practices

• Use mutate(): Always call mutate() on the drawable before modifying it to prevent unintended side effects.
• Consider API Level: Use setProgressTintList() only for API 21 and higher. Provide fallback solutions for older versions.
• Maintain Consistency: Use themes or shared color resources to maintain a consistent look and feel across your application.
• Accessibility: Ensure sufficient contrast between the progress bar color and the background to meet accessibility guidelines.