Two floating button in the one layout

Question

I am creating a simple app using material design. I want to get two floating buttons inside one layout.

And I want to make them move together when a snack bar is being displayed.

But I can't do this correctly because the layout_margin doesn't work.

These are the screenshots of the app and the markup. Can you help me?

<android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/addProductsContainer"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">

  <android.support.design.widget.AppBarLayout
    android:id="@+id/addProductsAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

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

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

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/addProductFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:src="@drawable/ic_add_white_36dp" />

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/searchFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/addProductFab"
    app:layout_anchorGravity="top|right|end"
    android:layout_marginBottom="80dp"
    android:layout_marginRight="16dp"
    android:src="@drawable/ic_search_white_36dp" />

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

Answer 1

I tried some tweaks with your code to get it working and in the process I have gained some understanding about the working of anchors.

First thing to notice is that the CoordinatorLayout aligns its child views based on the view's borders. So adding margin between elements wouldn't help at all in motion. It will look fine in the layout, but give up in motion.

So adding a dummy view helps in anchoring properly without issues. Also, you need to appropriately set the layout_gravity attributes.

Just replace the code for the two FloatingActionButtons in your layout with this snippet:

<android.support.design.widget.FloatingActionButton
  android:id="@+id/addProductFab"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="end|bottom"
  android:layout_margin="16dp"
  android:src="@drawable/ic_add_white_36dp" />
<View
  android:id="@+id/dummy"
  android:layout_width="1dp"
  android:layout_height="16dp"
  app:layout_anchor="@id/addProductFab"
  app:layout_anchorGravity="top|right|end" />
<android.support.design.widget.FloatingActionButton
  android:id="@+id/searchFab"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="end|top"
  android:layout_margin="16dp"
  android:src="@drawable/ic_search_white_36dp"
  app:layout_anchor="@id/dummy"
  app:layout_anchorGravity="top|right|end" />

Answer 2

In support library version 24.2.0, the CoordinatorLayout has a new attribute layout_dodgeInsetEdges that you can add to the LinearLayout (or any other view, for that matter) containing your two FABs, and the Snackbar will move that entire view out of the way!

So, for example:

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:fitsSystemWindows="true"
        tools:context=".Activities.MainActivity">

    <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_gravity="bottom|right"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginBottom="@dimen/fab_margin"
            app:layout_dodgeInsetEdges="bottom"> //THIS IS THE LINE THAT MATTERS

        <android.support.design.widget.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/fab_margin"
                android:src="@drawable/icon"
                android:tint="@color/colorTextAndIcons"
                app:backgroundTint="@color/colorPrimary"/>

        <android.support.design.widget.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/fab_margin"
                android:src="@drawable/icon"
                android:tint="@color/colorTextAndIcons"
                app:backgroundTint="@color/colorPrimary"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout> 

Answer 3

I didn't like adding a view just to add the padding, instead of that I wrapped the Fab in a FrameLayout:

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_directions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/fab_margin"
        android:src="@android:drawable/ic_menu_directions"
        android:visibility="gone"/>

    <!-- We need the frame layout to set the margin between FABs-->
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        app:layout_anchor="@id/fab_directions"
        app:layout_anchorGravity="top|end">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginEnd="@dimen/fab_margin"
            android:src="@android:drawable/ic_menu_search"
            app:elevation="@dimen/fab_elevation"/>
    </FrameLayout>

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

Answer 4

With the correct response code will not work on android below 5.0, since the upper FAB will shift. Above all, in your code a lot of extra attributes, I will write the answer below, based on your, which will work properly on all devices, and will be easier to understand.

<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"
android:padding="10dp"
android:background="#e2022068">

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_down"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@android:drawable/arrow_down_float" />

<ImageView
    android:id="@+id/divider"
    android:layout_width="1dp"
    android:layout_height="40dp"
    app:layout_anchor="@id/fab_down"
    app:layout_anchorGravity="end" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_up"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:src="@android:drawable/arrow_up_float"
    app:layout_anchor="@id/divider"
    app:layout_anchorGravity="right|end" />

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