Two floating button in the one layout

Question

I am creating a simple app with using material design. And I want getting two floating buttons on the one layout.

And I want to make them moving toghether when a snack bar is being showed. But I can't do this in wrong it in the right way, because layout_margin doesn't work. These are the screenshot of the app and the markup. Could You help me?

                  <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_gravities.

Just replace the code for the 2 FABs 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" />

Hope this helps! Please accept this answer if it works. :)