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?

You should go through the github issues. I came avross this. https://github.com/makovkastar/FloatingActionButton/issues/90 and this https://github.com/makovkastar/FloatingActionButton/issues/90 — Eugene H, Jan 13 '15 at 02:14
Awesome. I must have missed that one because I've already looked at the GH issues. Thanks! I got it working now. — naja, Jan 13 '15 at 02:51
Awesome. I was thinking avout using that library. Was it easy to fix? — Eugene H, Jan 13 '15 at 03:25
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. — naja, Jan 13 '15 at 04:02
@naja 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 — Ashok Varma, Jul 12 '15 at 02:22

score 51 · Answer 1 · answered Sep 25 '15 at 08:06

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();

But not for custom Floating Action Buttons or menus. So the animation has to be done mannually — TPWang, Oct 16 '15 at 16:38
But, for the native FAB, this should be the simplest and accepted answer. — mochadwi, Feb 28 '19 at 17:46

score 10 · Answer 2 · edited Sep 21 '15 at 00:57

10

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()

edited Sep 21 '15 at 00:57

Tristan

3,530
3
30
39

answered Jun 25 '15 at 08:44

Cody

4,353
4
39
42

score 7 · Answer 3 · answered Jun 08 '15 at 06:36

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:

As a top-level application decor or chrome layout

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.

score 4 · Answer 4 · answered Mar 15 '18 at 11:06

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
    }

.....

}

answered Mar 15 '18 at 11:06

Zuev Roman

41
2

3

Or you can also use `app:layout_dodgeInsetEdges="bottom"` in the XML. – Slav Jul 09 '20 at 10:53

score 2 · Answer 5 · edited Sep 04 '15 at 13:13

2

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();

edited Sep 04 '15 at 13:13

Nazik

8,696
27
77
123

answered Sep 04 '15 at 12:55

Sathish Kumar

61
4

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

5 Answers5

Linked