Custom thumb for a seekbar in Android -


i want create custom thumb seekbar should this:

enter image description here

one solution this one, png pictures used draw thumb.

i believe should possible use xml only, since similar 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> 

enter image description here

just need add second border (white stroke around), can skip manage pictures different screen resolutions (hdpi/mdpi/xhdpi/xxhdpi).

i have tried different combination shapes "oval" , "ring", not result required. how can make it?

i not manage find solution xml, why used picture solve this, little this answer:

  1. created image of thumb seekbar_thumb_icon.png , saved in different resolutions in res/drawable-* maps (hdpi/mdpi/xhdpi/xxhdpi).

  2. specified "android:thumb="@layout/seekbar_thumb" 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> 

enter image description here

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> 

Comments

Popular posts from this blog

How has firefox/gecko HTML+CSS rendering changed in version 38? -

javascript - Complex json ng-repeat -

jquery - Cloning of rows and columns from the old table into the new with colSpan and rowSpan -