Search code examples
androidandroid-progressbar

How to change ProgressBar's progress indicator color in Android


I have set Horizontal ProgressBar.

I would like to change the progress color to yellow.

<ProgressBar 
    android:id="@+id/progressbar" 
    android:layout_width="80dip" 
    android:layout_height="20dip"  
    android:focusable="false" 
    style="?android:attr/progressBarStyleHorizontal" />

The problem is, the progress color is different in different devices. So, I want it to fix the progress color.


Solution

  • I copied this from one of my apps, so there's prob a few extra attributes, but should give you the idea. This is from the layout that has the progress bar:

    <ProgressBar
        android:id="@+id/ProgressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        android:maxHeight="10dip"
        android:minHeight="10dip"
        android:progress="50"
        android:progressDrawable="@drawable/greenprogress" />
    

    Then create a new drawable with something similar to the following (In this case greenprogress.xml):

    <?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" />
                <gradient
                    android:angle="270"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff747674"
                    android:startColor="#ff9d9e9d" />
            </shape>
        </item>
    
        <item android:id="@android:id/secondaryProgress">
            <clip>
                <shape>
                    <corners android:radius="5dip" />
                    <gradient
                        android:angle="270"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:startColor="#80ffd300" />
                </shape>
            </clip>
        </item>
        <item android:id="@android:id/progress">
            <clip>
                <shape>
                    <corners android:radius="5dip" />
                    <gradient
                        android:angle="270"
                        android:endColor="#008000"
                        android:startColor="#33FF33" />
                </shape>
            </clip>
        </item>
    
    </layer-list>
    

    You can change up the colors as needed, this will give you a green progress bar.