Adding a colored shadow to a Button

Question

I need to add a shadow to a Button with these attributes "from zelplin":

and this is the design

I tried this code

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

But not worked and the other attributes "Blur" and "Spread" How I can set them for the button.

Thanks.

Answer 1

use AppCompatButton instead of Button,use elevation and use android:backgroundTint for button colour.

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

output is,

Answer 2

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>

Activity.xml code:

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

Design Button :

Answer 3

Thanks to Taras I have solution. You can use this library for creating colored shadow to button. Just place your view element inside shadow layout. Of course basic layout is ConstraintLayout. Some pieces of code for example

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

Button shape :

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

Result: