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 after
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>
Consider a code snippet where Scaffold Widget takes a two floating action button. You must use SpeedDial Class and on children[] you can add some buttons with SpeedDialChild. The sample below shows 2 FABs.
Floating Action Button (FAB) is a very common UI control for Android apps. Shaped like a circled icon floating above the UI, it's a tool that allows users to call out the key parts of your app. FAB is quite simple and easy to implement UI element, despite that designers often incorrectly incorporate it into layouts.
A floating action button (FAB) is a circular button that triggers the primary action in your app's UI. This page shows you how to add the FAB to your layout, customize some of its appearance, and respond to button taps.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With