Egorikas Egorikas - 3 months ago 7
Android Question

Two floating button in the one layout

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

Material design documents example

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?

Before showing a snackbar
After showing a snackbar


<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

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. :)