Custom SeekBar Drawable Android

Question

I want to personalise the default Android seekbar to:

enter image description here

I read about nine patch image and created 6 png images. The first three are for the gray progress bar (progressDrawable), as shown below:

Right image
Center image
Left image

The result should be:

enter image description here

The blue images represent the progress and are as follows:

Right image
Center image
Left image

And the thumb is as follows:

enter image description here

My question is, how can I use nine patch image to generate the custom seekbar exactly as the first picture and how can I apply this to my seekbar?

I suggest you examine the drawables used by the framework itself. You can find them in your android sdk directory: `android-sdk-dir/platforms/platform-XX/data/res/drawable-*dpi`. Look for nine-patch images named scrubber_track*.9.png, scrubber_primary*.9.png, scrubber_secondary*.9.png, and scrubber_control*.9.png (* is wildcard) — Karakuri, Aug 07 '13 at 06:19
you can combine images 1,2 and 3 into one nine patch drawable — pskink, Aug 07 '13 at 06:40
@Dimitri What made you close that question "Count number..."? - Of course the code on http://pastie.org/private/lbwwr0niv597wugflv4a produces wrong output. You emit text using the current month/year, which is incorrect. On a change, you must emit the **previous** year/month. And don't forget to emit text **after the loop**! — laune, Mar 03 '15 at 08:09

boburShox · Accepted Answer · 2013-08-07T06:59:32.610

16

I think it shouldn't be complex. You don't have to make 6 images to fulfill your needs. Just create 2 nine-patches for background, progress. And thumb.png. Here is your XML:

<SeekBar
  android:id="@+id/my_seekbar"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:progressDrawable="@drawable/seekbar_progress"
  android:thumb="@drawable/thumb">

in your seekbar_progress:

 <?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>

Do remember that your thumb should have blank space on top when creating so it looks like you wanted. Hope this helps.

edited Aug 07 '13 at 06:59

answered Aug 07 '13 at 06:54

boburShox

2,630
5
23
35

this is `progress` - blue image in your case – boburShox Aug 07 '13 at 07:08
thank you i will try and revert back. also if i put space with the thumb it will create extra space @top and also at bottom i tried this before – Dimitri Aug 07 '13 at 07:11
have a look at [this](http://stackoverflow.com/questions/12099321/android-seekbar-with-custom-thumb?rq=1). You'll understand what I mean. – boburShox Aug 07 '13 at 07:15
1

The blank space is not needed (anymore?) since there is another attribute android:thumbOffset to place the thumb outside of the track. – muetzenflo Apr 29 '16 at 12:13

score 8 · Answer 2 · edited Mar 25 '16 at 18:00

You can use a custom seekbar using Java code ... and add layer list as the drawables ... this piece of code will help you I hope.

1.LayerList drawable

<layer-list 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
        android:id="@android:id/background">
        <nine-patch 
            android:src="@drawable/your_nine_patch_image"
            android:tileMode="repeat">
        </nine-patch>
    </item>
    <item 
        android:id="@android:id/progress">
        <layer-list 
            xmlns:android="http://schemas.android.com/apk/res/android" >
            <item>
                <clip >
                    <bitmap 
                        xmlns:android="http://schemas.android.com/apk/res/android"
                        android:src="@drawable/clipimage_for_progress"
                        android:tileMode="repeat"/>
                </clip>
            </item>
        </layer-list>
    </item>
</layer-list>

This will be your customSeekbar class and you can use this custom seekbar in your app

public class CustomSeekbar {
    public CustomSeekbar(Context context) {
        super(context);
        setCustomUI();
    }

    public CustomSeekbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        setCustomUI();
    }

    public CustomSeekbar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setCustomUI();
    }

    void setCustomUI() {

        this.setProgressDrawable(getResources().getDrawable(
                R.drawable.yourBackground));
    }
}

score 1 · Answer 3 · answered Aug 07 '13 at 06:49

1) Go to AndroidSDK -> tools and run draw9patch.bat

you will see the black window

2) drag your picture into the window and start 9 patch:

start patch around your pictures

3) now go to File menu and click Save 9-patch...

Final tip : your picture must be .PNG format and just contains Content not free space around it. for example i saved your picture in my computer and saw there is a lot of unused space bellow the blue part of your picture.

Now Apply to your seekbar :

Just follow the link as well

Create Custom Slide Bar

I'm sorry; i don't have enough reputation to insert picture

Custom SeekBar Drawable Android

3 Answers3

Linked