Search code examples
androidseekbarandroid-slider

Custom seekbar (thumb size, color and background)

I would like to have this seekbar in my Android project : enter image description here

This is my seekbar :

<SeekBar
        android:id="@+id/seekBar_luminosite"
        android:layout_width="@dimen/seekbar_width"
        android:layout_height="@dimen/seekbar_height"
        android:minHeight="15dp"
        android:minWidth="15dp"
        android:maxHeight="15dp"
        android:maxWidth="15dp"
        android:progress="@integer/luminosite_defaut"
        android:progressDrawable="@drawable/custom_seekbar"
        android:thumb="@drawable/custom_thumb" />

This is my custom_thumb.xml :

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <gradient
        android:angle="270"
        android:endColor="@color/colorDekraOrange"
        android:startColor="@color/colorDekraOrange" />

    <size
        android:height="35dp"
        android:width="35dp" />

</shape>

This is my custom_seekbar.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="@color/colorDekraYellow" />
    </item>

</layer-list>

This is my seekbar.png (background) :

enter image description here

And this is the result : enter image description here

No shadow and no rounded borders in the bar...

I really not understand how I can do.

Solution

    • 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.