Menu and Autohide FloatingActionButton of Android Design Support Library

Question

I'm using Android Design Support Library and I want a FloatingActionButton that have AutoHide by Scrolling,

my Layout is:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/LargeText" />
    </ScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchorGravity="bottom|right|end"
        app:layout_anchor="@id/scrollView"
        android:src="@drawable/abc_btn_rating_star_off_mtrl_alpha" />

</android.support.design.widget.CoordinatorLayout>

FloatingActionButton always showing when scrolling text, i want to autohide it when scrolling text.

And, I want to have a FloatingActionButton Menu by clicking on FloatingActionButton, like this:

Solution 1

FloatingActionButton that have AutoHide by Scrolling,

You must use android.support.v4.widget.NestedScrollView instead of ScrollView. You can't use the ScrollView. You have to use the NestedScrollView or a view that implements the NestedScrollingChild interface, like a RecyclerView.

To achieve this kind of pattern you have to implement your custom Behavior. There is a nice code posted by a Googler that hides the FAB when the user scrolls down and shows it when they scroll back up. Reuses the same animation that FloatingActionButton.Behavior uses for hiding/showing the FAB in reaction to the AppBarLayout exiting/entering.

UPDATED 18/07/2015

With the 22.2.1 you can simply add the code posted below, using the pre-built animations. Just use a class like this: (original source here)

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                                       final View directTargetChild, final View target, final int nestedScrollAxes) {
        // Ensure we react to vertical scrolling
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                               final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            // User scrolled down and the FAB is currently visible -> hide the FAB
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            // User scrolled up and the FAB is currently not visible -> show the FAB
            child.show();
        }
    }
}

Then you can apply this behaviour to your FAB using:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
     app:layout_behavior="com.support.android.designlibdemo.ScrollAwareFABBehavior" />

With Design 22.2.0: You have to use a class like this: (original source here)

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
    private boolean mIsAnimatingOut = false;

    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                                       final View directTargetChild, final View target, final int nestedScrollAxes) {
        // Ensure we react to vertical scrolling
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                               final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
            // User scrolled down and the FAB is currently visible -> hide the FAB
            animateOut(child);
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            // User scrolled up and the FAB is currently not visible -> show the FAB
            animateIn(child);
        }
    }

    // Same animation that FloatingActionButton.Behavior uses to hide the FAB when the AppBarLayout exits
    private void animateOut(final FloatingActionButton button) {
        if (Build.VERSION.SDK_INT >= 14) {
            ViewCompat.animate(button).scaleX(0.0F).scaleY(0.0F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer()
                    .setListener(new ViewPropertyAnimatorListener() {
                        public void onAnimationStart(View view) {
                            ScrollAwareFABBehavior.this.mIsAnimatingOut = true;
                        }

                        public void onAnimationCancel(View view) {
                            ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
                        }

                        public void onAnimationEnd(View view) {
                            ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
                            view.setVisibility(View.GONE);
                        }
                    }).start();
        } else {
            Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_out);
            anim.setInterpolator(INTERPOLATOR);
            anim.setDuration(200L);
            anim.setAnimationListener(new Animation.AnimationListener() {
                public void onAnimationStart(Animation animation) {
                    ScrollAwareFABBehavior.this.mIsAnimatingOut = true;
                }

                public void onAnimationEnd(Animation animation) {
                    ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
                    button.setVisibility(View.GONE);
                }

                @Override
                public void onAnimationRepeat(final Animation animation) {
                }
            });
            button.startAnimation(anim);
        }
    }

    // Same animation that FloatingActionButton.Behavior uses to show the FAB when the AppBarLayout enters
    private void animateIn(FloatingActionButton button) {
        button.setVisibility(View.VISIBLE);
        if (Build.VERSION.SDK_INT >= 14) {
            ViewCompat.animate(button).scaleX(1.0F).scaleY(1.0F).alpha(1.0F)
                    .setInterpolator(INTERPOLATOR).withLayer().setListener(null)
                    .start();
        } else {
            Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_in);
            anim.setDuration(200L);
            anim.setInterpolator(INTERPOLATOR);
            button.startAnimation(anim);
        }
    }
}

Then you can apply this behaviour to your FAB using:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
     app:layout_behavior="com.support.android.designlibdemo.ScrollAwareFABBehavior" />

Of course you can change this code to obtain your favorite pattern.

And, I want to have a FloatingActionButton Menu by clicking on FloatingActionButton, like this:

Currently the original FAB doesn't support this pattern. You have to implement a custom code to achieve it.

Solution 2

You can achieve it

Here's my code.

Step 1:

First make Getter of FloatingActionMenu so that you can call it from another activity or from fragment where your recycleview is used

public FloatingActionMenu getFloatingActionMenu() {
        return fabMenu;
    }

Step 2:

Call below line from another activity or from fragment

   FloatingActionMenu fabMenu=((MainActivity)getActivity()).getFloatingActionMenu();

Step 3:

Now Check wheather recycleview is scrolling or not depend on "dy" position Here I have used animation fabMenu

Animation FabMenu_fadOut = AnimationUtils.loadAnimation(getActivity(),
            R.anim.fade_out);
Animation  FabMenu_fadIn = AnimationUtils.loadAnimation(getActivity(),
            R.anim.abc_grow_fade_in);

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (dy > 0 && floatingActionButton.isShown()) {
                    //fabMenu.startAnimation(FabMenu_fadIn);
                    fabMenu.setVisibility(View.GONE);
                }
                if (dy < 0 && !floatingActionButton.isShown()) {
                   // fabMenu.startAnimation(FabMenu_fadOut);
                    fabMenu.setVisibility(View.VISIBLE);
                }
            }
        });

Note : If you want to hide FloatingActionButton on scroll then use same code as in FloatingActionMenu.

Thank you.

Comments

[AliSh]

This is not worked for scrollView. I'm try this code, but it's work just for ViewPager.

[Gabriele Mariotti]

You can't use the ScrollView. You have to use the NestedScrollView or a view that implements the NestedScrollingChild interface, like a RecyclerView.

[PPartisan]

For whatever reason, dyConsumed always returned 0 for me in onNestedScroll, so the animation never ran. I switched it for dyUnconsumed and now it runs as expected.

[Shajeel Afzal]

@AliSh where did you found R.anim.fab_in and R.anim.fab_out animation?

[Thomas Vos]

design_fab_out and design_fab_in are located in <sdk>/extras/android/support/design/res/anim/.

[Akshay kumar]

How to add this library to android studio

[Peter Bruins]

OnNestedScroll() and onStartNestedScroll() are now deprecated