CODEWITHSUNDEEP
androidmaterial-designfloating-action-button
Jon
Jon

Reputation: 10473

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>

Upvotes: 59

Views: 51823

Answers (13)

Max
Max

Reputation: 129

Here is my solution, just put an invisible FAB between the two fabs, and works well with CoordinatorLayout.

<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="@drawable/ic_check" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_invisible"
    android:layout_width="@dimen/fab_margin"
    android:layout_height="@dimen/fab_margin"
    android:layout_gravity="top|end"
    android:layout_margin="@dimen/fab_margin"
    android:visibility="invisible"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_follow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_gps_fixed_follow"
    app:backgroundTint="@android:color/white"
    app:layout_anchor="@id/fab_invisible"
    app:layout_anchorGravity="top" />

No Snackbar

With Snackbar

Upvotes: 12

Moz
Moz

Reputation: 119

Another Suggestion

You can also create either vertical or horizontal LinearLayout which may contain several FloatingActionButtons and anchor the LinearLayout to a specific target view inside your CoordinatorLayout.

Upvotes: 0

Shane Sepac
Shane Sepac

Reputation: 826

A very simple way (that worked for me!) was to just put the two floating buttons in a vertical linear layout at the bottom/end of its parent.

    <LinearLayout
    android:layout_gravity="bottom|end"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_menu_send" />
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_menu_send" />
</LinearLayout>

Just adjust the layout_margin attributes for the floating buttons to get the spacing as you want it.

Example

Upvotes: 5

anAmaka
anAmaka

Reputation: 418

The accepted answer (at the time of writing this) - https://stackoverflow.com/a/33900363/4414887 worked only partially as the buttons were sticking together.

I was unable to use any other provided answers as well. So I found a workaround.

Add a view in between the 2 FABs like so -

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab2"
    android:src="@drawable/ic_delete_white_24dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|end"
    app:layout_anchor="@id/view"/>

<View
    android:id="@+id/view"
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:layout_gravity="top|end"
    app:layout_anchor="@id/fab"
    />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:src="@drawable/ic_done_white_24dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/colorPrimary"
    app:layout_anchor="@id/bar2" />

Upvotes: 1

McMath
McMath

Reputation: 7188

I can't believe no one has posted the correct answer.

Wrap the buttons in a ViewGroup and apply the dodgeInsetEdges layout parameter so that the buttons move up with the bottom sheet. For the above use case, we can use a LinearLayout with the XML attribute app:layout_dodgeInsetEdges="bottom".

Note that we can apply this to any view in a CoordinatorLayout.

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" ... >

    <!-- We can use any ViewGroup here. LinearLayout is the
         obvious choice for the questioner's use case. -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:orientation="vertical"
        app:layout_dodgeInsetEdges="bottom">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/upperFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:src="@drawable/upper_fab_icon" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/lowerFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/lower_fab_icon" />

    </LinearLayout>

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

Upvotes: 11

Blur Studio
Blur Studio

Reputation: 51

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

Upvotes: 5

Eugene Maksymenko
Eugene Maksymenko

Reputation: 1

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

Upvotes: 0

Антон Слобожанинов
Антон Слобожанинов

Reputation: 121

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

Upvotes: 1

Juan Labrador
Juan Labrador

Reputation: 1214

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

Upvotes: 24

LRA
LRA

Reputation: 462

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>

Upvotes: 6

DarkLeafyGreen
DarkLeafyGreen

Reputation: 70406

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

Upvotes: 2

AjCodez
AjCodez

Reputation: 378

Two floating action buttons with 100dp space in between them is as follows:

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_gravity="top|end"
    android:layout_marginBottom="100dp"
    android:src="@android:drawable/ic_input_add"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top" />

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

Upvotes: 1

Ioannis Daskalopoulos
Ioannis Daskalopoulos

Reputation: 821

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

Upvotes: 79

Related Questions