CODEWITHSUNDEEP
androidandroid-layoutprogress-bar
Arun Badole
Arun Badole

Reputation: 11097

How to change default color of progress bar?

I am using a circular ProgressBar in my Activty.My Problem is this it is not visible properly on my page because my page's BG color is same as ProgressBar .So how can I change the color of ProgressBar to make it properly Visible? Please Help

Upvotes: 45

Views: 76624

Answers (16)

n_r
n_r

Reputation: 639

For anyone using CircularProgressIndicator, you can try:

app:indicatorColor="@color/yourColor"
app:indicatorSize="4dp"

Upvotes: 0

Sardaar54
Sardaar54

Reputation: 36

Using android:indeterminateDrawable="@drawable/.." definitely changes the color of the progress bar background. But in my case, the progress was determinate.

I was able to change the color of both progress and progress background using the below lines within the progress bar:

<ProgressBar                                 
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="15dp"
    android:progress="50"
    android:progressBackgroundTint="@color/colorWhite"
    android:progressTint="@color/progress_green"
    android:textAlignment="center" />

Upvotes: 0

Born Ready
Born Ready

Reputation: 3496

Go to the declaration of the progress bar in your .xml file :

And paste this line of code :

android:indeterminateTint="@color/white"

The example above allows you to change the color of your progress bar to white. Now it's up to you to adapt it to the color you want.

Only for Android API >= 21

Upvotes: 8

Miah G.
Miah G.

Reputation: 149

The Chirag's answer is right, but not all.
I think the XML file should look like this:

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

Upvotes: 0

Amin Keshavarzian
Amin Keshavarzian

Reputation: 3943

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

Upvotes: 7

Sanush
Sanush

Reputation: 325

I'm using android 2.3.1 version. I create a xml file called progressbar and call it in the layout progress bar tag android:progressDrawable="@drawable/progressbar"

<item android:id="@+id/progress">
    <clip>
    <shape>
        <gradient android:startColor="@color/textColor"
            android:centerColor="@color/textColor"
            android:endColor="@color/textColor"
            android:gradientRadius="20dp"
            >
        </gradient>
    </shape>
    </clip>
</item>

Upvotes: 0

Naveen Kumar M
Naveen Kumar M

Reputation: 7557

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 these changes also reflects at multiple places. So, if you want a different color just for a specific ProgressBar you can do that by applying theme to that ProgressBar alone:

  • 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 the android: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

Edit

Here is the code for changing the color of ProgressBar by programatically.

ProgressBar progressBar = (ProgressBar) findViewById(R.id.pb_listProgressBar);
int colorCodeDark = Color.parseColor("#F44336");
progressBar.setIndeterminateTintList(ColorStateList.valueOf(colorCodeDark));

Upvotes: 41

emilpmp
emilpmp

Reputation: 1736

You can also change the color of your progressbar programmatically in your activities oncreate or your fragments onViewCreated()

pBar.getIndeterminateDrawable().setColorFilter(0xFFFF0000, android.graphics.PorterDuff.Mode.MULTIPLY);

Here the color applied is "0xFFFF0000" which is red. You can change it according to your needs

Upvotes: 1

Pankaj Talaviya
Pankaj Talaviya

Reputation: 3458

create progress drawable file 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@android:id/background">
    <shape>
        <corners android:radius="5dip" />
        <solid android:color="@color/colorWhite" />
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </clip>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </clip>
</item>

and set android:progressDrawable="@drawable/app_progressbar_back"

like this

<ProgressBar
                android:id="@+id/dialogProgressView"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/app_progressbar_back"
                android:progress="50"
                android:layout_marginTop="@dimen/margin_20" />

Upvotes: 2

Aalap Patel
Aalap Patel

Reputation: 2076

in xml u can apply color like this

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/loader"
    android:indeterminateTint="@color/my_color"
    android:layout_centerInParent="true"/>

Upvotes: 7

Birendra Singh
Birendra Singh

Reputation: 860

Here is some explanation. For changing background of a Indeterminate ProgressBar, you need a rotating ring because it rotates. In the answer of @Chirag, he has defined a rotating ring and applied it to the background of ProgressBar. If you have a Horizontal ProgressBar then you need a rectangle.

PS: I have not tried with other shapes.

Upvotes: 0

vikas kumar
vikas kumar

Reputation: 11018

here is how you can do it by java code.

progressBar.getProgressDrawable().setColorFilter(ContextCompat.getColor(getActivity(),R.color.product_status_color), PorterDuff.Mode.MULTIPLY)

Upvotes: 0

Anupam KR
Anupam KR

Reputation: 514

The easiest way is to use android:indeterminateTint attribute:

<ProgressBar
        android:indeterminate="true"
        android:indeterminateTint="@android:color/black"
        ........... />

Upvotes: 48

M.satti
M.satti

Reputation: 31

Try using this in your XML

android:indeterminateDrawable="@drawable/yourxmlfile"

style="@android:style/Widget.ProgressBar.Small"

Upvotes: -1

Jonathan Duque
Jonathan Duque

Reputation: 9

you also can change only the attribute

android:indeterminateDrawable="@drawable/yourxmlfile"

and keep this style 

style="@android:style/Widget.ProgressBar.Small"

Upvotes: -1

Chirag
Chirag

Reputation: 56925

Please make one xml file name progress.xml and put it in res/xml folder and write the below code in that xml file.

 <?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="#447a29"
            android:angle="0"
             />
    </shape>
</rotate>

after creating this xml file set your progressbars background as this xml ..

Like

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

Upvotes: 54

Related Questions