Custom Seekbar Drawable Android

I want to personalise the default Android seekbar to: I read about nine patch image and created 6 png images. The first three are for the gray progress bar (progressDrawable), as

Solution 1:

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-listxmlns:android="http://schemas.android.com/apk/res/android" ><itemandroid:id="@android:id/background"><nine-patchandroid:src="@drawable/progressbar_bg"android:dither="true"/></item><itemandroid:id="@android:id/progress"><clipxmlns:android="http://schemas.android.com/apk/res/android"android:clipOrientation="horizontal"android:gravity="left"><nine-patchandroid: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.

Solution 2:

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-listxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:id="@android:id/background"><nine-patchandroid:src="@drawable/your_nine_patch_image"android:tileMode="repeat"></nine-patch></item><itemandroid:id="@android:id/progress"><layer-listxmlns:android="http://schemas.android.com/apk/res/android" ><item><clip ><bitmapxmlns: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));
    }
}

Solution 3:

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