How to change the color of the ProgressBar in Android: from basic to advanced design

The progress indicator (ProgressBar) is one of the key interface elements in Android, which signals the user about the completion of lengthy operations. The standard gray or blue color of the indicator does not always harmonize with the application design, so developers often need to customize it. In this article, we will look at all the current ways to change color ProgressBar —from the simplest XML settings to programmatic control through code and creating completely custom styles.

We will pay special attention to the nuances of working with different versions of Android (including Material Design 3), as well as typical errors that lead to the indicator color not changing despite all effort. If you have ever encountered a situation where android:progressTint is ignored or ProgressBar displayed as white on a white background, here you will find solutions.

The material will be useful for both novice developers and experienced professionals who need to quickly refresh their knowledge about modern approaches to styling UI components. All code examples are tested on Android 13 (API 33) and are compatible with earlier versions up to Android 5.0 (API 21).

1. Basic methods of changing color via XML

Let's start with the simplest method - setting the color directly in the markup file (layout.xml). This approach is ideal for static indicators whose color does not need to be changed dynamically.

The main attributes responsible for color ProgressBar:

• 🎨 android:progressTint — the color of the filled part of the indicator (the main progress).
• 🖌️ android:progressBackgroundTint — the color of the background (unfilled area).
• 🔄 android:indeterminateTint — the color for the undefined indicator (spinning circle).
• 📏 android:minHeight and android:maxHeight — the height of the indicator (affects the visibility of the color).

Example code for ProgressBar with green progress color and gray background:

<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressTint="#4CAF50"
android:progressBackgroundTint="#E0E0E0"
android:max="100"
android:progress="30" />

⚠️ Attention: Attributes progressTint and indeterminateTint work only on Android 5.0+ (API 21). For earlier versions, you will need to use custom styles or programmatic color changes.

If you use Material Components for Android, it is recommended to replace the standard <ProgressBar> with <com.google.android.material.progressindicator.LinearProgressIndicator>. This component supports advanced styling capabilities, including animations and responsive design.

2. Styles and themes: a universal approach for the entire application

If your application uses a lot of ProgressBar with the same design, it is advisable to move the color settings to style or theme. This makes code easier to maintain and ensures a consistent interface.

Create a new style in the file res/values/styles.xml:

<style name="CustomProgressBar" parent="Widget.AppCompat.ProgressBar.Horizontal">
<item name="colorControlActivated">#FF5722</item>
<item name="colorControlNormal">#BDBDBD</item>
<item name="android:minHeight">8dp</item>
</style>

Then apply the style to ProgressBar:

<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="50" />

To change everything globally ProgressBar in the application, add attributes to the main theme (Theme.AppCompat or Theme.MaterialComponents):

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorControlActivated">@color/primary_color</item>
<item name="colorControlNormal">@color/secondary_light</item>
</style>

3. Programmatic color change in Java/Kotlin

Dynamic color change ProgressBar is often required when changing themes (light/dark), reactions on user actions or data updating. For this, methods of the class ProgressBar.

V Kotlin:

val progressBar = findViewById<ProgressBar>(R.id.progress_bar)
progressBar.progressTintList = ColorStateList.valueOf(Color.parseColor("#FF9800"))
progressBar.progressBackgroundTintList = ColorStateList.valueOf(Color.parseColor("#FFE0B2"))

V Java:

ProgressBar progressBar = findViewById(R.id.progress_bar);
progressBar.setProgressTintList(ColorStateList.valueOf(Color.parseColor("#FF9800")));
progressBar.setProgressBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#FFE0B2")));

For an undefined indicator are used (indeterminate):

progressBar.indeterminateTintList = ColorStateList.valueOf(Color.RED)

⚠️ Attention: Method setProgressTintList is available only on API 21+. For support for older devices, use the library AppCompat i androidx.appcompat.widget.ProgressBar.

If you need to animate the color change (for example, a smooth transition when reaching 100%), use ValueAnimator:

val animator = ValueAnimator.ofArgb(Color.BLUE, Color.GREEN)
animator.addUpdateListener { valueAnimator ->
progressBar.progressTintList = ColorStateList.valueOf(valueAnimator.animatedValue as Int)
}
animator.duration = 1000
animator.start()

Uses ProgressBar from androidx.appcompat.widget|

The color is set in ARGB format (#AARRGGBB)|

Support for older Android versions is taken into account (API < 21)|

Checked display on a dark/light background -->

4. drawable

When standard capabilities are not enough (for example, you need a gradient fill or a complex shape), create custom drawableThis method requires more effort, but gives full control over the appearance.

Steps for creating a custom one ProgressBar:

1. Create a file progress_drawable.xml in the folder res/drawable:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<corners android:radius="4dp" />
<solid android:color="#E0E0E0" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="4dp" />
<gradient
android:startColor="#FF9800"
android:endColor="#F44336"
android:angle="90" />
</shape>
</clip>
</item>
</layer-list>

Apply drawable to ProgressBar:

<ProgressBar
android:layout_width="match_parent"
android:layout_height="8dp"
android:progressDrawable="@drawable/progress_drawable"
android:progress="75" />

For the circular indicator (indeterminate) use <rotate> i <shape type="ring">:

<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%">
<shape android:shape="ring"
android:thickness="4dp"
android:innerRadius="12dp"
android:useLevel="false">
<solid android:color="#2196F3" />
</shape>
</rotate>

5. Using Material Components for modern design

Library data-i="122">offers advanced components, including Material Components for Android offers advanced components including LinearProgressIndicator and CircularProgressIndicatorthat support animations, custom colors and responsive design.

Add a dependency to build.gradle:

implementation 'com.google.android.material:material:1.9.0'

Usage example LinearProgressIndicator:

<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="4dp"
android:indeterminate="false"
app:indicatorColor="#6200EE"
app:trackColor="#E0E0E0"
app:progress="40" />

Key attributes Material Components:

• 🎨 app:indicatorColor — indicator color.
• 🖌️ app:trackColor — track color (background).
• 🔄 app:indicatorDirectionLinear — filling direction (left-to-right, right-to-left).
• ⚡ app:trackThickness — track thickness.

Important: Material Components automatically adapt to the dark theme if your application supports it DayNight. To do this, just specify alternative colors in res/values-night/colors.xml.

6. Animation and dynamic effects

Static ProgressBar can be made more interactive using animations. smooth color change and pulsating indicator.

1. Smooth color change with progress:

val progressBar = findViewById<ProgressBar>(R.id.progress_bar)
val colors = intArrayOf(Color.RED, Color.YELLOW, Color.GREEN)
val animator = ObjectAnimator.ofInt(
progressBar,
"progressTint",
ArgbEvaluator(), // Use ArgbEvaluator for a smooth transition
*colors
)
animator.duration = 3000
animator.start()

2. Pulsating effect for an undefined indicator:

val pulseAnimator = ObjectAnimator.ofFloat(
progressBar,
"alpha",
0.3f, 1f
)
pulseAnimator.duration = 1000
pulseAnimator.repeatMode = ObjectAnimator.REVERSE
pulseAnimator.repeatCount = ObjectAnimator.INFINITE
pulseAnimator.start()

For complex animations (for example, a gradient moving along a progress bar), create a custom one Drawable s AnimatorSet:

val drawable = progressBar.progressDrawable as LayerDrawable
val gradientDrawable = drawable.findDrawableByLayerId(android.R.id.progress) as GradientDrawable
val animator = ValueAnimator.ofFloat(0f, 1f)
animator.addUpdateListener {
gradientDrawable.setLevel((it.animatedValue as Float * 10000).toInt())
}
animator.duration = 2000
animator.repeatCount = ValueAnimator.INFINITE
animator.start()

⚠️ Attention: Excessive use of animations can negatively affect performance on weak devices. Test on devices with Android Go or budget ones. smartphones.

7. Typical errors and their solutions

Even experienced developers encounter problems when customizing ProgressBarHere are the most common errors and ways to fix them:

Additional debugging tips:

• 🔍 Check if the style is overridden in the application theme.
• 📱 Test on a real device - the emulator may display colors incorrectly.
• 🎨 Use the tool Android Studio Layout Inspector to check the resulting attributes.
• 📝 If you use Data Binding, make sure that the color binding works correctly.

FAQ: Frequently asked questions about customizing ProgressBar

<shape android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#4CAF50" />
</shape>

AlertDialog.Builder(this, R.style.CustomAlertDialog)
.setView(R.layout.dialog_with_progress)
.show()

<style name="CustomAlertDialog" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
<item name="colorControlActivated">@color/your_color</item>
</style>