问题描述

总结问题：

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

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

到目前为止我已经尝试过：

我已经尝试过像这样创建拇指图片：

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

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

搜索栏：

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

搜索栏背景：

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

搜索栏进度：

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

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

总结

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

标签： androidandroid-layoutandroid-seekbar

使用以下代码绘制拇指：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>

android - 具有透明左右填充/边距的搜索栏拇指

问题描述

总结问题：

到目前为止我已经尝试过：

总结

解决方案

推荐阅读