Two floating action buttons next to each other

Question

The material design documentation has an example of Google Maps showing two floating action buttons next to one another (actually, one above the other).

Answer 1

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_scrolling"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/big_activity_fab_margin"
    android:src="@drawable/ic_share_white_24dp"
    app:layout_anchor="@id/app_bar_scrolling"
    app:layout_anchorGravity="bottom|end" />
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_scrolling2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="65dp"
    android:src="@drawable/ic_share_white_24dp"
    app:layout_anchor="@id/app_bar_scrolling"
    app:layout_anchorGravity="bottom|end" />

---

this is work for me. the key code is android:layout_margin="65dp"

Answer 2

This answer https://stackoverflow.com/a/33900363/401025 has a major problem: we are not able to set any margins between the two buttons. They stick together.

It seems that at the current state of the design support library v23.3.0 we are not able to have multiple float actions buttons in a coordinator layout that behave correctly. However in the spec https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions this feature is described so we can expect it in the future.

As for know I discovered a workaround:

When you have a look at the google maps android app, you will notice that the first (blue) float action button is floating with the bottom sheet, while the second (my location) button is not. So for the second button create a wrapping relative layout that spans the entire layout. Put it above your bottom sheet layout:

<RelativeLayout
    android:id="@+id/wrapper"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/secondButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"/>

</RelativeLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/firstButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="15dp"
    app:layout_anchor="@id/bottomSheet"
    app:layout_anchorGravity="top|right|end"/>

This will exactly mimic the float action buttons of google maps. One drawback with this solution is that you have to set the bottom margin of the wrapper to position the button above the first button. You can do this either in the layout or programmatically:

((CoordinatorLayout.LayoutParams) wrapper.getLayoutParams()).setMargins(0, 0, 0, bottomMargin);

Answer 3

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_camera"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_camera"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        app:fabSize="normal" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_image"
        app:useCompatPadding="true"
        app:layout_anchor="@id/fab_camera"
        app:layout_anchorGravity="top|center"
        android:layout_gravity="top|center"
        app:fabSize="normal" />

Answer 4

Three buttons one above other:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_zoom_out"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@drawable/ic_fab_zoom_out"
    app:elevation="0dp"
    app:useCompatPadding="true"
    />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_zoom_in"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|top"
    app:srcCompat="@drawable/ic_fab_zoom_in"
    app:elevation="0dp"
    app:useCompatPadding="true"
    app:layout_anchor="@id/fab_zoom_out"
    app:layout_anchorGravity="start"
    />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_reset_orientation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|top"
    android:visibility="gone"
    app:srcCompat="@drawable/ic_fab_reset_orientation"
    app:elevation="0dp"
    app:useCompatPadding="true"
    app:layout_anchor="@id/fab_zoom_in"
    app:layout_anchorGravity="start"
    />

Answer 5

This works for me - FABs are embedded in Relative layout:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.github.openeet.openeet.SaleDetailActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        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:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="@dimen/fab_margin"
        android:layout_gravity="end|bottom" >


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_share"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:src="@android:drawable/ic_menu_share"
            android:layout_alignParentBottom="true"
            android:layout_alignLeft="@+id/fab_print"
            android:layout_alignStart="@+id/fab_print" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_print"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:src="@android:drawable/ic_media_next"
            android:layout_above="@+id/fab_share"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginBottom="46dp" />

    </RelativeLayout>

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

Answer 6

Try to use this app:useCompatPadding="true"

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabBottom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:tint="@android:color/white"
    android:src="@mipmap/ic_search"
    app:fabSize="normal"
    android:scaleType="center"
    app:layout_anchor="@+id/bottomSheet"
    app:layout_anchorGravity="top|end"
    app:useCompatPadding="true"/>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabTop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:tint="@color/accent"
    android:src="@mipmap/ic_location_on"
    app:backgroundTint="@android:color/white"
    app:fabSize="normal"
    android:scaleType="center"
    android:layout_gravity="top|end"
    app:layout_anchor="@+id/fabSearch"
    app:layout_anchorGravity="top|end"
    android:layout_margin="12dp"/>