How to change color in circular progress bar?

Question

I am using circular progress bar on Android. I wish to change the color of this. I am using

"?android:attr/progressBarStyleLargeInverse"

style. So how to change the color of progress bar.

How to custom the style? Furthermore, what is the definition of the style?

Student222 · Accepted Answer · 2016-04-24 23:34:01Z

189

For API 21 and Higher. Simply set the indeterminateTint property. Like:

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

To support pre-API 21 devices:

mProgressSpin.getIndeterminateDrawable() .setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN );

edited Apr 24, 2016 at 23:34

answered Apr 24, 2016 at 21:12

Student222

3,0712 gold badges22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user25 Over a year ago

with style="?android:attr/progressBarStyle" doesn't work

Prince Dholakiya Over a year ago

If I have an array of colors and I want to set color to a color array on the each progress bar

Gastón Saillén Over a year ago

This worked fine for me, just to change the progressBar ring color :)

PPP Over a year ago

If I put this color it colors the spinning cutted ring but all of it, so it turns into a full ring so you dont see it moving

Chirag · Accepted Answer · 2019-02-19 04:44:28Z

In the res/drawable folder, put this:

`progress.xml`

<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0" android:toDegrees="360"> <shape android:shape="ring" android:innerRadiusRatio="3" android:thicknessRatio="8" android:useLevel="false"> <size android:width="76dip" android:height="76dip" /> <gradient android:type="sweep" android:useLevel="false" android:startColor="#447a29" android:endColor="#00ffffff" android:angle="0"/> </shape> </rotate>

Set startColor and endColor as per your choice .

Now set that progress.xml in ProgressBar's backgound .

Like this

<ProgressBar android:id="@+id/ProgressBar01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:indeterminateDrawable="@drawable/progress" />

its not working when I am using custom dialog as list view header. Is there need to another approach?
This creates a green ring shape, but the actual ProgressBar's spinner is still visible.
is there a way to make the spinning colors move in only one direction?
Instead of setting the background with "android:background", use "android:indeterminateDrawable="@drawable/progress" instead, as highlighted by another answer
Use android:startColor="#447a29" android:endColor="#227a29" values different so that it doesn't form a static circle.

Marko · Accepted Answer · 2015-11-24 14:20:57Z

1.First Create an xml file in drawable folder under resource

named "progress.xml"

<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" > <shape android:innerRadiusRatio="3" android:shape="ring" android:thicknessRatio="8" android:useLevel="false" > <size android:height="76dip" android:width="76dip" /> <gradient android:angle="0" android:endColor="color/pink" android:startColor="@android:color/transparent" android:type="sweep" android:useLevel="false" /> </shape> </rotate>

2.then make a progresss bar using the folloing snippet

<ProgressBar style="?android:attr/progressBarStyleLarge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/relativeLayout1" android:layout_centerHorizontal="true" android:layout_marginBottom="20dp" android:indeterminate="true" android:indeterminateDrawable="@drawable/progress" />

Hi Muhamed, i am using custom progress wheel, i tried to change the color in progress wheel at runtime. i am tried for, Once I click on a button, the progress starts. I have set the color as green. After the progress reaches 100%, I want it to start again, only this time its color should be red. But, i could not able to do that.. if possible pls help me
Thanks. It work 100%. set progress.xml to android:indeterminateDrawable
When I tried this, it created a Thick border of circle. Any ideas how to reduce the border ?
Hi Tejas, Try to change this line android:thicknessRatio="8" inside the progress.xml . You can try different values. Hope it will work.
It works but instead of two rings rotating against each other I get just a single ring. Any fix for this?

Dadroid · Accepted Answer · 2014-02-27 14:54:14Z

You can change color programmatically by using this code :

ProgressBar v = (ProgressBar) findViewById(R.id.progress); v.getIndeterminateDrawable().setColorFilter(0xFFcc0000, android.graphics.PorterDuff.Mode.MULTIPLY);

If you want to change ProgressDialog's progressbar color, u can use this :

mDilog.setOnShowListener(new OnShowListener() { @Override public void onShow(DialogInterface dialog) { ProgressBar v = (ProgressBar)mDilog.findViewById(android.R.id.progress); v.getIndeterminateDrawable().setColorFilter(0xFFcc0000, android.graphics.PorterDuff.Mode.MULTIPLY); } });

Hey how will i connect ProgressDialog's Progress Bar With Progress.xml ??
If I have an array of colors and I want to set color to a color array on the each progress bar

aikmanr · Accepted Answer · 2014-09-12 17:42:21Z

39

To add to Dato's answer, i find SRC_ATOP to be a preferable filter to multiply as it better supports the alpha channel.

ProgressBar v = (ProgressBar) findViewById(R.id.progress); v.getIndeterminateDrawable().setColorFilter(0xFFcc0000, android.graphics.PorterDuff.Mode.SRC_ATOP);

answered Sep 12, 2014 at 17:42

aikmanr

7256 silver badges6 bronze badges

3 Comments

dvs Over a year ago

On 2.3.x this gives you a solid filled circle where MULTIPLY preserves transparency.

Prince Dholakiya Over a year ago

If I have an array of colors and I want to set color to a color array on the each progress bar

Guy Or Over a year ago

Use compat version:

progressBar.indeterminateDrawable.colorFilter = BlendModeColorFilterCompat.createBlendModeColorFilterCompat(0xffffff, BlendModeCompat.SRC_ATOP)

Bhupinder Singh · Accepted Answer · 2017-03-18 16:48:09Z

35

android:indeterminateTint="@color/progressbar"

answered Mar 18, 2017 at 16:48

Bhupinder Singh

4095 silver badges6 bronze badges

4 Comments

Bhupinder Singh Over a year ago

just use above attribute in progress bar :indeterminateTint= your colour

Pankaj Kumar Over a year ago

Best answer and it would support for all versions also

JJJ Over a year ago

This is all you need, not these crazy answers. Though others would benefit from the full code block.

Andy Weinstein Over a year ago

indeterminateTint is available for API 21 or higher. If that works for you, terrific!

Alexander Farber · Accepted Answer · 2017-03-08 07:47:55Z

styles.xml

<style name="CircularProgress" parent="Theme.AppCompat.Light"> <item name="colorAccent">@color/yellow</item> </style> <ProgressBar android:layout_width="@dimen/d_40" android:layout_height="@dimen/d_40" android:indeterminate="true" style="@style/Widget.AppCompat.ProgressBar" android:theme="@style/CircularProgress"/>

Gabriele Mariotti · Accepted Answer · 2022-01-26 07:14:12Z

With the Material Components Library you can use the CircularProgressIndicator with these attributes:

indicatorColor

trackColor

 <com.google.android.material.progressindicator.CircularProgressIndicator android:indeterminate="true" app:trackColor="@color/..." app:indicatorSize="90dp" app:indicatorColor="@color/..." />

Kaloglu · Accepted Answer · 2017-10-16 12:51:38Z

That's work for me.

<ProgressBar android:id="@+id/ProgressBar01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:indeterminateTint="@color/black"/>

Hounshell · Accepted Answer · 2018-01-10 19:33:52Z

To customize circular ProgressBar we need to create a indeterminateDrawable to show custom progress bar

<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:duration="1"> <shape android:innerRadiusRatio="3" android:shape="ring" android:thicknessRatio="8" android:useLevel="false"> <size android:height="48dip" android:width="48dip" /> <gradient android:centerColor="#f96047" android:centerY="0.50" android:endColor="#fb9c8d" android:startColor="#f72d0c" android:type="sweep" android:useLevel="false" /> </shape> </rotate>

We need to include drawable in progressbar just as below:

<ProgressBar android:layout_width="wrap_content" android:layout_centerInParent="true" style="?android:attr/progressBarStyleLarge" android:visibility="visible" android:progressDrawable="@drawable/widget_progressbar" android:indeterminateDrawable="@drawable/widget_progressbar" android:layout_height="wrap_content" />

rotatetag is missing before shape. Without it, the progressbar will be static

Amin Keshavarzian · Accepted Answer · 2019-07-08 14:47:10Z

check this answer out:

for me, these two lines had to be there for it to work and change the color:

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

PS: but its only available from android 21

S.Javed · Accepted Answer · 2017-08-01 13:51:44Z

for me theme wasn't working with accentColor. But it did work with colorControlActivated

 <style name="Progressbar.White" parent="AppTheme"> <item name="colorControlActivated">@color/white</item> </style> <ProgressBar android:layout_width="@dimen/d_40" android:layout_height="@dimen/d_40" android:indeterminate="true" android:theme="@style/Progressbar.White"/>

Null Pointer Exception · Accepted Answer · 2020-07-19 08:26:14Z

<style name="progressColor" parent="Widget.AppCompat.ProgressBar"> <item name="colorControlActivated">@color/colorPrimary</item> </style> <ProgressBar android:id="@+id/progressBar" android:layout_width="250dp" android:theme="@style/progressColor" android:layout_height="250dp" android:layout_centerInParent="true" />

Felix · Accepted Answer · 2017-08-02 15:00:17Z

Add to your activity theme, item colorControlActivated, for example:

 <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar"> ... <item name="colorControlActivated">@color/rocket_black</item> ... </style>

Apply this style to your Activity in the manifest:

<activity android:name=".packege.YourActivity" android:theme="@style/AppTheme.NoActionBar"/>

Suragch · Accepted Answer · 2018-10-20 02:22:38Z

To supplement Muhamed Riyas M's top voted answer:

Faster rotation

android:toDegrees="1080"

Thinner ring

android:thicknessRatio="16"

Light white

android:endColor="#80ffffff"

Mitch · Accepted Answer · 2020-02-05 01:32:17Z

Try using a style and set colorControlActivated too desired ProgressBar color.

<style name="progressColor" parent="Widget.AppCompat.ProgressBar"> <item name="colorControlActivated">@color/COLOR</item> </style>

Then set the theme of the ProgressBar to new style.

<ProgressBar android:id="@+id/progress_bar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:theme="@style/progressColor" />

Rahul · Accepted Answer · 2018-09-04 13:59:12Z

You can use a style for changing the color of progress like below

 <style name="AppTheme.anyName"> <item name="colorAccent">YOUR_COLOR</item> </style>

and use it in the ProgressBar like below

<ProgressBar style="?android:attr/progressBarStyle" android:theme="@style/AppTheme.WhiteAccent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/dimen_30" />

Hope it helps.

Nathaniel D. Waggoner · Accepted Answer · 2016-11-15 18:11:00Z

You can do this with a custom dialog pretty easily, reusing the xml from other answers:

<?xml version="1.0" encoding="utf-8"?>

<shape android:innerRadiusRatio="3" android:shape="ring" android:thicknessRatio="8" android:useLevel="false" > <size android:height="76dip" android:width="76dip" /> <gradient android:angle="0" android:endColor="@color/oceanBlue" android:startColor="@android:color/transparent" android:type="sweep" android:useLevel="false" /> </shape>

Just do this:

public static class ModifiedProgressDialog extends ProgressDialog { public ModifiedProgressDialog(Context context) { super(context); } @Override public void show() { super.show(); setIndeterminateDrawable(getContext().getResources().getDrawable(R.drawable.blue_progress)); } }

Behl · Accepted Answer · 2018-02-19 06:55:40Z

For all those wondering how to increase the speed of custom progress

 <?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0" android:toDegrees="1080"><!--HERE YOU COULD INCREASE SPEED BY SETTING TODEGRESS(1080 is 3 loops instead of 1 in same amt of time)--> <shape android:shape="ring" android:innerRadiusRatio="3" android:thicknessRatio="8" android:useLevel="false"> <size android:width="76dip" android:height="76dip" /> <gradient android:type="sweep" android:useLevel="false" android:startColor="#447a29" android:endColor="#447a29" android:angle="0" /> </shape>

Bhavesh Moradiya · Accepted Answer · 2020-04-19 21:58:32Z

Set android:indeterminateDrawable="@drawable/progress_custom_rotate"

Use Below Code for Custom Circular Ring Progress Bar

Copy Below code and create "progress_custom_rotate.xml" in Drawable folder

<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0" android:toDegrees="1080"> <shape android:shape="ring" android:innerRadiusRatio="3" android:thicknessRatio="8" android:useLevel="false"> <size android:width="48dip" android:height="48dip" /> <gradient android:type="sweep" android:useLevel="false" android:startColor="#4c737373" android:centerColor="#4c737373" android:centerY="0.50" android:endColor="#ffffd300" /> </shape> </rotate>

Nocturnale · Accepted Answer · 2020-01-16 10:47:37Z

It takes color value from your Res/Values/Colors.xml -> colorAccent if you change it, your progressBar color changes aswell.

jayee · Accepted Answer · 2021-03-08 12:02:46Z

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/black</item> <item name="colorPrimaryDark">@color/white</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="progressColor" parent="Widget.AppCompat.ProgressBar"> <item name="colorControlActivated">@color/black</item> </style> </resources> <ProgressBar android:id="@+id/progressBar2" style="?android:attr/progressBarStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:theme="@style/progressColor" app:layout_constraintBottom_toBottomOf="@+id/textView3" app:layout_constraintStart_toEndOf="@+id/textView3" app:layout_constraintTop_toTopOf="@+id/textView3" />

AJPerez · Accepted Answer · 2016-08-16 08:01:54Z

-1

You can change your progressbar colour using the code below:

progressBar.getProgressDrawable().setColorFilter( getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_IN);

edited Aug 16, 2016 at 8:01

AJPerez

3,64511 gold badges69 silver badges99 bronze badges

answered Aug 16, 2016 at 7:26

user3273957

11

1 Comment

Prince Dholakiya Over a year ago

If I have an array of color then ?

Collectives™ on Stack Overflow

How to change color in circular progress bar?

23 Answers 23

4 Comments

`progress.xml`

Like this

10 Comments

7 Comments

2 Comments

3 Comments

4 Comments

1 Comment

1 Comment

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

23 Answers 23

4 Comments

progress.xml

Like this

10 Comments

7 Comments

2 Comments

3 Comments

4 Comments

1 Comment

1 Comment

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Related

`progress.xml`