进度部分上的 Seekbar 外阴影

Question

我在 Android 中自定义了一个搜索栏，试图只获取填充部分的内部和外部阴影（底部）。

我想要这样的结果：

此刻，我创建了：

• 圆角边框
• 渐变效果
• 自定义拇指
• 内阴影（在进度的顶部，非常小）

我无法创建外部阴影（在进度的底部）。

这是我的代码：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <size android:height="16dp"/>
            <corners android:radius="20dp"/>
            <solid android:color="@color/background_unselected_gray"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <layer-list>
                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="20dp"
                            android:topLeftRadius="20dp"/>
                        <gradient
                            android:endColor="@color/button_red_gradient_bottom"
                            android:startColor="@color/button_red_gradient_top"/>
                    </shape>
                </item>

                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="18dp"
                            android:topLeftRadius="18dp"/>
                        <gradient
                            android:angle="270"
                            android:centerColor="@color/horizontal_seekbar_inner_shadow_center"
                            android:centerY="0.1"
                            android:endColor="@color/transparent"
                            android:startColor="@color/horizontal_seekbar_inner_shadow_top"/>
                    </shape>
                </item>
            </layer-list>
        </scale>
    </item>
</layer-list>

Answer 1

我自己找到了解决方案。

解决方案：

我刚刚将另一个项目添加到 layer-list 的 id:progress 项目中：

• 从深灰色渐变到透明以模拟阴影
• 使用bottom 属性的填充

这是添加项目的代码：

<item android:bottom="-3dp">
      <shape>
          <corners
              android:bottomLeftRadius="20dp"
              android:topLeftRadius="20dp"/>
                  <gradient
                      android:angle="270"
                      android:centerColor="@color/horizontal_seekbar_outer_shadow_center"
                      android:centerY="0.75"
                      android:endColor="@color/transparent"
                      android:startColor="@color/horizontal_seekbar_outer_shadow_top"/>
      </shape>
</item>

我对这个项目应用了一种负填充，所以它在进度条后面。

完整代码：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <size android:height="16dp"/>
            <corners android:radius="20dp"/>
            <solid android:color="@color/background_unselected_gray"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <layer-list>
                <item android:bottom="-3dp"
                      android:left="1dp">
                    <shape>
                        <corners
                            android:bottomLeftRadius="20dp"
                            android:topLeftRadius="20dp"/>
                        <gradient
                            android:angle="270"
                            android:centerColor="@color/horizontal_seekbar_outer_shadow_center"
                            android:centerY="0.75"
                            android:endColor="@color/transparent"
                            android:startColor="@color/horizontal_seekbar_outer_shadow_top"/>
                    </shape>
                </item>

                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="20dp"
                            android:topLeftRadius="20dp"/>
                        <gradient
                            android:endColor="@color/button_red_gradient_bottom"
                            android:startColor="@color/button_red_gradient_top"/>
                    </shape>
                </item>

                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="18dp"
                            android:topLeftRadius="18dp"/>
                        <gradient
                            android:angle="270"
                            android:centerColor="@color/horizontal_seekbar_inner_shadow_center"
                            android:centerY="0.1"
                            android:endColor="@color/transparent"
                            android:startColor="@color/horizontal_seekbar_inner_shadow_top"/>
                    </shape>
                </item>
            </layer-list>
        </scale>
    </item>
</layer-list>