pollice su misura per un SeekBar in Android

Question

Voglio creare un pollice personalizzato per SeekBar che dovrebbe apparire come segue:

Una soluzione potrebbe essere this one, dove le immagini PNG sono utilizzati per disegnare il pollice.

Credo che dovrebbe essere possibile utilizzare solo xml, dal momento che è molto simile a questa pratica:

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> 

solo bisogno di aggiungere secondo bordo (tratto bianco intorno), in modo che io possa saltare per gestire tutte le immagini per diverse risoluzioni dello schermo (hdpi/mdpi/xhdpi/xxhdpi).

Ho provato una combinazione diversa con forme "ovale" e "anello", ma non è stato possibile ottenere il risultato richiesto. Come puoi farcela?

Answer 1

non riuscivo a trovare una soluzione con un solo XML, è per questo che ho usato una foto per risolvere questo problema, con un piccolo aiuto da this answer:

1. creato un'immagine del pollice seekbar_thumb_icon.png e salvati in diverse risoluzioni nelle mappe res/drawable-* (hdpi/mdpi/xhdpi/xxhdpi).

2. specificato "android: pollice =" @ Layout/seekbar_thumb" per 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> 

Altri stili:

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