如何为按钮添加模糊的投影效果？

Question

我需要在按钮上添加模糊的阴影：

我尝试使用 layer-list 的 xml drawable 创建背景，但看起来并不模糊。

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

    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners android:radius="45dp" />
            <padding
                android:bottom="2dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />

            <stroke
                android:width="6dp"
                android:color="#007879E8" />

        </shape>
    </item>
    //////   10 more items
        <item>
        <shape>
            <corners android:radius="45dp" />
            <padding
                android:bottom="2dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />

            <stroke
                android:width="6dp"
                android:color="#177879E8" />


        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <corners android:radius="45dp" />
            <stroke
                android:width="2dp"
                android:color="@color/main_purple_text_color" />
        </shape>
    </item>

</layer-list>

我还尝试过在按钮后面使用带模糊的png背景元素，但它会消耗太多资源，而且我无法创建选择器来在悬停或单击时更改背景。

我需要为按钮使用单个背景文件，并使用选择器在悬停/单击时更改模糊和渐变。有没有任何想法如何使用Android SDK实现这种效果？

更新1

谢谢大家的回答，但我不是在问如何创建渐变。我已经做到了。我需要创建模糊的投影。

- Vlad Morzhanov

---

你能用更好的方式实现吗？谢谢。 - Mohamed ALOUANE

Answer 1

我找到了解决方案：我们需要通过这个生成器创建带有模糊投影的9.png，并将其传递给包含按钮背景渐变的可绘制层列表：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/blurred_9_path_png" />
    <item>
        <shape android:shape="rectangle" android:padding="10dp">
            <corners android:radius="45dp" />
            <gradient
                android:angle="45"
                android:endColor="@color/facebook_btn_fill_grad2"
                android:startColor="@color/facebook_btn_fill_grad1"
                android:type="linear" />
            <padding
                android:bottom="0dp"
                android:left="0dp"
                android:right="0dp"
                android:top="0dp" />
        </shape>
    </item>

</layer-list> 

之后我们可以使用带有不同9.path模糊阴影的这些可绘制对象来创建选择器。

- Vlad Morzhanov

---

你在网站上放了哪些选项？ - John61590

你在网站上使用了哪些选项来创建那个？ - Jono

我也很想知道您在网站上使用了哪些选项。如果按钮的大小发生变化，如何应用阴影呢？ - Nikita Kobtsev

Answer 2

我将此作为背景可绘制物添加（灰色阴影）：

<!-- Drop Shadow Stack -->
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />
        <solid android:color="#1f000000" />
        <corners android:radius="30dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />
        <solid android:color="#2f000000" />
        <corners android:radius="30dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />
        <solid android:color="#3f000000" />
        <corners android:radius="30dp" />
    </shape>
</item>

<!-- Background -->
<item>
    <shape>
        <solid android:color="@android:color/white" />
        <corners android:radius="30dp" />
    </shape>
</item>

确保TextView的高度/宽度/填充足够大，以包含上面的阴影，其大小为3dp（从#3f000000到#1f000000的所有颜色都是1dp + 1dp + 1dp）。

- 林果皞

Answer 3

你可以通过渐变来实现它

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient 
    android:startColor="#6586F0"
    android:centerColor="#D6D6D6"
    android:endColor="#4B6CD6"
    android:angle="90"/>
<corners 
    android:radius="0dp"/>

- Shivam Oberoi

Answer 4

我为我的卡片视图做了这个，这对我有效：

<item name="cardElevation">8dp</item>
<item name="cardUseCompatPadding">true</item>

- lananh223

---

如果可能的话，您能否请提供输出。 - Abhishek Dutt

Answer 5

创建可绘制的 shadow.xml 文件。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<solid android:color="#E3D5FC" />
<corners
    android:radius="20dp"/>
<padding
    android:bottom="1dp"
    android:left="1dp"
    android:right="1dp"
    android:top="1dp" >
</padding>

创建另一个可绘制的 background.xml 文件。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/shadow" />
<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <gradient
            android:angle="0"
            android:centerColor="#9E7CEF"
            android:endColor="#B070EB"
            android:startColor="#8989F4" />
        <corners android:radius="22dp" />
        <size android:height="40dp"/>
    </shape>
</item>

并将此文件用作下面的xml。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
    android:id="@+id/img_save"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background"
    android:gravity="center"
    android:text="BUTTON"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@android:color/white"
    android:layout_centerInParent="true"/>
</RelativeLayout>

希望能有所帮助。

- Dharmishtha

---

谢谢，但它并不模糊。 - Vlad Morzhanov

要添加类似于模糊视图的阴影，您可以添加与效果完全相同的背景图像。 - Dharmishtha