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