Custom seekbar (thumb size, color and background)

All done in XML (no .png images). The clever bit is border_shadow.xml.

All about the vectors these days...

Screenshot:

This is your SeekBar (res/layout/???.xml):

SeekBar

<SeekBar    android:id="@+id/seekBar_luminosite"    android:layout_width="300dp"    android:layout_height="wrap_content"            android:progress="@integer/luminosite_defaut"    android:progressDrawable="@drawable/seekbar_style"    android:thumb="@drawable/custom_thumb"/>

Let's make it stylish (so you can easily customize it later):

style

res/drawable/seekbar_style.xml:

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >    <item         android:id="@android:id/background"         android:drawable="@drawable/border_shadow" >    </item>    <item         android:id="@android:id/progress" >         <clip             android:drawable="@drawable/seekbar_progress" />    </item></layer-list>

thumb

res/drawable/custom_thumb.xml:

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item>        <shape android:shape="oval">            <solid android:color="@color/colorDekraOrange"/>            <size                android:width="35dp"                android:height="35dp"/>        </shape>    </item>   </layer-list>

progress

res/drawable/seekbar_progress.xml:

<?xml version="1.0" encoding="utf-8"?><layer-list     xmlns:android="http://schemas.android.com/apk/res/android" >    <item         android:id="@+id/progressshape" >        <clip>            <shape                 android:shape="rectangle" >                <size android:height="5dp"/>                <corners                     android:radius="5dp" />                <solid android:color="@color/colorDekraYellow"/>                    </shape>        </clip>    </item></layer-list>

shadow

res/drawable/border_shadow.xml:

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">           <item>              <shape>             <corners                 android:radius="5dp" />            <gradient                android:angle="270"                android:startColor="#33000000"                android:centerColor="#11000000"                android:endColor="#11000000"                android:centerY="0.2"                android:type="linear"            />                  </shape>     </item></layer-list>

• First at all, use android:splitTrack="false" for the transparency problem of your thumb.

• For the seekbar.png, you have to use a 9 patch. It would be good for the rounded border and the shadow of your image.

No shadow and no rounded borders in the bar

You are using an image so the easiest solution is row your boat with the flow,

You cannot give heights manually,yes you can but make sure it gets enough space to show your full image view there

• easiest way is use android:layout_height="wrap_content" for SeekBar
• To get more clear rounded borders you can easily use the same image that you have used with another color.

I am no good with Photoshop but I managed to edit a background one for a test

_{seekbar_brown_to_show_progress.png}

<SeekBar    android:splitTrack="false"   // for unwanted white space in thumb    android:id="@+id/seekBar_luminosite"    android:layout_width="250dp"   // use your own size    android:layout_height="wrap_content"    android:minHeight="10dp"    android:minWidth="15dp"    android:maxHeight="15dp"    android:maxWidth="15dp"    android:progress="50"    android:progressDrawable="@drawable/custom_seekbar_progress"    android:thumb="@drawable/custom_thumb" />

custom_seekbar_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:id="@android:id/background"        android:drawable="@drawable/seekbar" />    <item android:id="@android:id/progress">        <clip android:drawable="@drawable/seekbar_brown_to_show_progress" />    </item></layer-list>

custom_thumb.xml is same as yours

Finally android:splitTrack="false" will remove the unwanted white space in your thumb

Let's have a look at the output :