Hide/Show bottomNavigationView on Scroll Hide/Show bottomNavigationView on Scroll android android

Hide/Show bottomNavigationView on Scroll


UPDATEJust add one attribute to BottomNavigationView

Material Library AndroidX

<com.google.android.material.bottomnavigation.BottomNavigationView .... app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"/>

Support Library Version 28.0.0 or higher version

<android.support.design.widget.BottomNavigationView .... app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"/>

Note:- Your XML should follow the structure of XML given below in old answer.


**OLD ANSWER(Still Works)**

You need a helper class to do this .This solution works like Google Material Design Guideline.

Create a class BottomNavigationViewBehavior

public class BottomNavigationViewBehavior extends CoordinatorLayout.Behavior<BottomNavigationView> {    private int height;    @Override    public boolean onLayoutChild(CoordinatorLayout parent, BottomNavigationView child, int layoutDirection) {        height = child.getHeight();        return super.onLayoutChild(parent, child, layoutDirection);    }    @Override    public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout,                                   BottomNavigationView child, @NonNull                                    View directTargetChild, @NonNull View target,                                   int axes, int type)    {        return axes == ViewCompat.SCROLL_AXIS_VERTICAL;    }    @Override    public void onNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull BottomNavigationView child,               @NonNull View target, int dxConsumed, int dyConsumed,               int dxUnconsumed, int dyUnconsumed,                 @ViewCompat.NestedScrollType int type)    {       if (dyConsumed > 0) {           slideDown(child);       } else if (dyConsumed < 0) {           slideUp(child);       }    }    private void slideUp(BottomNavigationView child) {        child.clearAnimation();        child.animate().translationY(0).setDuration(200);    }    private void slideDown(BottomNavigationView child) {        child.clearAnimation();        child.animate().translationY(height).setDuration(200);    }}

For using this behavior you need to use cooradinator layout...

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.kliff.digitaldwarka.activity.MainActivity">    <android.support.design.widget.CoordinatorLayout        android:id="@+id/coordinator_layout"        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.design.widget.AppBarLayout            android:id="@+id/myAppBar"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:descendantFocusability="beforeDescendants"            android:focusableInTouchMode="true"            android:theme="@style/AppTheme.AppBarOverlay"            app:elevation="0dp">            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="?attr/colorPrimary"                app:contentInsetStart="0dp"                app:layout_scrollFlags="scroll|enterAlways"                app:popupTheme="@style/AppTheme.PopupOverlay"/>        </android.support.design.widget.AppBarLayout>        <!---your RecyclerView/Fragment Container Layout-->        <FrameLayout             android:id="@+id/container"             android:layout_width="match_parent"             android:layout_height="match_parent"             app:layout_behavior="@string/appbar_scrolling_view_behavior" />                 <android.support.design.widget.BottomNavigationView             android:id="@+id/bottom_nav"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_gravity="bottom"             app:itemBackground="@color/white"             app:menu="@menu/bottom_nav_menu" />      </android.support.design.widget.CoordinatorLayout>      <!---NavigationView--></android.support.v4.widget.DrawerLayout>

Add this code to your Activity that contains bottom nav..

mBottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_nav);CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) mBottomNavigationView.getLayoutParams();    layoutParams.setBehavior(new BottomNavigationViewBehavior());


Try this,

 mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {            @Override            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {                if (dy > 0 && bottom_navigation.isShown()) {                    bottom_navigation.setVisibility(View.GONE);                } else if (dy < 0 ) {                    bottom_navigation.setVisibility(View.VISIBLE);                }            }            @Override            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {                super.onScrollStateChanged(recyclerView, newState);            }        });

Image while scrolling up :-

click here for scrolling up image

Image while scrolling down:

click here for scrolling down image


Updated answer after the latest library updates:

Hiding the BottomNavigationView on scrolling is now available with just one flag in the layout! Starting from version 28.0.0-alpha1 or the material/androidX 1.0.0-alpha1.

I updated my project using the latter approach since the version now is a stable release candidate. Update: Use fully released version "1.0.0"!

The new out of the box available behaviour is called HideBottomViewOnScrollBehavior. Set it on the BottomNavigationView asapp:layout_behavior="@string/hide_bottom_view_on_scroll_behavior" as described in the latest docs.

Here is a full example:

<com.google.android.material.bottomnavigation.BottomNavigationView        android:id="@+id/navigation"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:labelVisibilityMode="selected"        app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"        android:layout_gravity="bottom"        app:layout_insetEdge="bottom"        app:menu="@menu/navigation" />

As with the hiding of the Toolbar on scrolling, you have to ensure that the content is a class that supports the latest scrolling like RecyclerView and NestedScrollView.

This ensures all is working as shown in the animation on the design specs

PS: labelVisibilityMode is another cool addition you get for free for taking the trouble of updating and that is described in depth in the design specs.