Fab in Lollipop shows strange shadow on long press

Question

I am using the FloatingActionButton in a CoordinatorLayout:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_add"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:tint="@color/white"
    app:fabSize="normal"
    app:layout_anchor="@+id/view_pager_imageformat_carousel"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@drawable/ic_playlist_add_black_24dp"
    app:useCompatPadding="true" />

and it works fine with most Android Apis, but in Android 5 and 5.1 it shows a boxed shadow when it is pressed:

->

I tried setting clipChildren to false in the CoordinatorLayout, without any effect and looked through other available options wihtout success so far.

Has anyone encountered the same problem and came up with a solution?

Answer 1

It turned out that the culprit was useCompatPadding.

Removing it solved the shadow problem.

To fix the margins I used this answer which basically uses custom margins with two different styles, default and ond for api 21+

But this is in fact an ugly solution and the margins are not perfect, so I am open to better solutions.

Answer 2

Try to set elevation:

app:elevation="0dp"

Answer 3

You can add app:rippleColor="@color/transparent" to set the ripple color to transparent.