Custom finger for Android search

I want to create a custom search finger, which should look like this:

enter image description here

One solution might be this one , where png images are used to draw the thumb.

I believe that only xml can be used, 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> 

enter image description here

You just need to add a second border (white passage around) so that I can skip to manage all these images for different screen resolutions (hdpi / mdpi / xhdpi / xxhdpi).

I tried a different combination with the oval and ring shapes, but could not get the desired result. How can you do this?

+6
source share
1 answer

I was not able to find a solution using only xml, so I used a photo to solve this problem, helping this answer a bit:

  • I created the seekbar_thumb_icon.png image seekbar_thumb_icon.png and saved it in different resolutions in the res/drawable-* maps (hdpi / mdpi / xhdpi / xxhdpi).

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

code>

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> 
+1
source

Source: https://habr.com/ru/post/989753/


All Articles