浮动操作按钮在视图边缘的阴影剪裁

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 specified in the dimens.xml file), but its shadow is clipping and has a square-shape appearance (see below). When I move the floating action button to 32dp from the margins of the view, its shadow displays properly.

I have tried setting its elevation attribute ( android:elevation="5dp" ), but that seems to have no effect. I have also tried setting the attribute borderWidth to 0 ( app:borderWidth="0dp" ) but that also had no effect.

Is there a reason the floating action button is behaving like this?

XML

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/create_floating_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_create_white_48dp"
        app:layout_anchor="@id/coordinator_layout"
        app:layout_anchorGravity="bottom|right" />

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

Images

Answer 1

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).

Answer 2

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 3

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/ddd"
    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 4

我已将此添加到父视图中：

android:clipToPadding="false"

Answer 5

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>