Android - how to change horizontal progress bar color without losing animation

Question

First, this is not a duplicate of question "how to change progress bar color", it does solve my issue, but it produce another one.

So, I have a horizontal progress bar, I keep writing/updating the progress bar one, i.e. set the progress to one, then two, (up to 100) to simulate % completion, it works well if I don't change the color. However, as you know, on some phones, the default resource color for the progress bar is green, some is orange, I want the color to be green on all devices, so in the progress bar attribute, I set progressDrawable (suggested by most of the answers on Stackoverflow) to the following xml file

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
 <corners android:radius="5dip" />
 <gradient
  android:startColor="#4CC417"
  android:centerColor="#4CC417"
  android:centerY="0.75"
  android:endColor="#4CC417"
  android:angle="270"
/>
</shape>

If I do that the progress bar now just displays the whole progress (i.e. final percentage , 100), you don't see the animation from 0 to whatever percentage.

1. Is there a way to just change the default color of the progress bar, and still have the default animation?

2. If it not possible, does this mean I have to do my own animation? If so, can someone give me a snippet on how to have my own animation to mimic the progress bar?

Answer 1

The progress bar drawable must have two items with ids "background" and "progress", optionally a third one, "secondaryProgress". Take a look at what's here: https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable/progress_horizontal.xml

In your case, the drawable would look like this:

<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/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#4CC417"
                        android:centerColor="#4CC417"
                        android:centerY="0.75"
                        android:endColor="#4CC417"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>

</layer-list>

Also the "clip" element is important, because using it it's possible for the system to clip the "progress" shape. See http://developer.android.com/reference/android/graphics/drawable/ClipDrawable.html.