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

我自己找到了解决方案。

<强> SOLUTION：

我刚刚在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>