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?
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:
Created an image of the thumb
seekbar_thumb_icon.png
and saved it in different resolutions inres/drawable-*
maps (hdpi/mdpi/xhdpi/xxhdpi).Specified "android:thumb="@layout/seekbar_thumb" for SeekBar:
Other styles:
seekbar_style.xml
seekbar_background.xml
seekbar_progress.xml