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

Have you tried adding android:clipChildren="false" to fab's parent view? — wrkwrk, Jul 20 '15 at 01:21
Are you using the newly released [version 22.2.1](https://plus.google.com/u/0/+AndroidDevelopers/posts/XTtNCPviwpj)? — ianhanniballake, Jul 20 '15 at 02:35
@ianhanniballake Yes, I am using version 22.2.1 of the [Android Design Support Library](http://android-developers.blogspot.com/2015/05/android-design-support-library.html). — , Jul 20 '15 at 04:18

Sotti · Accepted Answer · 2016-03-25T18:11:16.427

37

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

edited Mar 25 '16 at 18:11

answered Feb 10 '16 at 20:14

Sotti

14,089
2
50
43

This worked! Thx! FABs seem not to care of containers sizes - they draw their shadow outside the bounds of container... – Pavel Biryukov Mar 25 '16 at 14:56
@PavelBiryukov as an addendum to your comment: Mini Fabs have a different size Pre and Post Lollipop. Pre Lollipop they'll have a container size a lot bigger. – Sotti Mar 25 '16 at 18:10
Yes, I see...if I place mini fab in LinearLayout (horizontal) in 4.4 in hyerachy viewer (in Android Device Monitor) I see that the height of FAB is bigger than the height of container LinearLayout. Thought LinearLayout has height = wrap_content. – Pavel Biryukov Mar 25 '16 at 19:01
4

`android:clipChildren="false"` did not work for me but `android:clipToPadding="false"` did. Was using the FAB inside a RelativeLayout (which was the root of the view hierarchy) – Fabian Streitel Dec 25 '16 at 14:48
1

Thanks for pointing out that it is **not necessarily the next in the hierarchy**, that really helped me out. – Jelle Blaauw May 17 '17 at 12:49

score 11 · Answer 2 · answered Jul 20 '15 at 07:40

11

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.

answered Jul 20 '15 at 07:40

Mateusz Pryczkowski

1,874
1
16
20

This solved the problem. It's bizarre that the margins have any effect on the shadow, but it makes sense. I wish there was a way of fixing this problem without disrupting the default margin values of the parent view, but that doesn't seem to be the case. Thanks for the help! – Jul 21 '15 at 03:31

score 2 · Answer 3 · answered Oct 24 '15 at 06:26

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>

score 2 · Answer 4 · answered Apr 03 '19 at 15:04

2

I've added this to the parent view:

android:clipToPadding="false"

answered Apr 03 '19 at 15:04

fireb86

1,723
21
35

score 0 · Answer 5 · edited Aug 12 '20 at 16:35

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>

Floating action button's shadow clipping at view margins

5 Answers5

Linked

Related