向按钮添加彩色阴影

时间:2018-07-10 12:44:42

标签: android shadow

我需要使用“ from zelplin”这些属性为按钮添加阴影:

enter image description here

这是设计

enter image description here

我尝试了这段代码

<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>

但不起作用,其他属性“模糊”和“传播”如何为按钮设置它们。

谢谢。

3 个答案:

答案 0 :(得分:1)

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>

enter image description here

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" />

设计按钮:

enter image description here

答案 1 :(得分:1)

使用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"/>

输出是

enter image description here

答案 2 :(得分:0)

感谢塔拉斯,我有解决方案。您可以使用此library为按钮创建彩色阴影。只需将您的视图元素放在阴影布局内即可。当然,基本布局是ConstraintLayout。 某些代码段

parent observable solution

按钮形状:

 <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>

结果: