Custom thumb for a seekbar in Android

Question

I want to create a custom thumb for seekbar that should look like this:

One solution could be this one, where png pictures are used to draw the thumb.

I believe that it should be possible to use xml only, since it is very similar to this thumb:

thumb.xml

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

    <size android:height="30dp" android:width="30dp"/>
    <stroke android:width="18dp" android:color="#882EA5DE"/>
    <solid android:color="#2EA5DE" />
    <corners android:radius="1dp" />

</shape>

Just need to add second border (white stroke around), so that I can skip to manage all that pictures for different screen resolutions (hdpi/mdpi/xhdpi/xxhdpi).

I have tried different combination with shapes "oval" and "ring", but could not get the result required. How can you make it?

Back

Answer 1

I could not manage to find a solution with just xml, that is why I used a picture to solve this, with a little help from this answer:

1. Created an image of the thumb seekbar_thumb_icon.png and saved it in different resolutions in res/drawable-* maps (hdpi/mdpi/xhdpi/xxhdpi).

2. Specified "android:thumb="@layout/seekbar_thumb" for SeekBar:

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

<item>
<shape>
    <size
        android:height="30dp"
        android:width="30dp" />

    <solid android:color="@android:color/transparent" />
</shape>
</item>
<item android:drawable="@drawable/balance_icon_48px"/>

</layer-list>

Other styles:

<SeekBar
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@layout/seekbar_style"
android:thumb="@layout/seekbar_thumb" />

seekbar_style.xml

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

    <item android:id="@android:id/background"
        android:drawable="@layout/seekbar_background" />

    <item android:id="@android:id/progress">
        <clip android:drawable="@layout/seekbar_progress" />
    </item>
</layer-list>

seekbar_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:shape="line">

   <stroke android:width="2dp" android:color="#868686"/>
   <corners android:radius="1dp" />
</shape>

seekbar_progress.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:shape="line">

   <stroke android:width="2dp" android:color="#ffffff"/>
   <corners android:radius="1dp" />
</shape>

Back

Is this working ? android:thumb="@layout/seekbar_thumb" ?? – Caviness