CODEWITHSUNDEEP
androidxml
Sean Galantzan
Sean Galantzan

Reputation: 543

Elevation shadow is clipped

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

enter image description here

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>

Upvotes: 54

Views: 29211

Answers (4)

frodo2975
frodo2975

Reputation: 11745

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())
) {

Upvotes: 0

Hitesh Sahu
Hitesh Sahu

Reputation: 45072

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>

Upvotes: 2

Burhan Khanzada
Burhan Khanzada

Reputation: 1076

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

Upvotes: 34

Joopkins
Joopkins

Reputation: 1644

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.

Upvotes: 97

Related Questions