给按钮添加有色阴影

Question

我需要为这个按钮添加一个阴影，具有以下“来自 Zeplin”的属性：

这是设计样式：

我尝试了这段代码：

<Button
        android:id="@+id/btn_sign_in"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_marginTop="35dp"
        android:background="@drawable/auth_button_shape"
        android:shadowColor="#41ff4800"
        android:shadowDx="0"
        android:shadowDy="8"
        android:text="@string/sign_in"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        android:textSize="14sp" />

auth_button_shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ff7c44" />
<corners android:radius="100dp" />
</shape>

但是其他属性“模糊”和“扩展”无法生效。我该如何为按钮设置它们？

谢谢。

- M.SH

---

你解决了你的问题吗？ - Roman Soviak

不，我使用可绘制对象来创建按钮，然后在其他情况下添加高程。 - M.SH

不，正如我在上面的评论中所说，我使用了可绘制对象和灰色阴影。 - M.SH

嗨 @M.SH，你能发一下你的最终代码吗？我遇到了同样的需求，但是高程似乎不能添加阴影... - Gold.strike

非常抱歉，但我无法解决这个问题。因此，我使用了一些可绘制对象来解决这个问题，并在其他情况下使用默认的高程。 - M.SH

Answer 1

感谢Taras的帮助，我有了解决方案。您可以使用这个库为按钮创建彩色阴影。只需将视图元素放置在阴影布局中即可。当然，基本布局是ConstraintLayout。 以下是一些示例代码：

 <com.gigamole.library.ShadowLayout
    android:id="@+id/shadowLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:sl_shadow_angle="90"
    app:sl_shadow_color="@color/light_orange_color"
    app:sl_shadow_distance="2dp"
    app:sl_shadow_radius="7dp"
    app:sl_shadowed="true">

    <ImageView
        android:id="@+id/ivYourImageName"
        android:layout_width="144dp"
        android:layout_height="44dp"
        android:background="@drawable/button_shape"
        android:foregroundGravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />

</com.gigamole.library.ShadowLayout>

按钮形状：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="2dp" />
            <gradient android:angle="180" android:endColor="#ffc349" android:startColor="#ff8006" />
        </shape>
    </item>
</selector>

结果：

这是一个图片链接，点击可查看图片。

- Roman Soviak

Answer 2

你需要在按钮标签内添加这行代码。

android:stateListAnimator="@null"

因为按钮通过将null传递给android:stateListAnimator来覆盖您设置的任何高程值，因此它将删除stateList属性。

对于颜色，您可以添加此行以显示有色阴影。

android:outlineSpotShadowColor="#303030"

检查答案

Android按钮的高度（elevation）未显示阴影

- Noah Mohamed

Answer 3

bg_test.xml :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="-6dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="-6dp"
        android:right="-6dp"
        android:top="-6dp">

    </item>

    <item
        android:bottom="-6dp"
        android:left="-6dp"
        android:right="-6dp"
        android:top="-6dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <stroke
                android:width="@dimen/_1sdp"
                android:color="@color/yellow" />

        </shape>
    </item>
</layer-list>

Activity.xml 代码：

<Button
    android:layout_width="@dimen/_150sdp"
    android:layout_height="48dp"
    android:layout_marginTop="10dp"
    android:text="@string/sign_In"
    android:layout_marginLeft="@dimen/_80sdp"
    android:layout_gravity="center"
    android:textSize="14sp"
    android:background="@drawable/bg_test" />

设计按钮:

- Ali

Answer 4

使用 AppCompatButton 替代 Button，使用 elevation 属性，并使用 android:backgroundTint 来设置按钮颜色。

 <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="sign_in"
        android:backgroundTint="#ccd3e0ea"
        android:elevation="4dp"/>

输出结果是，

- Muhammed Haris