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?

score 9 · Answer 1 · edited Feb 08 '19 at 12:16

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>

Do you have any link explaining how does `android:scaleWidth` work? — Vadim Kotov, Feb 08 '19 at 12:23

score 0 · Answer 2 · answered Mar 24 '15 at 14:12

You should set your gradient in the secondary progress and solid color in progress.

Something like this:

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

  <item android:id="@android:id/progress">
  <clip>
     <shape>
         <size android:height="3dp" />
         <solid android:color="@color/transparent" />

     </shape>
  </clip>
 </item>

 <item android:id="@android:id/secondaryProgress">
  <shape android:shape="rectangle">
       <corners android:radius="2dp"/>
         <gradient
             android:endColor="#00c492"
             android:centerColor=""
             android:startColor="#e8e8e8" />
   </shape>
 </item>
 </layer-list>

Also, provide some center color to have a clear view.

Nope, that doesn't work. I should better look for some kind of custom view with its own onDraw() method. — Paul Freez, Mar 26 '15 at 09:45

score 0 · Answer 3 · answered Mar 22 '22 at 13:40

I edited your code and now it works. You don't need any styles for this.

  <SeekBar
                        android:id="@+id/sb_saturation"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:maxHeight="4dp"
                        android:minHeight="4dp"
                        android:progressDrawable="@drawable/style_seekbar_saturation" />

and

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

    <item android:id="@android:id/progress">
        <shape>
            <corners android:radius="2dp" />
            <gradient
                android:endColor="@color/custom_green"
                android:startColor="@android:color/black" />
        </shape>
    </item>

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

Using gradient for Android SeekBar progressDrawable

3 Answers3