CODEWITHSUNDEEP
androidandroid-layoutshadowfloating-action-button
user5030423
user5030423

Reputation:

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

FAB 16dp from the margin. FAB 32dp from the margin.

Upvotes: 22

Views: 11082

Answers (5)

fireb86
fireb86

Reputation: 1872

I added this to the parent view:

android:clipToPadding="false"

Upvotes: 5

blackers
blackers

Reputation: 193

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>

Upvotes: 0

Sotti
Sotti

Reputation: 14389

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

Upvotes: 38

Henry
Henry

Reputation: 17841

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>

Upvotes: 2

Mateusz Pryczkowski
Mateusz Pryczkowski

Reputation: 1894

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.

Upvotes: 11

Related Questions