Shadow on floating action button

Question

For some reason a small shadow appears on top of my floating action button as seen here but only on the debugging device but not in the Android Studio preview.

The button is nested in a relative layout to position it in the bottom of the screen like this:

<?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.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_margin="16dp"
        android:src="@drawable/baseline_play_circle_outline_white_36" />
</RelativeLayout>

Update:

This is what it looks like when clicked. The problem is also caused by adding an alpha value to the FAB like here but in my case, as the shadow color is almost the same as the original, adding 0.9 alpha makes it way less obvious.

Answer 1

try adding following attributes to fab :

android:clipChildren="false"
android:clipToPadding="false"