【问题标题】：Seekbar thumb with transparent right and left padding/margin具有透明左右填充/边距的 Seekbar 拇指
【发布时间】：2019-10-16 19:43:03
【问题描述】：

总结问题：

您好，我想在设计中创建这样的 Seekbar：

所以拇指在左右两边都有填充/边距，两边都是圆形的。

到目前为止我所做的尝试：

我已经尝试过像这样创建缩略图：

不幸的是，我无法使用这张图片，因为我需要以编程方式更改绿点周围的黑色光晕。

这就是我完全用 XML 构建搜索栏的原因（没有 png 图像）：

搜索栏：

        <SeekBar
            android:id="@+id/player_seekbar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            style="@style/SeekBarPlayer"
            local:MvxBind="Max Duration; Progress SliderPosition, Mode=OneWay; SecondaryProgress Downloaded; Visibility(LivePlaybackToVisibility(CurrentTrack))"
            android:layout_marginTop="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/cardView" />

SeekbarBackground：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape>
      <corners android:radius="5dp" />
      <solid android:color="#3d4b58" />
    </shape>
  </item>
</layer-list>

SeekbarSecondaryProgress：

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
  <item
      android:id="@+id/progressshapesecondary" >
    <clip>
      <shape
          android:shape="rectangle" >
        <size android:height="5dp"/>
        <corners
            android:radius="5dp" />
        <solid android:color="#8883e76b"/>
      </shape>
    </clip>
  </item>
</layer-list>

SeekbarProgress：

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
  <item
      android:id="@+id/progressshape" >
    <clip>
      <shape
          android:shape="rectangle" >
        <size android:height="5dp"/>
        <corners
            android:radius="5dp" />
        <solid android:color="#83e76b"/>
      </shape>
    </clip>
  </item>
</layer-list>

它为我提供了一个这样的搜索栏：

总结

从现在开始如何实现以下搜索栏设计？

【问题讨论】：

嗨，杰瑞德！你能准确和清楚地说明这个问题吗？
嘿考希克！我用 XML 创建了搜索栏。但拇指在酒吧。我想找到一种方法来创建与图片中完全相同的拇指（左右填充）。还要在拇指旁边保持圆角。

标签： android android-layout android-seekbar

【解决方案1】：

使用以下代码绘制拇指： seekbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#8883e76b"/>
            <stroke android:color="@color/black" android:width="3dp"/>
            <size android:height="30dp" android:width="30dp"/>
        </shape>
    </item>
</selector>

使用下面的代码作为搜索栏，只需改变你想要的颜色：

<item android:id="@android:id/background">
    <shape android:shape="rectangle">
        <corners android:radius="20dp" />
        <solid android:color="@color/fofo_grey" />

    </shape>
</item>

<item android:id="@android:id/progress">

    <clip>
        <shape android:shape="rectangle">
            <corners android:radius="20dp" />
            <solid android:color="@color/signup_green" />
            <stroke
                android:width="6dp"
                android:color="@color/fofo_grey" />
        </shape>
    </clip>
</item>

【讨论】：