Android XML: Drop shadow cut off

Question

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?

Answer 1

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

Answer 2

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.