Editing layout of a seekbar with custom image doesn't work

Question

I need to edit the layout of a seekbar. The seekbar layout file I have:

<SeekBar
           android:id="@+id/seekBar1"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:progress="0"
           android:progressDrawable="@drawable/seek"
           android:thumb="@drawable/thumb" />

And the drawable/seek is:

<?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@android:id/background" android:drawable="@drawable/time_passivo"/>
  <item android:id="@android:id/progress" android:drawable="@drawable/time_attivo" />

  </layer-list>

I want something like this image:

But instead I get this:

Simply I use 2 images for the seek... (on png)

and thumb is another png

Edit

I tried to do it with a 9path, but it didn't solve my problem.

the 9path is:

but the seek didn't work

Answer 1

I solved the question. I didn't use the static picture, but drew it all with code

the bar:

<SeekBar android:id="@+id/seekBar1" style="@style/PowerSeekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toLeftOf="@+id/TextViewStop" android:layout_toRightOf="@+id/textViewStart" android:minHeight="6dp" android:maxHeight="6dp" android:paddingLeft="5dip" android:paddingRight="5dip" android:progress="2"
android:thumb="@drawable/thumb" />

and the style:

<!-- Seekbar player --> <style name="PowerSeekBar" parent="android:Widget.SeekBar"> <item name="android:progressDrawable">@drawable/seek</item> <item name="android:thumbOffset">0dip</item> </style>

<?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="3dip" />
         <gradient
           android:startColor="#ffcccccc"
           android:endColor="#9d9d9d"
           android:centerY="0.50"
           android:angle="270" />
      </shape>
   </item>

   <item
     android:id="@android:id/progress">
      <clip>
         <shape>
            <corners
              android:radius="3dip" />
            <gradient
              android:startColor="#ffd92034"
              android:endColor="#ffad192a"
              android:angle="270" />
         </shape>
      </clip>
   </item>
</layer-list>

thanks to all.