How to scroll up/down of bottom bar on scrolling of RecyclerView

Question

With Google’s recent release of the Design Support Library several cool new views have been introduced. Using some of the new components (e.g. CoordinatorLayout ) might (!) enable you to achieve the scrolling behavior.

I was tryed with some built in scrolling behavior but nothing is working for me,

I have a bottombar(LinearLayout) in my layout in place of FloatingActionButton

Here what I want.

1. OnLaunch of this screen bottom bar should appear.
2. On scrollup of recyclerview bottom bar should scrolldown.
3. On scrolldown of recyclerview bottom bar should scrollup

Is there any builtin mechanism to achieve this ? or We need write java code?

Here is my code:

main_activty.xml

<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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <include layout="@layout/toolbar_srp" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="5dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/white"
            app:tabMode="fixed" />

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

    <!-- All Scrollable Views -->

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <!-- Bottom bar-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#a0000000"
        android:orientation="horizontal"
        android:paddingBottom="@dimen/padding_small"
        android:paddingTop="@dimen/padding_small">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.33"
            android:gravity="center"
            android:paddingBottom="@dimen/padding_small"
            android:paddingTop="@dimen/padding_small"
            android:text="AC"
            android:textColor="@color/white" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.33"
            android:gravity="center"
            android:paddingBottom="@dimen/padding_small"
            android:paddingTop="@dimen/padding_small"
            android:text="Sleeper"
            android:textColor="@color/white" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.33"
            android:gravity="center"
            android:paddingBottom="@dimen/padding_small"
            android:paddingTop="@dimen/padding_small"
            android:text="Premium"
            android:textColor="@color/white" />

    </LinearLayout>


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

fragment.xml (here I was putted my recyclerview code)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="@dimen/padding_small"
        android:paddingTop="@dimen/padding_small"
        android:weightSum="1">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.33"
            android:background="@drawable/bg_srp_sorter"
            android:clickable="true"
            android:gravity="center"
            android:paddingBottom="@dimen/padding_small"
            android:paddingTop="@dimen/padding_small"
            android:text="Departure" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.33"
            android:background="@drawable/bg_srp_sorter"
            android:gravity="center"
            android:paddingBottom="@dimen/padding_small"
            android:paddingTop="@dimen/padding_small"
            android:text="Duration" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.33"
            android:gravity="center"
            android:paddingBottom="@dimen/padding_small"
            android:paddingTop="@dimen/padding_small"
            android:text="Price" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/lite_gray"></View>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:weightSum="1">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/bus_list_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

    </LinearLayout>
</LinearLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<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/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:layout_scrollFlags="scroll|enterAlways"
    android:minHeight="?attr/actionBarSize">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.10">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/abc_ic_ab_back_mtrl_am_alpha" />


        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.78"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:weightSum="1">

                <TextView
                    android:id="@+id/toolbar_title_source"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.47"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:text="Thiruvananthapuram "
                    android:textColor="@color/white"
                    android:textSize="@dimen/label_text_size_large" />

                <TextView
                    android:id="@+id/toolbar_title_arrow"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.08"
                    android:text="@string/char_right"
                    android:textColor="@color/white"
                    android:textSize="@dimen/label_text_size_large"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/toolbar_title_destination"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.47"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:text=" Cochin"
                    android:textColor="@color/white"
                    android:textSize="@dimen/label_text_size_large" />


            </LinearLayout>


            <TextView
                android:id="@+id/toolbar_sub_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2 Seat(s)"
                android:textColor="@color/lite_gray"
                android:textSize="@dimen/label_text_size_normal" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.13">

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:scaleType="fitCenter"
                android:src="@drawable/filter" />
        </LinearLayout>
    </LinearLayout>

</android.support.v7.widget.Toolbar>

Answer 1

This how I did it:

mRecylerView.addOnScrollListener(new HideShowScrollListener() {
            @Override
            public void onHide() {
                //fab.animate().setInterpolator(new AccelerateDecelerateInterpolator()).scaleX(0).scaleY(0);
               // do your hiding animation here

            }

            @Override
            public void onShow() {
               // fab.animate().setInterpolator(new AccelerateDecelerateInterpolator()).scaleX(1).scaleY(1);
              // do your showing animation here
            }
        });

You will be needing HideShowScrollListener.class

/**
* This class is a ScrollListener for RecyclerView that allows to show/hide
* views when list is scrolled.
* */
public abstract class HideShowScrollListener extends RecyclerView.OnScrollListener {
    private static final int HIDE_THRESHOLD = 20;
    private int scrolledDistance = 0;
    private boolean controlsVisible = true;

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

        if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
            onHide();
            controlsVisible = false;
            scrolledDistance = 0;
        } else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {
            onShow();
            controlsVisible = true;
            scrolledDistance = 0;
        }

        if((controlsVisible && dy>0) || (!controlsVisible && dy<0)) {
            scrolledDistance += dy;
        }
    }

    public abstract void onHide();
    public abstract void onShow();

}

Answer 2

since you are using CoordinatorLayout you could create a custom Behaviour that can achieve what you requested follow example below: create a class that extends CoordinatorLayout.Behavior<View> follow example below:

public class QuickReturnFloaterBehavior extends CoordinatorLayout.Behavior<View> {

    private int distance;

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

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

    @Override public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        if (dy > 0 && distance < 0 || dy < 0 && distance > 0) {
            child.animate().cancel();
            distance = 0;
        }
        distance += dy;
        final int height = child.getHeight() > 0 ? (child.getHeight()) : 600/*update this accordingly*/;
        if (distance > height && child.isShown()) {
            hide(child);
        } else if (distance < 0 && !child.isShown()) {
            show(child);
        }
    }

    private void hide(View view) {
        view.setVisibility(View.GONE);// use animate.translateY(height); instead
    }

    private void show(View view) {
        view.setVisibility(View.VISIBLE);// use animate.translateY(-height); instead
    }

}

now to apply this behaviour add this to your layout

app:layout_behavior="com.example.QuickReturnFloaterBehavior"

Answer 3

Visibility and Hide with Animation in Your Fragment:

recyclerView.addOnScrollListener(new HideShowScrollListener() {
        final Fragment parentFragment = getParentFragment();
        @Override
        public void onHide() {
            bottomLayout.animate().setDuration(200).translationYBy(-bottomLayout.getHeight()).setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        bottomLayout.setVisibility(View.GONE);
                    }
            });
        }

        @Override
        public void onShow() {
            bottomLayout.animate().setDuration(200).translationY(0).setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        bottomLayout.setVisibility(View.VISIBLE);
                    }
            });
        }

        @Override
        public void onScrolled() {
            // To load more data
        }
    });

HideShowScrollListener.java

public abstract class HideShowScrollListener extends RecyclerView.OnScrollListener {
        private static final int HIDE_THRESHOLD = 20;
        private int scrolledDistance = 0;
        private boolean controlsVisible = true;

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

            onScrolled();

            if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
                onHide();
                controlsVisible = false;
                scrolledDistance = 0;
            } else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {
                onShow();
                controlsVisible = true;
                scrolledDistance = 0;
            }

            if((controlsVisible && dy>0) || (!controlsVisible && dy<0)) {
                scrolledDistance += dy;
            }
        }

        public abstract void onHide();
        public abstract void onShow();
        public abstract void onScrolled();
}