How can I add the new "Floating Action Button" between two widgets/layouts

android, android-coordinatorlayout, floating-action-button

Solution

Best practice:

- Add `compile 'com.android.support:design:25.0.1'` to gradle file

- Use `CoordinatorLayout` as root view.

- Add `layout_anchor`to the FAB and set it to the top view

- Add `layout_anchorGravity` to the FAB and set it to: `bottom|right|end`

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

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

        <LinearLayout
            android:id="@+id/viewA"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.6"
            android:background="@android:color/holo_purple"
            android:orientation="horizontal"/>

        <LinearLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:background="@android:color/holo_orange_light"
            android:orientation="horizontal"/>

    </LinearLayout>

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

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

Problem

I guess you have seen the new Android design guidelines, with the new "Floating Action Button" a.k.a "FAB" For instance this pink button: My question sounds stupid, and I have already tried a lot of things, but what is the best way to put this button at the intersection of two layouts? In the above exemple, this button is perfectly placed between what we can imagine to be an ImageView and a relativeLayout. I have already tried a lot of tweaks, but I am convinced there is a proper way to do it.

Original source