Floating action button's shadow clipping at view margins

Question

I have a floating action button anchored to the bottom right of a coordinator layout. It is 16dp from the margins of the view (the margins are included by default and specif

Answer 1

I had the same issue for two ExtendedFloatingActionButton which were in a horizontal LinearLayout, so the two buttons could go next to one another. The grey shadow only appeared on the bottom two corners on the floating buttons but I had a bottom margin set on the linear layout so wasn't sure why there was clipping.

I realised even though I had added android:clipChildren="false" to the LinearLayout my code was wrapped in a ConstraintLayout which meant the buttons were still be cut off.

To solve this issue just add android:clipChildren="false" to the parent, which in my case was the ConstraintLayout.

Example of my code:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:clipToPadding="false"
    android:clipChildren="false">
                
    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/btn_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="1dp"
            android:text="text" />

        <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/btn_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1.8"
            android:text="text"
            android:textAlignment="center" />
    </androidx.appcompat.widget.LinearLayoutCompat>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

I too had the same problem. But I couldn't just throw away my margin values for the sake of the FAB. So I added another layer in the hierarchy and this helped me get the FAB to be placed exactly where I wanted without disrupting the parent. So now I have a CoordinatorLayout inside a CoordinatorLayout for the sake of the FAB. The below is my modified layout file.

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/ffffd"
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/tile"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/fff"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ScrollView
            android:id="@+id/scroll_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- All my views under a LinearLayout parent -->

        </ScrollView>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="Add Text"
        android:visibility="visible"
        android:layout_margin="10dp"
        app:backgroundTint="@color/primary"
        app:layout_anchor="@+id/fff"
        app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

Answer 3

Had similar issue. Make 2 things:

1. In android.support.design.widget.CoordinatorLayout remove android:paddingRight="@dimen/activity_horizontal_margin" and android:paddingBottom="@dimen/activity_vertical_margin"

2. In android.support.design.widget.FloatingActionButton add android:layout_marginRight="@dimen/activity_horizontal_margin" and android:layout_marginBottom="@dimen/activity_horizontal_margin"

As explanation = FAB ddidn't have place to display shadow, and due to this, you have not seen it fully.

Answer 4

I've added this to the parent view:

android:clipToPadding="false"

Answer 5

The problem is a parent clipping the shadow. Look for the parent that is clipping the shadow (is not necessarily the next in the hierarchy) and add this to the view in the xml.

android:clipChildren="false"

I've been testing this right now removing and adding that line to the parent that was clipping the view and is working fine.

Adding another containers or changing the margins is a workaround that I don't recommend. It's too patchy. The mini fabs have different container sizes and require different sizes depending on the API level (<21 or >=21).