Adding a colored shadow to a Button

Question

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

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.

No, I used drawables for buttons like this, and add elevations in other cases. — M.SH, Sep 25 '18 at 12:29
No, As I said in the above comment I used drawables and grey shadows — M.SH, Oct 08 '18 at 12:47
Hi @M.SH could you post your final code? I encounter the same need, and the elevation doesn't seem to work to add a shadow... — Gold.strike, Feb 25 '19 at 17:35
Really sorry, But I can't figure it out So, I used some drawables to solve this case and use default elevation in other cases. — M.SH, Feb 25 '19 at 23:11
I figured it out. Take a look here, think that's what you were searching for: https://stackoverflow.com/questions/68583069/how-to-put-shadow-with-gradient — Ole Pannier, Jul 30 '21 at 00:38

score 3 · Answer 1 · edited Aug 12 '21 at 13:54

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

Result:

score 2 · Answer 2 · answered Jun 02 '22 at 13:04

you need to add this line of code inside button tag

android:stateListAnimator="@null"

because button override any evelation value you set by passing null to android:stateListAnimator it will remove stateList attrs

for color you can add this line to show colored shadow

android:outlineSpotShadowColor="#303030"

check answer

Android elevation not showing shadow on Button

score 1 · Answer 3 · edited Aug 12 '21 at 13:55

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

score 1 · Answer 4 · answered Jul 10 '18 at 12:59

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,

Adding a colored shadow to a Button

4 Answers4

Linked