Android seekbar set custom style using nine-patch images

Question

I am trying to create a custom-styled seekbar. I have two nine-patch images one is a gray stretching bar search_progress.9.png (background color) and the other is a green stretching bar search_progress_bar.9.png (foreground color).

I use this xml as my seekbar's progressDrawable:

<?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/search_progress"></item>
    <item android:id="@android:id/progress" android:drawable="@drawable/search_progress_bar"></item>
</layer-list>

My problem is that, instead of the bar filling up to my thumb position, the entire bar is green all the time (search_progress_bar image). How can I get the same effect as Android's progress_horizontal.xml with my own images (I do not want to use shapes to draw my bar)?

score 16 · Answer 1 · answered Jun 19 '12 at 05:37

e_x_p's version works just fine but the even simpler version 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">
        <nine-patch android:src="@drawable/progressbar_bg" android:dither="true"/>
    </item>
    <item android:id="@android:id/progress">
        <clip xmlns:android="http://schemas.android.com/apk/res/android"
            android:clipOrientation="horizontal"
            android:gravity="left">
            <nine-patch android:src="@drawable/progressbar_status" android:dither="true"/>
        </clip>
    </item>

</layer-list>

It is also work for me while i used nine patch images. thanks! — Hasmukh, Dec 19 '13 at 10:57

score 11 · Accepted Answer · answered Aug 26 '11 at 06:33

I solved this problem using a ClipDrawable. This is what worked for me:

Set @drawable/search_progress_drawable as the progressDrawable.

search_progress_drawable.xml:

<?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/search_progress"></item>
    <item android:id="@android:id/progress" android:drawable="@drawable/search_progress_clip"></item>
</layer-list>

search_progress_clip.xml:

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/search_progress_bar"
    android:clipOrientation="horizontal"
    android:gravity="left">
</clip>

Android seekbar set custom style using nine-patch images

2 Answers2

Linked