[英]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 上的背景或单击。
我需要为按钮提供单个背景文件,并使用选择器在悬停/单击时更改模糊和渐变。 任何想法如何用 Android SDK 达到这样的效果?
更新 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 模糊阴影的此类可绘制对象来创建选择器。
我将此添加为背景可绘制对象(灰色阴影):
<!-- 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 的所有 colors 为 1dp+1dp+1dp)。
您可以通过 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"/>
创建一个可绘制的“ round_corner.xml ”
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="360"
android:startColor="#8A88F3"
android:endColor="#B96AE8"
android:type="linear" />
<corners android:bottomLeftRadius="24dp"
android:bottomRightRadius="24dp"
android:topLeftRadius="24dp" android:topRightRadius="24dp" />
</shape>
</item>
</selector>
在Activity中设置xml中的按钮
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<Button
android:id="@+id/btn_language_select_save"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:layout_marginTop="20dp"
android:background="@drawable/round_corner_spiner"
android:paddingLeft="130dp"
android:paddingRight="130dp"
android:text="Vlad[enter image description here][1]"
android:textColor="@android:color/white"
android:textSize="20sp"
android:visibility="visible" />
</RelativeLayout>
有用的链接
希望这对你有所帮助
我为我的cardview做了,这对我有用:
<item name="cardElevation">8dp</item>
<item name="cardUseCompatPadding">true</item>
创建可绘制阴影.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>
创建另一个可绘制背景。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>
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.