FAB with anchor in coordinator layout has extra margin in android pre-lollipop

Question

I have a CoordinatroLayoutwith FloatingActionButton. Here is my code:

<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar_layout"
        android:layout_above="@+id/actionbar">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:minHeight="?android:attr/actionBarSize"
                android:background="@color/toolbar_color" />


            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                >

            </ScrollView>


        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:clickable="true"
            app:fabSize="mini"
            android:src="@mipmap/ic_action_edit"
            app:layout_anchor="@id/toolbar"
            app:layout_anchorGravity="bottom|right|end"
            app:backgroundTint="@color/toolbar_color"            />
        </android.support.design.widget.CoordinatorLayout>

But it appears differently in lollipop and pre-lollipop devices.

Lollipop:

Pre-Lollipop:

Actually I haven't add any margin. But FAB has margin in pre-lollipop devices.

I have also seen this problem in cheessesquare sample. It shows different margins too. What is the problem?

What happens when you add margins?Does it double the space in pre lollipop? — Jude Fernandes, Sep 23 '15 at 15:56
it's possible this post will be useful [http://stackoverflow.com/questions/30687888/android-design-library-floating-action-button-padding-margin-issues](http://stackoverflow.com/questions/30687888/android-design-library-floating-action-button-padding-margin-issues) — DmitryArc, Sep 23 '15 at 19:42
@DmitryArc, Thank you. The link was helpful. So it is a bug in android! — Misagh Emamverdi, Sep 26 '15 at 06:22

Saravanabalagi Ramachandran · Accepted Answer · 2016-04-24T12:08:31.710

19

I dont think you want to place them without margins. If I understood it right, you've done this to see whats going on in different versions of android.

You can use app:useCompatPadding="true" and remove custom margins to maintain same margins across different versions of android

Proof of concept

edited Apr 24 '16 at 12:08

answered Apr 24 '16 at 11:57

Saravanabalagi Ramachandran

8,551
11
53
102

I still have no clue why no other answer has described the same. I had the same problem, and now its fixed :) – Saravanabalagi Ramachandran Apr 24 '16 at 11:58
Thank you! I have changed the selected answer. – Misagh Emamverdi Jul 26 '16 at 05:55

score 5 · Answer 2 · edited May 23 '17 at 12:17

According to this link, it seems to be a bug in android design library. It says that:

in API <20, the button renders its own shadow, which adds to the overall logical width of the view, whereas in API >=20 it uses the new Elevation parameters which don't contribute to the view width.

So I have to provide two resource files for margin:

res/values:

<dimen name= "fab_margin_right">0dp</dimen>

And in res/values-v21:

<dimen name = "fab_margin_right">8dp</dimen>

score 3 · Answer 3 · answered Oct 07 '15 at 12:58

Since 22.2.1 version of support and design library, previous answer is no longer true. There is no extra padding if FAB is inside CoordinatorLayout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/button_show_qr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@mipmap/ic_action_edit"
        app:backgroundTint="@color/primary"
        app:borderWidth="0dp"
        app:elevation="4dp"
        app:fabSize="normal"
        app:rippleColor="@color/primary_dark"/>
</android.support.design.widget.CoordinatorLayout>

This code will produce following FAB on every Android version.

Thank you but I was using support library 23.0.0 when I faced the problem. — Misagh Emamverdi, Oct 22 '15 at 11:19
but there is if its in another layout like linear and etc :/ android is silly and an insult to developers — Amir Ziarati, Apr 24 '17 at 06:11

FAB with anchor in coordinator layout has extra margin in android pre-lollipop

3 Answers3