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 shown below:
Right image
Center image
Left image
The result should be:
The blue images represent the progress and are as follows:
Right image
Center image
Left image
And the thumb is as follows:
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 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.
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));
}
}
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
I'm sorry; i don't have enough reputation to insert picture
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.