Custom Seekbar with empty space separator

Question

I have been trying to make custom Seekbar,but I couldn't make it properly. Please watch image and guide me how to do it.

I have done up to here please watch my progress in 2 image.But I have big white space columns around Seekbar. I have followed this question David answer from Android: SeekBar with custom drawable .

I designed David Medenjak answer from this question please watch it ..https://stackoverflow.com/questions/34932963/android-seekbar-with-custom-drawable — Lokesh, Nov 20 '17 at 14:33
Refer this https://www.android-examples.com/create-custom-seekbar-in-android-example-tutorial/ — Kuls, Nov 20 '17 at 14:35
You can ask your designer who can create whole background image as a strip like https://www.android-examples.com/wp-content/uploads/2016/03/progress_one.png — Kuls, Nov 20 '17 at 14:40
have a look at this http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples — Mohamed Mohaideen AH, Nov 20 '17 at 14:42

score 0 · Answer 1 · answered Nov 20 '17 at 14:42

All you need to do is to add custom drawable for your Seekbar. You need Seekbar background image and thumb image which you can store into Drawable folder.

Create custom xml as below

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

     <item
     android:id="@+id/SecondaryProgress"
     android:drawable="@drawable/progress_two"/>

</layer-list>

Use above custom xml file into Seekbar

 <SeekBar
 android:id="@+id/seekBar1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_centerVertical="true"
 android:thumb="@drawable/drag_thumb"
 android:progressDrawable="@layout/custom_seekbar_layout"
 android:max="100" />

Custom Seekbar with empty space separator

1 Answers1