Hide/Show Bottomnavigationview on Scroll

Hide/Show bottomNavigationView on Scroll

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());

How to show/hide bottom navigation view on scroll listview?

I don't know why but, after nothing has helped, I found my own escape out of this.

Set the visibiity property of the bottomnavigation view using the onscrollListener on the ListView and it is working just fine.

When scroll bottom navigation bar does not hide - BottomNavigationBehavior

There are two things:

1) You should not override onNestedScroll, it should be onNestedPreScroll, delete onNestedScroll and replace it with that:

@Override
public void onNestedPreScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull View child, @NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
    super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type);
    child.setTranslationY(Math.max(0f,
            Math.min(Float.parseFloat(String.valueOf(child.getHeight())),child.getTranslationY()+dy)));
}

2) In your XML file, you put

app:layout_behavior=".Helper.BottomNavigationBehavior"

And your class name is

BottomNavigationBehaviour

As you can see one is Behaviour, and the other is Behavior, normally it should throw a runtime error, and the app shouldn't be able to run, it may be a typo on your part, but I mentioned it just in case.

But be aware that this code has a bug, if you try to scroll all the way down or up, the RecyclerView item will not be clickable for a couple of seconds, I have a similar bug. For now, my choice is to use animation to hide the BottomNavigationView as explained in this post.

EDIT:

It's possible that the behaviour is not applied because BottomNavigationView is not a direct child of CoordinatorLayout, so you can either delete the RelativeLayout entirely or take the BottomNavigationView out:

<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.blipclap.creativegraphy.HomeActivity"
    tools:showIn="@layout/app_bar_home">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">

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

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutManager="android.support.v7.widget.LinearLayoutManager"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_above="@+id/navigation"
            android:layout_below="@+id/tabLayout"></android.support.v4.view.ViewPager>


    </RelativeLayout>


    <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_gravity="bottom"
            app:layout_behavior=".Helper.BottomNavigationBehavior"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/colorPrimary"
            app:itemIconTint="@android:color/background_dark"
            app:itemTextColor="@android:color/background_dark"
            app:menu="@menu/bottom_navigation_menu">

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

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

BottomNavigationView does not show up when auto hide/show is enabled

I found the answer. instead of changing the visibility property of the bottom_navigation, I wrote two extension functions on BottomNavigationView for hiding/showing it:

private fun BottomNavigationView.showUp() {
    animate().setDuration(200L).translationY(0f).withStartAction { visibility = View.VISIBLE }.start()
}

private fun BottomNavigationView.hideDown() {
    animate().setDuration(200L).translationY(height.toFloat()).withEndAction { visibility = View.GONE }.start()
}

Now in onResume of FragA I have this:

override onResume() {
    super.onResume()
    bottom_navigation.showUp()
}

---

Related Topics