14

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>
natario
  • 24,954
  • 17
  • 88
  • 158
GingerJim
  • 3,737
  • 6
  • 26
  • 36

1 Answers1

19

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.

natario
  • 24,954
  • 17
  • 88
  • 158
  • I think action_button_filter needs to be defined before action_button_location to be able to use it as anchor. Also, I needed to use anchorGravity right|top. And include layout_marginBottom="82dp" (to avoid having them touching each other) – David Ameller Oct 20 '17 at 14:06