Moving Floating Action Button up and down to avoid getting blocked by a snackbar

Question

I'm using this library to implement a floating action bar and I can't seem to find a way to move the button when a snackbar appears on screen. Is it even possible with that library?

Thorbert

You should go through the github issues. I came avross this. github.com/makovkastar/FloatingActionButton/issues/90 and this github.com/makovkastar/FloatingActionButton/issues/90 – Porkpie

Awesome. I must have missed that one because I've already looked at the GH issues. Thanks! I got it working now. – Thorbert

Awesome. I was thinking avout using that library. Was it easy to fix? – Porkpie

Yeah, I literally followed the suggestion from the discussion you linked to. When the snackbar is shown, use fab.animate().translationYBy(-snackbar.getHeight()) and when it's hidden, use the same thing except ommit the negative sign before getHeight(). This is a bit hacky because what can happen is that the user keeps pressing the button after the initial button press and the floating button keeps going up. I just used some boolean logic to mark button's current state as a workaround. – Thorbert

@Thorbert can you post what you have done. How did you got snackbar instance and how did you find when it's closed and when it was open – Pervert

Answer 1

To anyone looking out for answer in future..

Coordinator Layout used as Parent Layout of Floating Action Button will handle the animation effect for you automatically.

The floating action button has a default behavior that detects Snackbar views being added and animates the button above the height of the Snackbar accordingly.

Floating Action Button Behavior

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/clayout">
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:src="@drawable/filter_icon"
    app:rippleColor="@color/colorGray"
    app:fabSize="normal"
    app:borderWidth="0dp"/>
</android.support.design.widget.CoordinatorLayout>

Then our SnackBar code would use Coordinatorlayout[here clayout] as parentlayout like below:

Snackbar.make(clayout, "Click on row to know more details", Snackbar.LENGTH_LONG)
                    .setAction("OK", new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {

                        }
                    }).show();

Chauffeur

But not for custom Floating Action Buttons or menus. So the animation has to be done mannually – Shrubbery

But, for the native FAB, this should be the simplest and accepted answer. – Bohemianism

Answer 2

Try usingandroid.support.design.widget.FloatingActionButton and CoordinatorLayout.

And then try this:

fabView = findViewById(R.id.floating_action_button_id);
Snackbar.make(fabView, "Hi", Snackbar.LENGTH_LONG).show()

Neveda

Answer 3

You could switch to android.support.design.widget.FloatingActionButton and use CoordinatorLayout to specify Behaviors for your views.

CoordinatorLayout is a super-powered FrameLayout.

CoordinatorLayout is intended for two primary use cases:

1. As a top-level application decor or chrome layout
2. As a container for a specific interaction with one or more child views

By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the DefaultBehavior annotation.

Behaviors may be used to implement a variety of interactions and additional layout modifications ranging from sliding drawers and panels to swipe-dismissable elements and buttons that stick to other elements as they move and animate.

Children of a CoordinatorLayout may have an anchor. This view id must correspond to an arbitrary descendant of the CoordinatorLayout, but it may not be the anchored child itself or a descendant of the anchored child. This can be used to place floating views relative to other arbitrary content panes.

Additory

Answer 4

Kotlin:

class CustomBehavior : CoordinatorLayout.Behavior<FloatingActionButton> {   

....

    override fun onAttachedToLayoutParams(params: CoordinatorLayout.LayoutParams) {
        super.onAttachedToLayoutParams(params)

        //set dodgeInsetEdges to BOTTOM so that we dodge any Snackbars
        params.dodgeInsetEdges = Gravity.BOTTOM
    }

.....

}

Romano

Or you can also use app:layout_dodgeInsetEdges="bottom" in the XML. – Cornelie

Answer 5

You can Use to set parentLayout - as FAB,

Snackbar.make(parentLayout, R.string.snackbar_text,Snackbar.LENGTH_LONG).setAction(R.string.snackbar_action, myOnClickListener).show();

Charyl