How to change progress bar's progress color in Android

Customizing Android ProgressBar Colors: A Comprehensive Guide

Learn how to effectively change the progress color of Android ProgressBars using XML attributes, themes, and programmatically for a consistent and branded user experience.

Android's ProgressBar is a fundamental UI element used to indicate the progress of an operation. While the default appearance is functional, customizing its color to match your application's branding is a common requirement. This article will guide you through various methods to change the progress color of an Android ProgressBar, covering both determinate and indeterminate styles, using XML, themes, and programmatic approaches.

Understanding ProgressBar Styles and Attributes

Before diving into color customization, it's important to understand the two main types of ProgressBar: indeterminate and determinate. An indeterminate ProgressBar shows an animation without indicating a specific amount of progress (e.g., a spinning circle), while a determinate ProgressBar shows a specific percentage of completion (e.g., a horizontal bar filling up). The methods for styling them can sometimes differ.

flowchart TD
    A[Start] --> B{ProgressBar Type?}
    B -->|Indeterminate| C[Spinning Circle / Marquee]
    B -->|Determinate| D[Horizontal Bar]
    C --> E[Apply `android:indeterminateTint`]
    D --> F[Apply `android:progressTint`]
    E --> G[Apply `android:backgroundTint` for track]
    F --> G
    G --> H[End]

Decision flow for ProgressBar color customization

Method 1: Using XML Attributes (AndroidX Material Design)

For modern Android applications using Material Design components (AndroidX), the easiest way to customize ProgressBar colors is by using specific XML attributes directly in your layout file. These attributes provide fine-grained control over the progress, background, and indeterminate tints.

<ProgressBar
    android:id="@+id/progressBarDeterminate"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="50"
    android:progressTint="@color/my_progress_color"
    android:backgroundTint="@color/my_track_color" />

<ProgressBar
    android:id="@+id/progressBarIndeterminate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminateTint="@color/my_indeterminate_color"
    android:backgroundTint="@color/my_track_color" />

Customizing ProgressBar colors using XML attributes

Method 2: Styling with Themes and Styles

For a more consistent and maintainable approach, especially if you want to apply the same color scheme across multiple ProgressBar instances or your entire application, you can define custom styles and apply them through your application's theme. This centralizes your UI customization.

<!-- In res/values/styles.xml or themes.xml -->
<style name="MyDeterminateProgressBar" parent="Widget.AppCompat.ProgressBar.Horizontal">
    <item name="android:progressTint">@color/my_progress_color</item>
    <item name="android:backgroundTint">@color/my_track_color</item>
</style>

<style name="MyIndeterminateProgressBar" parent="Widget.AppCompat.ProgressBar">
    <item name="android:indeterminateTint">@color/my_indeterminate_color</item>
    <item name="android:backgroundTint">@color/my_track_color</item>
</style>

<!-- Apply in layout -->
<ProgressBar
    android:id="@+id/progressBarDeterminateStyled"
    style="@style/MyDeterminateProgressBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="75" />

<ProgressBar
    android:id="@+id/progressBarIndeterminateStyled"
    style="@style/MyIndeterminateProgressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Defining and applying ProgressBar styles via themes

Method 3: Programmatic Color Change (Advanced)

In some cases, you might need to change the ProgressBar color dynamically at runtime based on certain conditions. This can be achieved programmatically using DrawableCompat for API compatibility and PorterDuff.Mode for older Android versions or more complex tinting scenarios.

Kotlin

import android.graphics.PorterDuff import android.widget.ProgressBar import androidx.core.graphics.drawable.DrawableCompat import androidx.core.content.ContextCompat

// For determinate ProgressBar val determinateProgressBar = findViewById(R.id.progressBarDeterminate) val progressDrawable = determinateProgressBar.progressDrawable if (progressDrawable != null) { val wrappedDrawable = DrawableCompat.wrap(progressDrawable) DrawableCompat.setTint(wrappedDrawable, ContextCompat.getColor(this, R.color.my_dynamic_progress_color)) determinateProgressBar.progressDrawable = DrawableCompat.unwrap(wrappedDrawable) }

// For indeterminate ProgressBar val indeterminateProgressBar = findViewById(R.id.progressBarIndeterminate) val indeterminateDrawable = indeterminateProgressBar.indeterminateDrawable if (indeterminateDrawable != null) { val wrappedDrawable = DrawableCompat.wrap(indeterminateDrawable) DrawableCompat.setTint(wrappedDrawable, ContextCompat.getColor(this, R.color.my_dynamic_indeterminate_color)) indeterminateProgressBar.indeterminateDrawable = DrawableCompat.unwrap(wrappedDrawable) }

Java

import android.graphics.PorterDuff; import android.graphics.drawable.Drawable; import android.widget.ProgressBar; import androidx.core.graphics.drawable.DrawableCompat; import androidx.core.content.ContextCompat;

// For determinate ProgressBar ProgressBar determinateProgressBar = findViewById(R.id.progressBarDeterminate); Drawable progressDrawable = determinateProgressBar.getProgressDrawable(); if (progressDrawable != null) { Drawable wrappedDrawable = DrawableCompat.wrap(progressDrawable); DrawableCompat.setTint(wrappedDrawable, ContextCompat.getColor(this, R.color.my_dynamic_progress_color)); determinateProgressBar.setProgressDrawable(DrawableCompat.unwrap(wrappedDrawable)); }

// For indeterminate ProgressBar ProgressBar indeterminateProgressBar = findViewById(R.id.progressBarIndeterminate); Drawable indeterminateDrawable = indeterminateProgressBar.getIndeterminateDrawable(); if (indeterminateDrawable != null) { Drawable wrappedDrawable = DrawableCompat.wrap(indeterminateDrawable); DrawableCompat.setTint(wrappedDrawable, ContextCompat.getColor(this, R.color.my_dynamic_indeterminate_color)); indeterminateProgressBar.setIndeterminateDrawable(DrawableCompat.unwrap(wrappedDrawable)); }

Conclusion

Customizing the progress color of an Android ProgressBar is a straightforward process with multiple approaches. For most modern applications, using XML attributes like android:progressTint and android:indeterminateTint directly in your layout or via styles is the recommended and cleanest method. Programmatic tinting offers flexibility for dynamic scenarios, ensuring your ProgressBar always aligns with your app's visual identity.