CoordinatorLayout with two floating action buttons

GingerJim picture GingerJim · Aug 15, 2015 · Viewed 7.9k times · Source

I have two Fabs located inside a CoordinateLayout view. When I show a Snackbar, I expect the two Fabs go up all together, but the result is that only one of the Fab (lower one) responds and go up (see picture). what do I miss here?

berfore enter image description here after enter image description here

Calling snack bar

 mSnackbar = Snackbar.make(getActivity().findViewById(R.id.coords_wrapper), "Loading", 1000000000);   

XML

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/coords_wrapper">

    <!-- main contents here, left out -->
    <Relativelayout ...... />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/action_button_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src ="@drawable/ic_add_black"
        android:layout_gravity="right|bottom"
        android:layout_marginBottom="82dp"
        android:layout_marginRight="16dp"
        app:borderWidth="0dp"
        app:elevation="6dp"
        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/action_button_filter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src ="@drawable/ic_add_black"
        android:layout_gravity="right|bottom"
        android:layout_margin="16dp"
        app:borderWidth="0dp"
        app:elevation="6dp"
        />
</android.support.design.widget.CoordinatorLayout>

Answer

natario picture natario · Aug 15, 2015

As per the fab's Behavior, it translates only if it would intersect the snackbar otherwise. The top button clearly doesn't collide with the snackbar, so nothing happens.

You could try defining an anchor:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/action_button_location"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    app:layout_anchor="@id/action_button_filter"
    app:layout_anchorGravity="top"
    android:layout_gravity="top"
    />

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

This will the determine a relation between the top fab (action_button_location) and the bottom fab (action_button_filter), so that the first always stays on top of the other, as defined with layout_anchorGravity and layout_gravity attribute, both set to top. You might need to redefine your margins.