Hiding Toolbar smoothly on RecyclerView Scroll?

Question

Currently I've a RecyclerView that holds some list of items. I'm listening the Scroll listener of RecyclerView and if the RecyclerView at some point say 500, it should hide the toolbar and it should remain hide when it crosses to 500+. Similarly, it shows the toolbar when i reaches <= 450.

This is the code I've tried so far. The problem is,

It hides the toolbar but it flashes when it hides or shows at that mentioned point.

How to achieve a smooth toolbar hide?

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);


        }


        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);

            scrollD = scrollD + dy;
            Log.d("key", "DY is .." + (dy + scrollD));

            if (scrollD >= 500) {
              // code to hide
            }

            if (scrollD <= 450) {


             // code to show

            }
        }
    });

Do you want a FadeIn/FadeOut effect or just slideDown/SlideUp ? — theapache64, May 14 '15 at 17:35

score 5 · Answer 1 · answered Jun 06 '16 at 12:53

Use CoordinatorLayout instead of Linear/Relative layout and add the following attribute to the toolbar.

app:layout_scrollFlags="scroll|enterAlways"

CoordinatorLayout handles visibility of toolbar by hiding it when the user scrolls down and showing it again when the user scrolls up.

Code:

<?xml version="1.0" encoding="utf-8"?>

<!-- $Id$ -->

<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">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

     <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways"  />

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

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

Refer this link : https://mzgreen.github.io/2015/06/23/How-to-hideshow-Toolbar-when-list-is-scrolling(part3)/

sud007 · Answer 2 · 2015-05-26T09:52:43.637

I was also searching for the same solution and found this. Working fine with me.

TO hide a Toolbar

mToolbar.animate().translationY(-mToolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();

To Show the Toolbar:

mToolbar.animate().translationY(mToolbar.getTop()).setInterpolator(new AccelerateInterpolator()).start();

call those lines on recycler view's scroll listener.

Now since listener gives you dx and dy values of Toolbar. So in above lines of code, instead of mToolbar.getTop() You can write:

int heightDelta += dy;
    bothToolbarLayouts.animate().translationY(-heightDelta).setInterpolator(new AccelerateInterpolator()).start();

Voila you are done!

Alternatively to understand it more better follow this link

Hiding Toolbar smoothly on RecyclerView Scroll?

2 Answers2

Linked