Android：自定义seekbar进度可绘制对象呈现不正确

Question

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.

Answer 1

It turns out there were several things at play here.

1) I used 9-patch images for the seekBar background and progress drawables. However, I did not know that 9-patch images also have, apart from the stretch lines at the top and left edges, padding lines at the right and bottom edges. These define the content area of the image, and the area left automatically becomes the padding area (ie the non-content area counts towards the padding of the view for which this image will be used as background). Also, if no padding lines are specified, android uses the stretch lines as padding lines.

2) In a layer-list, the padding of items stacks up. This means that if the first item in a layer-list has some padding, this padding will add up to the padding of all items after it, the second item's padding adds up to padding of all items below it, and so on.

So in my case, the 9-patch image used as seekBar background (first item in the layer-list) got some unintended padding (because stretch lines were being used as padding lines), and the seekBar progress drawable got this padding added to its own unintended padding (again, since it was a 9-patch) which caused it to be displayed below the background.

To correct this, I changed the 9-patch images and set the padding lines to their full length ie I defined the entire image as the content area. There was no other option, as any padding would lead to twice the padding for the progress drawable, displacing it from its intended position (which is exactly above the background drawable).