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

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


Best practice:

  • Add compile 'com.android.support:design:25.0.1' to gradle file
  • Use CoordinatorLayout as root view.
  • Add layout_anchorto the FAB and set it to the top view
  • Add layout_anchorGravity to the FAB and set it to: bottom|right|end

enter image description here

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


Seems like the cleanest way in this example is to:

  • Use a RelativeLayout
  • Position the 2 adjacent views one below the other
  • Align the FAB to the parent right/end and add a right/end margin
  • Align the FAB to the bottom of the header view and add a negative margin, half the size of the FAB including shadow

Example adapted from shamanland implementation, use whatever FAB you wish. Assume FAB is 64dp high including shadow:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <View        android:id="@+id/header"        android:layout_width="match_parent"        android:layout_height="120dp"    />    <View        android:id="@+id/body"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/header"    />    <fully.qualified.name.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_alignBottom="@id/header"        android:layout_marginBottom="-32dp"        android:layout_marginRight="20dp"    /></RelativeLayout>

FAB Layout example


You can import the sample project of Google in Android Studio by clicking File > Import Sample...

Import sample

This Sample contains a FloatingActionButton View which inherits from FrameLayout.

EditWith the new Support Design Library you can implement it like in this example: https://github.com/chrisbanes/cheesesquare