Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom SeekBar Drawable Android

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:

  1. Right image

    enter image description here

  2. Center image

    enter image description here

  3. Left image

    enter image description here

The result should be:

enter image description here

The blue images represent the progress and are as follows:

  1. Right image

    enter image description here

  2. Center image

    enter image description here

  3. Left image

    enter image description here

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?

like image 303
Dimitri Avatar asked Aug 07 '13 06:08

Dimitri


2 Answers

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.

like image 187
boburShox Avatar answered Sep 24 '22 00:09

boburShox


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));
    }
}
like image 44
Sreedev Avatar answered Sep 22 '22 00:09

Sreedev