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 · Answer 1 · 2016-04-24T23:34:01.380

188

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 '16 at 23:34

answered Apr 24 '16 at 21:12

Student222

3,021
2
19
24

4

with `style="?android:attr/progressBarStyle"` doesn't work – user25 Sep 16 '16 at 19:25
If I have an array of colors and I want to set color to a color array on the each progress bar – Prince Dholakiya Aug 08 '18 at 07:44
This worked fine for me, just to change the progressBar ring color :) – Gastón Saillén Jan 10 '19 at 13:46
Thank you for emphasizing the aspect of APIs – JamisonMan111 Aug 01 '19 at 04:17
1

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 – PPP Jun 08 '20 at 02:58

Chirag · Accepted Answer · 2019-02-19T04:44:28.397

175

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"
 />

edited Feb 19 '19 at 04:44

answered Mar 17 '11 at 10:14

Chirag

56,621
29
151
198

1

its not working when I am using custom dialog as list view header. Is there need to another approach? – Pankaj Kumar Apr 29 '11 at 10:00
22

This creates a green ring shape, but the actual ProgressBar's spinner is still visible. – mdupls May 03 '12 at 18:46
is there a way to make the spinning colors move in only one direction? – thepoosh Oct 18 '12 at 13:30
50

Instead of setting the background with "android:background", use "android:indeterminateDrawable="@drawable/progress" instead, as highlighted by another answer – baekacaek Aug 21 '13 at 00:27
Thanks its working perfectly. @Chirag How can I make it to run some what faster ? – Piyush Agarwal Apr 16 '14 at 11:38
This did not work as expected. It displays a ring and then a regular spinning progress bar within. Muhamad's answer works better. – Anuj Jain Jul 23 '14 at 11:09
for me its not rotating – Sarath Sadasivan Pillai Jul 30 '14 at 07:52
this is not the solution – SjoerdvGestel Oct 12 '17 at 11:12
1

Use android:startColor="#447a29" android:endColor="#227a29" values different so that it doesn't form a static circle. – Abhishek Sengupta Aug 07 '18 at 09:05
As Abhishek said, there should be a big difference between whatever startColor and endColor you use, otherwise it will look static. For example, you can use android:startColor="@color/colorPrimary" and android:endColor="00ffffff" (solid white) and that will give you something from the theme. – Andy Weinstein Nov 06 '18 at 12:43

score 139 · Answer 3 · edited Nov 24 '15 at 14:20

139

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" />

edited Nov 24 '15 at 14:20

Marko

20,385
13
48
64

answered Jul 22 '13 at 10:55

Muhamed Riyas M

5,055
3
30
31

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 – harikrishnan Aug 29 '13 at 06:04
1

Thanks. It work 100%. set progress.xml to android:indeterminateDrawable – Leo Nguyen Dec 20 '13 at 10:18
When I tried this, it created a Thick border of circle. Any ideas how to reduce the border ? – Tejas Apr 28 '15 at 07:34
Hi Tejas, Try to change this line android:thicknessRatio="8" inside the progress.xml . You can try different values. Hope it will work. – Muhamed Riyas M Apr 28 '15 at 07:54
It works but instead of two rings rotating against each other I get just a single ring. Any fix for this? – AXE Feb 07 '16 at 09:43
After removing `android:useLevel="false"` from `` tag started rotating in my pre-lollipop device. Thank you – Shashanth Jul 15 '16 at 11:33
How can we increase the rotation speed of this progress bar? Cos it is rotating very slowly. – gaurav kumar Oct 27 '22 at 18:23

score 68 · Answer 4 · answered Feb 27 '14 at 14:54

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 ?? — Meghal Agrawal, Jul 05 '15 at 21:16
If I have an array of colors and I want to set color to a color array on the each progress bar — Prince Dholakiya, Aug 08 '18 at 07:44

score 39 · Answer 5 · answered Sep 12 '14 at 17:42

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 '14 at 17:42

aikmanr

725
6
6

1

On 2.3.x this gives you a solid filled circle where MULTIPLY preserves transparency. – dvs Nov 13 '15 at 20:28
If I have an array of colors and I want to set color to a color array on the each progress bar – Prince Dholakiya Aug 08 '18 at 07:44
Use compat version: `progressBar.indeterminateDrawable.colorFilter = BlendModeColorFilterCompat.createBlendModeColorFilterCompat(0xffffff, BlendModeCompat.SRC_ATOP)` – Guy Or Oct 14 '20 at 09:49

score 35 · Answer 6 · answered Mar 18 '17 at 16:48

35

android:indeterminateTint="@color/progressbar"

answered Mar 18 '17 at 16:48

Bhupinder Singh

409
5
6

just use above attribute in progress bar :indeterminateTint= your colour – Bhupinder Singh Mar 18 '17 at 16:49
Best answer and it would support for all versions also – Pankaj Kumar Mar 05 '18 at 09:50
This is all you need, not these crazy answers. Though others would benefit from the full code block. – StarWind0 Jun 18 '18 at 16:19
7

indeterminateTint is available for API 21 or higher. If that works for you, terrific! – Andy Weinstein Nov 06 '18 at 12:23

score 19 · Answer 7 · edited Mar 08 '17 at 07:47

19

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"/>

edited Mar 08 '17 at 07:47

Alexander Farber

21,519
75
241
416

answered Mar 08 '17 at 07:26

Hardik Vasani

876
1
8
14

[i think this will help you](https://github.com/Todd-Davies/ProgressWheel/blob/master/src/com/todddavies/components/progressbar/ProgressWheel.java) – Hardik Vasani May 31 '17 at 14:00

score 15 · Answer 8 · answered Oct 16 '17 at 12:51

15

That's work for me.

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

answered Oct 16 '17 at 12:51

Kaloglu

1,651
1
20
31

5

Available from API level 21 – viplezer Feb 02 '18 at 13:05

Gabriele Mariotti · Answer 9 · 2022-01-26T07:14:12.227

13

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/..."
          />

edited Jan 26 '22 at 07:14

answered Mar 23 '21 at 18:17

Gabriele Mariotti

320,139
94
887
841

2

this one should be the accepted one as for now in 2021 – Zohab Ali Sep 25 '21 at 07:06

score 11 · Answer 10 · edited Jan 10 '18 at 19:33

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" />

`rotate`tag is missing before `shape`. Without it, the progressbar will be static — Renan Bandeira, Jan 20 '16 at 23:37

score 10 · Answer 11 · answered Aug 01 '17 at 13:51

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"/>

score 10 · Answer 12 · answered Jul 08 '19 at 14:47

10

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

answered Jul 08 '19 at 14:47

Amin Keshavarzian

3,646
1
37
38

1

The Only best simplest solution – Vitaly Mar 26 '21 at 11:36

score 10 · Answer 13 · answered Jul 19 '20 at 08:26

<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" />

score 4 · Answer 14 · answered Aug 02 '17 at 15:00

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"/>

score 4 · Answer 15 · answered Oct 20 '18 at 02:22

4

To supplement Muhamed Riyas M's top voted answer:

Faster rotation

android:toDegrees="1080"

Thinner ring

android:thicknessRatio="16"

Light white

android:endColor="#80ffffff"

answered Oct 20 '18 at 02:22

Suragch

484,302
314
1,365
1,393

score 4 · Answer 16 · answered Feb 05 '20 at 01:32

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"
 />

score 3 · Answer 17 · answered Sep 04 '18 at 13:59

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.

score 2 · Answer 18 · answered Nov 15 '16 at 18:11

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));
    }
}

score 1 · Answer 19 · answered Feb 19 '18 at 06:55

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>

score 1 · Answer 20 · answered Apr 19 '20 at 21:58

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>

score 0 · Answer 21 · answered Jan 16 '20 at 10:47

0

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

answered Jan 16 '20 at 10:47

Nocturnale

26
1
7

score 0 · Answer 22 · answered Mar 08 '21 at 12:02

<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" />

score -1 · Answer 23 · edited Aug 16 '16 at 08:01

-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 '16 at 08:01

AJPerez

3,435
10
61
91

answered Aug 16 '16 at 07:26

user3273957

11

If I have an array of color then ? – Prince Dholakiya Aug 08 '18 at 07:40

How to change color in circular progress bar?

23 Answers23

`progress.xml`

Like this

Linked

Related