Using gradient for Android SeekBar progressDrawable

Question

Currently I'm working on custom SeekBar with gradient like this one. I've tried to implement seekbar with my own styles. So I did like that:

...
<style name="GreenSeekBar.Static.NoThumb">
    <item name="android:progressDrawable">@drawable/sq_seekbar_clipped</item>
    <item name="android:thumb">@null</item>
</style>`

And here's sq_seekbar_clipped.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="2dp"/>
            <gradient
                android:endColor="#00c492"
                android:startColor="#e8e8e8" />
        </shape>
    </clip>
</item>

<item android:id="@android:id/secondaryProgress">
    <shape android:shape="rectangle">
        <size android:height="3dp" />
        <solid android:color="@color/transparent" />
    </shape>
</item>
</layer-list>

So, everything worked just great except one thing - I received this:

So, as you can see from what I've got - gradient is cropped. I need gradient to be from 0 to [progress_value]. Is that possible?

Is there any way to draw gradient like on the 1st (top link) image?

Answer 1

You only need to change

<clip>

to

<scale android:scaleWidth="100%">

And here's sq_seekbar_clipped.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <shape>
                <corners android:radius="2dp"/>
                <gradient
                    android:endColor="#00c492"
                    android:startColor="#e8e8e8"/>
            </shape>
        </scale>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <shape android:shape="rectangle">
            <size android:height="3dp"/>
            <solid android:color="@color/android:transparent"/>
        </shape>
    </item>
</layer-list>