Android: Custom seekbar progress drawable is rendered incorrectly

Android: Custom seekbar progress drawable is rendered incorrectly

I intend to make a custom seekbar, with my own set of images for the
background and progress drawables. I've made 2 9-patch images, one each
for the background and progress drawables. Here is the code I am using for
the progressDrawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@+id/background"
android:drawable="@drawable/experience_seekbar_background" />
<item android:id="@+id/progress">
<clip
android:clipOrientation="horizontal"
android:gravity="left|top"
android:drawable="@drawable/experience_seekbar_progress" />
</item>
</layer-list>
Also, here is the xml definition of my seekbar:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp" >
<SeekBar
android:id="@+id/experienceSeekBar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:max="2"
android:progress="1"
android:progressDrawable="@drawable/experience_seekbar" />
</LinearLayout>
The problem is, the progress portion of the drawable is drawn below the
background portion, instead of directly overlapping it.
Expected/Desired: (http://i.imgur.com/C27dQZK.png)
Actual Output: (http://i.imgur.com/ftNlMMI.png)
Having gone through tens of custom seekbar tutorials, I am still stuck at
what could I possibly be doing wrong here. It might be something very
trivial, but I am just not able to spot it.