How to make FloatingActionButton "break an edge"

Question

By "breaking an edge" I am referring to the Google design guidelines. A FAB "breaks an edge" when it is positioned between two adjacent elements.

I want my FAB to be positioned between my toolbar and my content view. But right now it is appearing fully on top of the content view:

My FAB is anchored to the toolbar. Here is the code:

<android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/toolbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@android:drawable/ic_dialog_email" />

In examples I have seen here this is how its supposed to be done. You anchor the FAB to the toolbar and then set the anchor gravity to bottom|right|end

What am i doing wrong??

The accepted answer here works for me: http://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts — Daniel Nugent, Jan 10 '16 at 20:54
Please check my answer if you want to achieve this with AppBarLayout. — jimmy0251, Jan 10 '16 at 20:58
It's given below http://stackoverflow.com/a/34710674/2212847 — jimmy0251, Jan 10 '16 at 21:00

score 2 · Accepted Answer · answered Jan 10 '16 at 20:56

You should anchor FAB to the AppBarLayout instead of Toolbar. For some reason though, anchoring works only if AppBarLayout's height is more than two times of ActionBar's height. Final code would be like this.

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="168dp"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

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


<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:src="@android:drawable/ic_dialog_email"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end" />

wow, this worked. Why do I need to specify a static height for the `AppBarLayout`? This will cause problems for me later on. — dopatraman, Jan 10 '16 at 21:02
It's not static height, it can be anything more than two times of ActionBar's height. FAB hides automatically for anything less than it. — jimmy0251, Jan 10 '16 at 21:07
If you want your `AppBarLayout`'s height set to `wrap_content`, as an ugly hack, you can set `AppBarLayout`'s `minHeight` to `1dp`. — jimmy0251, Jan 10 '16 at 21:16

Michele Lacorte · Answer 2 · 2016-01-10T20:46:36.430

You need a CoordinatorLayout like this:

<?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"
    xmlns:card="http://schemas.android.com/tools"
    android:id="@+id/rootLayout"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="380dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            android:fitsSystemWindows="true">

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />


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

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

    <!-- ListView or NestedScrollView or RecyclerView etc.. -->

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        app:layout_anchor="@+id/appbar"
        app:elevation="6dp"
        app:borderWidth="0dp"
        app:layout_anchorGravity="bottom|right|end" />  

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

If you want your toolbar extends like https://www.google.it/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiOiPnyjqDKAhUBERQKHV6gAiMQjRwIBw&url=http%3A%2F%2Fd-codepages.com%2Fcollapsing-toolbar-android-example%2F&psig=AFQjCNF8xDC0r0ZWSqe485yD5RIYQiK59A&ust=1452545257690623 — Michele Lacorte, Jan 10 '16 at 20:47

How to make FloatingActionButton "break an edge"

2 Answers2