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>

Joopkins · Accepted Answer · 2015-12-29T22:13:29.720

95

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.

edited Dec 29 '15 at 22:13

answered Dec 29 '15 at 21:59

Joopkins

1,606
10
16

4

This works if you can afford to add the padding, but in most cases additional padding will look bad. Standard elevation (where clipping isn't applied) can draw shadows over other views, there must be a way to achieve the same result without adding padding.. – behelit Dec 22 '16 at 01:16
41

@behelit I think you can use android:clipChildren="false" and android:clipToPadding="false" together, to fix all of these issues. – android developer Feb 08 '17 at 09:52
8

@androiddeveloper is right, I need *all 3* on the parent (padding, clipChildren=false, clipToPadding=false). – hardysim Oct 15 '18 at 08:10
2

Make sure the parent has padding, *not* margin else this won't work. – Bitcoin Cash - ADA enthusiast Oct 24 '19 at 08:16
Time saver, Thanks – Mohamd Ali Nov 04 '20 at 15:55
This is really going to let me take my craft to the next level, thanks! – Selali Adobor Nov 05 '20 at 18:07

score 32 · Answer 2 · edited Dec 18 '19 at 01:09

32

Add android:clipChildren="false" and android:clipToPadding="false" to button two ancestors ViewGroup.

edited Dec 18 '19 at 01:09

Marilia

1,911
1
19
28

answered Aug 31 '19 at 19:53

Burhan Khanzada

945
9
27

score 1 · Answer 3 · answered Mar 12 '21 at 16:06

Complete answer

Add these 2 line to the parent view

android:clipChildren="false"

android:clipToPadding="false"

EXAMPLE:

<androidx.constraintlayout.widget.ConstraintLayout
            android:clipChildren="false"
            android:clipToPadding="false"
           ... >

        <TextView
         style="@style/TextShadowStyle"
          ....
            />

Text Shadow Style:

 <style name="TextShadowStyle">
        <item name="android:shadowColor">@color/black</item>
        <item name="android:shadowDx">10</item>
        <item name="android:shadowDy">10</item>
        <item name="android:shadowRadius">5</item>
    </style>

score 0 · Answer 4 · answered Oct 05 '22 at 16:03

I ran into this using Compose, the clipping was because my content was inside a scrollable container. So, the fix for me was to make the scroll container take up the full height of the screen so that there was room to show the shadows:

Column(
    modifier = Modifier
        // We need to fill the height because adding scrolling
        // causes it to clip the elevation shadows if we don't.
        .fillMaxHeight()
        .verticalScroll(rememberScrollState())
) {

Elevation shadow is clipped

4 Answers4

Linked

Related