Search code examples
androidandroid-layoutandroid-fragmentsbottomnavigationview

Hide/Show bottomNavigationView on Scroll


I have to hide bottom navigation view on up scroll and show on down scroll .how to implement this? my layout is like this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_above="@+id/navigation"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="5dp">

        <FrameLayout
            android:id="@+id/container1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
          />


    </LinearLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        app:menu="@menu/dashboard_slider_menu" />

</RelativeLayout>

I have attached screenshot of view. Kindly check it.

enter image description here


Solution

  • UPDATE Just 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());