CODEWITHSUNDEEP
androidxmldropshadow
Vancore
Vancore

Reputation: 697

Android XML: Drop shadow cut off

I have a relative layout with a margin and a floating action button that is nested inside this layout. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activityMargin"
            android:orientation="vertical"
            android:clipToPadding="false">


<android.support.design.widget.FloatingActionButton
    android:id="@+id/id_FABSave"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    app:srcCompat="@drawable/ic_save_white"/>

</RelativeLayout>

As you can see in the attached picture, the drop shadow of the floating action button is cut off. How does this happen and how can it be fixed?

Bottom and right side of shadow cut off

Upvotes: 27

Views: 10478

Answers (2)

Michal Z&#225;hradn&#237;k
Michal Z&#225;hradn&#237;k

Reputation: 1783

Problem is that shadows are cut by bounds of view or view group. To tackle this issue you have to use:

android:clipChildren

Defines whether a child is limited to draw inside of its bounds or not.

android:clipToPadding

Defines whether the ViewGroup will clip its children and resize (but not clip) any EdgeEffect to its padding, if padding is not zero.

Problem is that you have to set this to many views in xml if you want to render shadow. I resolved this issue on level of themes.xml. In my top level theme I just set:

<item name="android:clipChildren">false</item>
<item name="android:clipToPadding">false</item>

Then, if there is space on screen, shadow is rendered. I hope it won't break something else.

EDIT: It breaks some views. For example CameraPreview will set black background to whole screen. Be careful with scrolling views, etc.

Upvotes: 6

Lewis McGeary
Lewis McGeary

Reputation: 7922

In your relative layout tag, use padding instead of margin and add the attribute android:clipToPadding="false" to avoid the shadows being cut.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="@dimen/activityMargin"
        android:clipToPadding="false">

Upvotes: 46

Related Questions