Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CoordinatorLayout with two floating action buttons

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>
like image 667
GingerJim Avatar asked Aug 15 '15 16:08

GingerJim


People also ask

How do you have two floating action buttons on a flutter?

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.

Are Floating Action Buttons good?

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.

What are floating action buttons?

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.


1 Answers

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.

like image 145
natario Avatar answered Oct 18 '22 08:10

natario