Floating action button's shadow clipping at view margins

问题

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

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

回答2:

Had similar issue. Make 2 things:

In android.support.design.widget.CoordinatorLayout remove android:paddingRight="@dimen/activity_horizontal_margin" and android:paddingBottom="@dimen/activity_vertical_margin"
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.

回答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>

回答4:

I've added this to the parent view:

android:clipToPadding="false"

来源：https://stackoverflow.com/questions/31507097/floating-action-buttons-shadow-clipping-at-view-margins

标签

android

android-layout

Shadow

floating-action-button