How to change progress bar progress color?

Question

I created this progress bar for my app, but I cant get that yellow orangy color that appears to change to something like red or blue.

<ProgressBar
        android:id="@+id/progress_bar"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="250sp"
        android:layout_height="wrap_content"
        android:progress="2"
        android:layout_marginTop="82dp"
        android:max="3"
        android:indeterminate="false"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true" />

above is my progress bar xml code.

Any help guys? :)

Thanks so much in advance! :)

Possible duplicate of [Android change Horizonal Progress bar color](http://stackoverflow.com/questions/5745814/android-change-horizonal-progress-bar-color) — earthw0rmjim, Jun 30 '16 at 10:24

score 50 · Answer 1 · answered Jun 30 '16 at 10:16

If android version is 5.0 and above you just need to set

android:indeterminateTint="@color/BLACK"
android:indeterminateTintMode="src_in"

For lower version I use this

mProgressBar.getIndeterminateDrawable().setColorFilter(getResources()
.getColor(R.color.primary_color),PorterDuff.Mode.SRC_IN);

score 13 · Answer 2 · edited Dec 07 '19 at 08:44

13

Create a new XML file in your drawable folder called something like custom_progress_bar.xml and paste this there:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Define the background properties like color etc -->
    <item android:id="@android:id/background">
        <clip>
            <shape>
                <solid android:color="#000000" />
            </shape>
        </clip>
    </item>
    <!-- Define the progress properties like start color, end color etc -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#FFFFFF" />
            </shape>
        </clip>
    </item>

</layer-list>

And in your <ProgressBar> add this attribute:

android:progressDrawable="@drawable/custom_progress_bar"

Change the 2 colors to your own preference. I put #FFFFFF and #000000 which are white and black.

edited Dec 07 '19 at 08:44

Haris

4,130
3
30
47

answered Jun 30 '16 at 10:14

Vucko

7,371
2
27
45

1

Dear Vuko, Your method worked amazingly! Thanks for your help! :) – AmateurProgrammer Jul 01 '16 at 06:07
I want to do the same programmatically. In my case, I want to change the progress color from code using hex value without changing the background color. Need help. – Navjot Jan 25 '18 at 08:12
What comes to my mind is that you can create the same drawable with a different color, and replace the progress drawable from code. If you need to dynamically choose the color (it ain't always the same), then it's harder, If I think of a solution I'll let you know :D @NavjotBedi – Vucko Jan 25 '18 at 12:05

score 6 · Answer 3 · answered Feb 24 '18 at 23:36

6

Go to your styles.xml and change the colorAccent value from your base application theme e.g.
<item name="colorAccent">{COLOR}</item>
I am using minSdkVersion 15 and it worked for me.

answered Feb 24 '18 at 23:36

Fahri Can

431
3
13

3

This is only a good solution if you don't mind that EVERYWHERE your colors might change to this. `ColorAccent` is a very important attribute and should be changed with caution. Check [this](https://stackoverflow.com/questions/31021198/whats-the-accent-color) – Vucko Mar 22 '19 at 09:13
It might **look** easier than my solution to add just this one line people, but it come with some caveats. Beware before using it. – Vucko Mar 22 '19 at 09:14

score 5 · Answer 4 · answered Mar 01 '18 at 19:01

5

If you want to change the ProgressBar color, not by drawable, you can use this style as theme for the ProgressBar

<style name="ProgressBar" parent="Widget.AppCompat.ProgressBar">
    <item name="colorAccent">@color/white_primary</item>
</style>

answered Mar 01 '18 at 19:01

Reza

906
2
15
29

Lev Martens · Answer 5 · 2021-01-19T08:28:13.820

If android:indeterminateTint doesn't work, try this:

<ProgressBar
    android:id="@+id/progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:progressTint="@color/Red" <--------------------------
    android:progressBackgroundTint="@color/Blue" <---------------
    android:layout_width="250sp"
    android:layout_height="wrap_content"
    android:progress="2"
    android:layout_marginTop="82dp"
    android:max="3"
    android:indeterminate="false"
    android:layout_below="@+id/imageView"
    android:layout_centerHorizontal="true" />

Sanoop Surendran · Answer 6 · 2016-06-30T10:22:09.363

2

Try this and add you custom color

Progressbar mBar= (ProgressBar) findViewById(R.id.spinner);
mBar.getIndeterminateDrawable().setColorFilter(Color.parseColor("#80DAEB"),
            android.graphics.PorterDuff.Mode.MULTIPLY);

Hope this helps

edited Jun 30 '16 at 10:22

answered Jun 30 '16 at 10:14

Sanoop Surendran

3,484
4
28
49

score 2 · Answer 7 · answered Jan 17 '20 at 10:07

2

For future references:

For API 21+ we can use directly in the XML:

android:indeterminateTint="@android:color/white"

answered Jan 17 '20 at 10:07

fe_araujo_

1,859
1
14
15

score 1 · Answer 8 · answered Jul 11 '21 at 21:03

set theme in style.xml like this

 <style name="ProgressBar" parent="Widget.AppCompat.ProgressBar">
    <item name="colorAccent">@color/dark_blue</item>
</style>

then use this style as "theme" in progressBar like this,

<ProgressBar
    android:id="@+id/progressBar"
    android:theme="@style/ProgressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="440dp"
    app:layout_constraintEnd_toEndOf="@+id/splashTitle"
    app:layout_constraintHorizontal_bias="0.493"
    app:layout_constraintStart_toStartOf="@+id/splashTitle"
    app:layout_constraintTop_toBottomOf="@+id/splashTitle" />

Happy coding

How to change progress bar progress color?

8 Answers8