如何为按钮添加模糊的阴影?
How to add a blurred drop shadow to a button?
我需要为我的按钮添加模糊阴影:
我尝试使用图层列表创建背景 xml 可绘制,但它看起来不像模糊。
<?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 的按钮后面使用背景元素,但它使用了很多资源,我无法创建选择器来在悬停或单击时更改背景。
我需要为按钮设置单个背景文件,并使用选择器更改 hover/click 上的模糊和渐变。
有什么想法可以用 Android SDK 实现这样的效果吗?
更新 1
谢谢大家的回答,但我不是问如何创建渐变。我已经这样做了。我需要创建模糊的阴影。
Graident 可以做到
<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"/>
创建可绘制对象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>
创建另一个 drawable 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>
希望对您有所帮助。
好吧,我找到了解决方案:我们需要通过此 generator 创建带有模糊阴影的 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 模糊阴影的可绘制对象来创建选择器。
我将其添加为可绘制背景(灰色投影):
<!-- 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 的 height/width/padding 足够大以包含阴影 3dp 以上(对于从 #3f000000 到 #1f000000 的所有颜色为 1dp+1dp+1dp)。
我需要为我的按钮添加模糊阴影:
我尝试使用图层列表创建背景 xml 可绘制,但它看起来不像模糊。
<?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 的按钮后面使用背景元素,但它使用了很多资源,我无法创建选择器来在悬停或单击时更改背景。
我需要为按钮设置单个背景文件,并使用选择器更改 hover/click 上的模糊和渐变。 有什么想法可以用 Android SDK 实现这样的效果吗?
更新 1
谢谢大家的回答,但我不是问如何创建渐变。我已经这样做了。我需要创建模糊的阴影。
Graident 可以做到
<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"/>
创建可绘制对象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>
创建另一个 drawable 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>
希望对您有所帮助。
好吧,我找到了解决方案:我们需要通过此 generator 创建带有模糊阴影的 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 模糊阴影的可绘制对象来创建选择器。
我将其添加为可绘制背景(灰色投影):
<!-- 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 的 height/width/padding 足够大以包含阴影 3dp 以上(对于从 #3f000000 到 #1f000000 的所有颜色为 1dp+1dp+1dp)。