Android seekbar customize

Question

I am trying to customize and android seekbar (using API 17) so that the whole progress bar line is blue.

I have created the following XML in res/drawable:

draw_seekbar_settings.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <clip>
            <shape
                    android:shape="line">
                <stroke
                        android:color="@color/progressFxBar"
                        android:width="2dp"
                        />
            </shape>
        </clip>
    </item>
</selector>

and

<SeekBar
android:id="@+id/t_seekbar"
android:layout_width="220dp"
android:layout_height="35dp"
android:layout_centerHorizontal="true"
android:max="100"
android:progress="50"
android:progressDrawable="@drawable/draw_seekbar_settings"

The problem is only half the progress bar is blue, the other half doesn't have any colour whatsoever.

I would like to get this image Instead I am getting this

Answer 1

change the draw_seekbar_settings.xml as follows:

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

    <!-- Define the background properties like color etc -->
    <item android:id="@android:id/background">
    <shape
                android:shape="line">
            <stroke
                    android:color="@color/progressFxBar"
                    android:width="2dp"
                    />
   </shape>
   </item>

  <!-- Define the progress properties like start color, end color etc -->
  <!-- if you want to change the progress edit following -->
  <item android:id="@android:id/progress">
    <clip>
        <shape>
            <gradient
                android:startColor="#007A00"
                android:centerColor="#007A00"
                android:centerY="1.0"
                android:endColor="#06101d"
                android:angle="270"
            />
        </shape>
    </clip>
    </item>
</layer-list>