Elevation shadow is clipped

Question

I tried to add elevation to my custom button but the result is:

As you can see the shadow is clipped. I have tried to search in StackOverflow and google and I found similar question but no answers :)

XML:

<Button    android:id="@+id/email_sign_in_button"    android:layout_width="141dp"    android:layout_height="45dp"    android:textAlignment="gravity"    android:text="@string/action_sign_in"    android:gravity="center_horizontal"    android:elevation="4dp" /> 

Here is my custom button styles.

button.xml:

<?xml version="1.0" encoding="utf-8"?>  <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item     android:state_enabled="false"     android:drawable="@drawable/button_disabled" /> <item     android:state_pressed="true"     android:state_enabled="true"     android:drawable="@drawable/button_pressed" /> <item     android:state_focused="true"     android:state_enabled="true"     android:drawable="@drawable/button_regular" /> <item     android:state_enabled="true"     android:drawable="@drawable/button_regular" /> </selector> 

The style when not pressed.

button_regular.xml:

<?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:angle="-90"     android:centerX="10"     android:centerY="10"     android:endColor="#30bbff"     android:gradientRadius="10"     android:startColor="#0081c0"     android:type="linear"/> <stroke android:width="5dip" android:color="#ffffff" /> <corners android:radius="20dip"/> <padding android:left="7dp"     android:top="7dp"/> </shape> 

Answer 1

Your shadows may be getting clipped by the View's bounds. Try adding padding to the bottom of the button.

If the button sits at the bottom of the parent, the parent ViewGroup may also be clipping the shadow. Make sure the parent has padding and set android:clipToPadding="false"on the parent.