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

40,680

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

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

Solution 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.

Solution 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
    }

.....

}

Solution 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();
Share:
40,680
naja
Author by

naja

Updated on March 16, 2020

Comments

  • naja
    naja about 4 years

    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?

  • TPWang
    TPWang over 8 years
    But not for custom Floating Action Buttons or menus. So the animation has to be done mannually
  • mochadwi
    mochadwi about 5 years
    But, for the native FAB, this should be the simplest and accepted answer.
  • Slav
    Slav almost 4 years
    Or you can also use app:layout_dodgeInsetEdges="bottom" in the XML.