android - Android 中搜索栏的自定义缩略图

Question

我想为搜索栏创建一个自定义缩略图，应该如下所示:

一个解决方案可能是 this one ，其中png图片用于绘制拇指。

我相信应该可以只使用 xml，因为它与这个拇指非常相似:

拇指.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>

只需要添加第二个边框(周围有白色描边)，这样我就可以跳过管理不同屏幕分辨率(hdpi/mdpi/xhdpi/xxhdpi)的所有图片。

我尝试了“椭圆形”和“环形”形状的不同组合，但无法获得所需的结果。你怎么做到的？

Answer 1

我无法找到仅使用 xml 的解决方案，这就是为什么我在 this answer 的帮助下使用图片来解决这个问题的原因:

1. 创建了拇指图像 seekbar_thumb_icon.png 并将其以不同分辨率保存在 res/drawable-* map (hdpi/mdpi/xhdpi/xxhdpi ).

2. 为 SeekBar 指定了“android:thumb="@layout/seekbar_thumb":

<项目>
<形状>
    <尺寸
        机器人:高度=“30dp”
        android:width="30dp"/>

    

其他样式:

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