Jon Jon - 3 months ago 37
Android Question

Two floating action buttons next to each other

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

enter image description here

How is this done? I have two FAB's in a coordinator layout, but they end up on top of one another, so you only see one button.

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

<!-- Use ThemeOverlay to make the toolbar and tablayout text
white -->
<android.support.design.widget.AppBarLayout
android:id="@+id/abl_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>

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

<ImageView
android:id="@+id/img_photo"
android:layout_width="match_parent"
android:layout_height="256dp"
android:background="#C5C5C5"/>
<EditText
android:id="@+id/text_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/img_baby"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:hint="Name"
android:drawableLeft="@drawable/ic_account"
android:drawablePadding="20dp"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="@+id/text_dob"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/text_name"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:hint="Date of birth"
android:drawableLeft="@drawable/ic_cake"
android:drawablePadding="20dp"
style="@android:style/Widget.Holo.Spinner"/>

</LinearLayout>

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

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

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

Answer

It is a combination of layout gravity and anchor gravity together with playing with the margins (of the anchored item) that can make it work, have a look at the xml below which I have used successfully:

<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"
    android:src="@android:drawable/ic_dialog_info" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|end"
    android:layout_marginBottom="0dp"
    android:layout_marginEnd="0dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:layout_marginStart="0dp"
    android:layout_marginTop="0dp"
    android:src="@android:drawable/ic_media_play"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top" />

Comments