I'm using an horizontal progress bar in my Android application, and I want to change its progress color (which is Yellow by default). How can I do it using code
(not XML)?
42 Answers
This is not programmatically but I think it could help a lot of people anyway.
I tried a lot and the most efficient way was to add this lines to my ProgressBar in the .xml File:
android:indeterminate="true"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="@color/secondary"
So in the end this code did it for me:
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="50dp"
android:layout_marginBottom="50dp"
android:visibility="visible"
android:indeterminate="true"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="@color/secondary">
This solution works for API 21+
-
There are also setter methods for these properties which can be called if dynamic color must be set.– racsDec 1, 2015 at 23:46
-
Do I have to make a custom resource file for api 21+ and api <= 20? Or are those attributes just ignored in api <= 20?– prom85Jan 20, 2016 at 8:13
-
1
-
1It is a good answer, just use @TargetApi anotation in the method that change the color so when it is less API 21 it doesn't crash– HanakoJun 15, 2018 at 20:40
For a horizontal ProgressBar, you can use a ColorFilter
, too, like this:
progressBar.getProgressDrawable().setColorFilter(
Color.RED, android.graphics.PorterDuff.Mode.SRC_IN);
Note: This modifies the appearance of all progress bars in your app. To only modify one specific progress bar, do this:
Drawable progressDrawable = progressBar.getProgressDrawable().mutate();
progressDrawable.setColorFilter(Color.RED, android.graphics.PorterDuff.Mode.SRC_IN);
progressBar.setProgressDrawable(progressDrawable);
If progressBar is indeterminate then use getIndeterminateDrawable()
instead of getProgressDrawable()
.
Since Lollipop (API 21) you can set a progress tint:
progressBar.setProgressTintList(ColorStateList.valueOf(Color.RED));
-
7I wanted to use this answer as it seemed to me to be the simplest one but my progress bar is completely red independently of the progress value. Are you sure of the Mode to use?– L. G.May 29, 2013 at 13:55
-
36@resus I have the same problem, the bar was fully red and no progress was visible. But I solved it changing Mode.SRC_IN to Mode.MULTIPLY.– DerzuJul 2, 2013 at 15:00
-
43Don't forget to do the same for
getIndeterminateDrawable
if you are using indeterminate progress.– ThommySep 18, 2014 at 6:45 -
3Also note that doing this will modify drawables of ALL progress bars in your app. To do this only to a particular one, call mutate() on drawable, then set color filter on it and then call set*Drawable on your progressBar.– dimsuzFeb 19, 2015 at 11:13
-
9how to don't change background color ? I just want to change progress color.– kangearFeb 25, 2015 at 2:42
I'm sorry that it's not the answer, but what's driving the requirement setting it from code ?
And .setProgressDrawable
should work if it's defined correctly
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="@color/progress_start"
android:endColor="@color/progress_end"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
-
6The reason is because I'm creating the progress bar dynamically, and setting its color upon user request. Since I usually use code for building my GUI screen and components, I'm not familiar with the attached XML and I don't know what's a layer-list (although I'm guessing that you are building the progress bar based on several layers..). In case I do want to use the XML you've attached - where should I place the it in the project's folder and is there anything more I need to do for creating a progress bar based on the XML settings ? Thanks. Jan 7, 2010 at 15:33
-
1You save this xml as a file and put it in the drawable folder ( let's say my_progress.xml ) than you set it as a drawable in MyProgressBar.setProgressDrawable() To change colors - you'll need to change those values in @color/progress_start @color/progress_end It's basically a gradient and you can put hex in there. Jan 7, 2010 at 15:50
-
3Note - file is the copy of the one that's in SDK. I've dropped copyright here. If you look in the res/drawable folder you'll see exactly what i've posted - colors are set to the yellow gradient, instead of custom colors. Jan 7, 2010 at 15:53
-
7Its does not show any color change to me. please tell the color which worked out.– PraveenJul 2, 2010 at 11:09
-
Hi Alex , your answers is very nice. but, i am tried to change custom progress wheel color at runtime. but, i could not. please help me to solve my issue.. after progress reaches100%, then that time change the color and start progress..i download code from this..stackoverflow.com/questions/18503718/… Aug 29, 2013 at 11:20
For my indeterminate progressbar (spinner) I just set a color filter on the drawable. Works great and just one line.
Example where setting color to red:
ProgressBar spinner = new android.widget.ProgressBar(
context,
null,
android.R.attr.progressBarStyle);
spinner.getIndeterminateDrawable().setColorFilter(0xFFFF0000, android.graphics.PorterDuff.Mode.MULTIPLY);
-
17I like your answer the best. For mine to work though I had to do this: myProgressBarSpinner.getIndeterminateDrawable().setColorFilter(new LightingColorFilter(0xFF000000, foregroundColorDesired)); Jul 1, 2013 at 0:38
-
5Also note that doing this will modify drawables of ALL progress bars in your app. To do this only to a particular one, call mutate() on drawable, then set color filter on it and then call setIntederminateDrawable on your progressBar.– dimsuzFeb 19, 2015 at 11:13
-
3NB: Those who use this and wondering why their colour doesn't look exactly as the hex string they put in, it has a Multiple Colour filter on it. Change
android.graphics.PorterDuff.Mode.MULTIPLY
toPorterDuff.Mode.SRC_IN
and you will get the exact hex colour. Aug 17, 2015 at 7:38 -
I think he just need this answer ..... android:indeterminateTint="@android:color/black" May 23, 2016 at 17:25
-
4i used as : progressBar= (ProgressBar) findViewById(R.id.progressBar); progressBar.getIndeterminateDrawable().setColorFilter(ContextCompat.getColor(this,android.R.color.white), android.graphics.PorterDuff.Mode.MULTIPLY); Jun 17, 2017 at 12:35
This is an old question, but using theme is not mentioned here. If your default theme is using AppCompat
, your ProgressBar
's color will be colorAccent
you have defined.
Changing colorAccent
will also change your ProgressBar
's color, but there changes also reflects at multiple places. So, if you want a different color just for a specific PregressBar
you can do that by applying theme to that ProgressBar
:
Extend your default theme and override
colorAccent
<style name="AppTheme.WhiteAccent"> <item name="colorAccent">@color/white</item> <!-- Whatever color you want--> </style>
And in
ProgressBar
add theandroid:theme
attribute:android:theme="@style/AppTheme.WhiteAccent"
So it will look something like this:
<ProgressBar
android:id="@+id/loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp"
android:theme="@style/AppTheme.WhiteAccent" />
So you are just changing a colorAccent
for your particular ProgressBar
.
Note: Using style
will not work. You need to use android:theme
only.
You can find more use of theme here: https://plus.google.com/u/0/+AndroidDevelopers/posts/JXHKyhsWHAH
-
20finally! thanks, it seems like not many developers use AppCompat, many users just vote-ups answers with solution for API 21+, not good at all, they should support more devices/OS as possible– user25Sep 16, 2016 at 19:37
-
1Awesome! Worked for me, but I had to make sure there was a parent="@style/Theme.AppCompat" somewhere up the style hierarchy I had another parent and it didn't work at first. Jan 24, 2017 at 10:09
-
@Nublodeveloper Yes I mentioned that in the first line if you have noticed. Jan 24, 2017 at 12:36
-
1@kirtan403 Ah, yes, I get it now you mention it, but I didn't understand it that way when I first read it. I read it too fast and I was looking for code. Thanks anyway, your answer is the best for me! Jan 24, 2017 at 13:57
-
+1 Liked your solution. But how to set the color of the theme in java??? For example if I want it to be red <color name="red">#ff5900</color>– MaseedJan 5, 2018 at 12:14
All API
if use all API just create the theme in style
style.xml
<resources>
//...
<style name="progressBarBlue" parent="@style/Theme.AppCompat">
<item name="colorAccent">@color/blue</item>
</style>
</resources>
and use in progress
<ProgressBar
...
android:theme="@style/progressBarBlue" />
API level 21 and higher
if used in API level 21 and higher just use this code:
<ProgressBar
//...
android:indeterminate="true"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="@color/secondary"/>
-
1
This works for me. It also works for lower version too. Add this to your syles.xml
<style name="ProgressBarTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="colorAccent">@color/colorPrimary</item>
</style>
And use it like this in xml
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="@style/ProgressBarTheme"
/>
-
1I've implemented this in the CryptoTweets sample app. I've found the parent theme is not required for this solution to work as expected.
parent="ThemeOverlay.AppCompat.Light"
Mar 27, 2020 at 4:11 -
Simplest solution if you want to tint the default progressbar. Thanks Aug 5, 2020 at 6:07
-
This worked for me :
<ProgressBar
android:indeterminateTint="#d60909"
... />
-
14
as per some of the suggestions, you CAN specify a shape and clipdrawable with a colour, then set it. I have this working programatically. This is how I do it..
First make sure you import the drawable library..
import android.graphics.drawable.*;
Then use the code similar to below;
ProgressBar pg = (ProgressBar)row.findViewById(R.id.progress);
final float[] roundedCorners = new float[] { 5, 5, 5, 5, 5, 5, 5, 5 };
pgDrawable = new ShapeDrawable(new RoundRectShape(roundedCorners, null,null));
String MyColor = "#FF00FF";
pgDrawable.getPaint().setColor(Color.parseColor(MyColor));
ClipDrawable progress = new ClipDrawable(pgDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);
pg.setProgressDrawable(progress);
pg.setBackgroundDrawable(getResources().getDrawable(android.R.drawable.progress_horizontal));
pg.setProgress(45);
-
1I tried the code above, unfortunately it just results in an "empty" progress bar. Am I missing something? May 17, 2011 at 19:41
-
You need to call setLevel on the ClipDrawable. It takes a value from 0 to 10000. So, progress.setLevel(2500) would be 25% full. Sep 19, 2011 at 2:08
-
1I have submitted an edit to the answer that explains one reason for an "empty" progress bar - and 2 ways to fix it (incl @HappyEngineer's fix) Feb 22, 2012 at 7:30
-
@RichardLeMesurier can you post the explanation + 2 ways in the comment section?
progress.setLevel(2500)
doesn't work for me and apparently your edit wasn't accepted for some reason. Thanks. +1.– ateiobJun 29, 2012 at 13:29 -
if Indeterminate:
((ProgressBar)findViewById(R.id.progressBar))
.getIndeterminateDrawable()
.setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
-
I used this, but it doesn't animate, just color has been applied... I'm using circular progressbar Aug 10, 2015 at 9:45
Trust me, the easiest solution is just paste this inside progressBar :
android:indeterminateTint="@android:color/white"
Nowadays in 2016 I found some pre-Lollipop devices don't honour the colorAccent
setting, so my final solution for all APIs is now the following:
// fixes pre-Lollipop progressBar indeterminateDrawable tinting
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
Drawable wrapDrawable = DrawableCompat.wrap(mProgressBar.getIndeterminateDrawable());
DrawableCompat.setTint(wrapDrawable, ContextCompat.getColor(getContext(), android.R.color.holo_green_light));
mProgressBar.setIndeterminateDrawable(DrawableCompat.unwrap(wrapDrawable));
} else {
mProgressBar.getIndeterminateDrawable().setColorFilter(ContextCompat.getColor(getContext(), android.R.color.holo_green_light), PorterDuff.Mode.SRC_IN);
}
For bonus points, it doesn't use any deprecated code. Try it!
-
Don't forget to call
wrapDrawable.mutate()
withDrawableCompat.setTint(wrapDrawable.mutate(), ContextCompat.getColor(getContext(), android.R.color.holo_green_light));
Aug 24, 2018 at 11:21 -
Just tried it (again) on a fresh new 4.4.2 emulator and it works without any issues whatsoever, check your
.xml
settings and also if something else is overriding theProgressBar
color. Feb 5, 2019 at 14:49
For SDK ver 21 and above
android:indeterminateTint="@color/orange"
in XML Works for me, is easy enough.
-
If you want to change for the whole app, kindly change the value of <color name="RedAccent">#FE6C27</color>. in your Values/colors.xml.– MughilMay 30, 2017 at 12:25
THis is what i did. Worked.
ProgressBar:
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4"
android:indeterminateDrawable="@drawable/progressdrawable"
/>
progressdrawable.xml:
Here use gradient to change colour as you like. And android:toDegrees="X" increse the value of X and progressbar rotate fast. Decrease and it rotate slow.Customize according to your needs.
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" >
<shape
android:innerRadius="20dp"
android:shape="ring"
android:thickness="4dp"
android:useLevel="false" >
<size
android:height="48dp"
android:width="48dp" />
<gradient
android:centerColor="#80ec7e2a"
android:centerY="0.5"
android:endColor="#ffec7e2a"
android:startColor="#00ec7e2a"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
-
@Ixx when it runs , it looks good. You can anyways change colour's !! Aug 21, 2020 at 11:49
Add in ProgressBar inside of Xml
For SDK ver 21 and above
android:indeterminateTint="@color/red"
-
He specifically asked to do it "in code" which means in Java, not XML. Unless he added that later after you had already answered. Oct 23, 2021 at 9:26
-
Yes, this has already happened, but is there a problem you are facing, I can help you :) Oct 25, 2021 at 1:59
Hit the same problem while working on modifying the look/feel of the default progress bar. Here is some more info that will hopefully help people :)
- The name of the xml file must only contain characters:
a-z0-9_.
(ie. no capitals!) - To reference your "drawable" it is
R.drawable.filename
- To override the default look, you use
myProgressBar.setProgressDrawable(...)
, however you need can't just refer to your custom layout asR.drawable.filename
, you need to retrieve it as aDrawable
:Resources res = getResources(); myProgressBar.setProgressDrawable(res.getDrawable(R.drawable.filename);
- You need to set style before setting progress/secondary progress/max (setting it afterwards for me resulted in an 'empty' progress bar)
You can try to change your Styles, Themes, or using android:indeterminateTint="@color/yourColor" anywhere you want, but there's just one way o doing that will work on any Android SKD version:
If you progress bar is not indeterminate, please use:
progressBar.getProgressDrawable().setColorFilter(ContextCompat.getColor(context, R.color.yourColor), PorterDuff.Mode.SRC_IN );
If you progress bar is indeterminate, please use:
progressBar.getIndeterminateDrawable().setColorFilter(ContextCompat.getColor(getContext(), R.color.yourColor), PorterDuff.Mode.SRC_IN );
It's sad that Android is such a mess!
-
Thanks! It works for indeterminate
ProgressBar
, but for determinate it paints whole scale with color.– CoolMindSep 28, 2018 at 11:29
For default ( indeterminate )
add
android:indeterminateTint="@color/white"
for determinate
android:progressTint="@color/color_1"
//OR
progressBar.getProgressDrawable().setColorFilter( PorterDuffColorFilter(Color.RED,android.graphics.PorterDuff.Mode.SRC_IN));
How I did it in horizontal ProgressBar:
LayerDrawable layerDrawable = (LayerDrawable) progressBar.getProgressDrawable();
Drawable progressDrawable = layerDrawable.findDrawableByLayerId(android.R.id.progress);
progressDrawable.setColorFilter(color, PorterDuff.Mode.SRC_IN);
-
2I did the same thing, plus the background color change: layerDrawable.findDrawableByLayerId(android.R.id.background).setColorFilter(trackColor,PorterDuff.Mode.SRC); Jan 6, 2016 at 14:08
-
2This answer along with @KamenDobrev 's comment is the only one that actually did what I wanted. When I only set a color filter to the progress drawable the background color changed as well. Jul 10, 2016 at 7:16
There's probably one thing that hasn't been referred to in this answer:
If your theme is inheriting from Theme.AppCompat
, ProgressBar
will assume the color you defined as "colorAccent"
in your theme.
So, using..
<item name="colorAccent">@color/custom_color</item>
..will tint the color of the ProgressBar automagically to the @color/custom_color
.
-
1I needed to use <item name="android:colorAccent">@color/highlight</item> Sep 26, 2017 at 11:48
Simplest Solution if you want to change the colour in the layout xml file, use the below code and use indeterminateTint property for your desired color.
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:indeterminate="true"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="#ddbd4e"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
The most simple way of changing the foreground and background colour of a progress bar is
<ProgressBar
style="@android:style/Widget.ProgressBar.Horizontal"
android:id="@+id/pb_main"
android:layout_width="match_parent"
android:layout_height="8dp"
android:progress="30"
android:progressTint="#82e9de"
android:progressBackgroundTint="#82e9de"
/>
just add
android:progressTint="#82e9de" //for foreground colour
android:progressBackgroundTint="#82e9de" //for background colour
-
You should indicate that this is working only for android API > 21 Jun 15, 2020 at 7:24
This solution worked for me :
<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"/>
To change horizontal ProgressBar color (in kotlin):
fun tintHorizontalProgress(progress: ProgressBar, @ColorInt color: Int = ContextCompat.getColor(progress.context, R.color.colorPrimary)){
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
progress.progressTintList = ColorStateList.valueOf(color)
} else{
val layerDrawable = progress.progressDrawable as? LayerDrawable
val progressDrawable = layerDrawable?.findDrawableByLayerId(android.R.id.progress)
progressDrawable?.setColorFilter(color, PorterDuff.Mode.SRC_ATOP)
}
}
To change indeterminate ProgressBar color:
fun tintIndeterminateProgress(progress: ProgressBar, @ColorInt color: Int = ContextCompat.getColor(progress.context, R.color.colorPrimary)){
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
progress.indeterminateTintList = ColorStateList.valueOf(color)
} else {
(progress.indeterminateDrawable as? LayerDrawable)?.apply {
if (numberOfLayers >= 2) {
setId(0, android.R.id.progress)
setId(1, android.R.id.secondaryProgress)
val progressDrawable = findDrawableByLayerId(android.R.id.progress).mutate()
progressDrawable.setColorFilter(color, PorterDuff.Mode.SRC_ATOP)
}
}
}
}
And it finally normally tint pre-lollipop progressBars
Simply use:
DrawableCompat.setTint(progressBar.getIndeterminateDrawable(),yourColor)
-
3
One more little thing, the theme solution does work if you inherit a base theme, so for app compact your theme should be:
<style name="AppTheme.Custom" parent="@style/Theme.AppCompat">
<item name="colorAccent">@color/custom</item>
</style>
And then set this in the progress bar theme
<ProgressBar
android:id="@+id/progressCircle_progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:theme="@style/AppTheme.Custom"
android:indeterminate="true"/>
simply use:
PorterDuff.Mode mode = PorterDuff.Mode.SRC_IN;
if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.GINGERBREAD_MR1) {
mode = PorterDuff.Mode.MULTIPLY;
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
progressBar.setProgressTintList(ColorStateList.valueOf(Color.RED));
progressBar.setProgressBackgroundTintList(ColorStateList.valueOf(Color.RED));
} else {
Drawable progressDrawable;
progressDrawable = (progressBar.isIndeterminate() ? progressBar.getIndeterminateDrawable() : progressBar.getProgressDrawable()).mutate();
progressDrawable.setColorFilter(context.getResources().getColor(Color.RED), mode);
progressBar.setProgressDrawable(progressDrawable);
}
Horizontal progress bar custom material style :
To change color of background and progress of horizontal progress bar.
<style name="MyProgressBar" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:progressBackgroundTint">#69f0ae</item>
<item name="android:progressTint">#b71c1c</item>
<item name="android:minWidth">200dp</item>
</style>
Apply it to progress bar by setting style attribute, for custom material styles and custom progress bar check http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples
-
3
Use the android.support.v4.graphics.drawable.DrawableCompat:
Drawable progressDrawable = progressBar.getIndeterminateDrawable();
if (progressDrawable != null) {
Drawable mutateDrawable = progressDrawable.mutate();
DrawableCompat.setTint(mutateDrawable, primaryColor);
progressBar.setProgressDrawable(mutateDrawable);
}
android:indeterminateTint="@android:color/white"
works only on API >=21android:progressTint="@android:color/white"
when you use non-indeterminate