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

Question

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:

Answer 1

Now it is part of official Design Support Library.

In your gradle:

compile 'com.android.support:design:22.2.0'

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Answer 2

Try this library (javadoc is here), min API level is 7:

dependencies {
    compile 'com.shamanland:fab:0.0.8'
}

It provides single widget with ability to customize it via Theme, xml or java-code.

It's very simple to use. There are available normal and mini implementation according to Promoted Actions pattern.

<com.shamanland.fab.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_my"
    app:floatingActionButtonColor="@color/my_fab_color"
    app:floatingActionButtonSize="mini"
    />

Try to compile the demo app. There is exhaustive example: light and dark themes, using with ListView, align between two Views.

Answer 3

Here is one aditional free Floating Action Button library for Android. It has many customizations and requires SDK version 9 and higher

Full Demo Video

dependencies {
    compile 'com.scalified:fab:1.1.2'
}

Answer 4

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>