BottomNavigationView hides when scrolling up instead of down

Question

The new BottomNavigationView from support library v25.0.0 is supposed to hide when scrolling down, in order to see all the items from a list. However, in my testing scenario, the view hides when scrolling up. Any ideas what can cause this reverse behavior?

The inner_fragment is set up as a Fragment inserted inside the activity_main_framelayout_content Framelayout. XML layouts below:

main_activity.xml:

<android.support.design.widget.CoordinatorLayout
        android:id="@+id/activity_main_coordinatorlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

        <android.support.v7.widget.Toolbar
                android:id="@+id/activity_main_toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                android:background="?attr/colorPrimary"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways">

            <include layout="@layout/activity_main_spinner_layout"/>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <FrameLayout
            android:id="@+id/activity_main_framelayout_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:fitsSystemWindows="true"/>
</android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.NavigationView
        android:id="@+id/activity_main_framelayout_navigation_drawer"
        android:layout_width="@dimen/drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        android:background="@color/color_black_700"/>

inner_fragment.xml:

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

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

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/inner_fragment_bottom_navigation_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:menu="@menu/inner_fragment"
            app:itemBackground="@drawable/bg_bottom_navigation"
            app:itemIconTint="@color/ic_bottom_navigation"
            app:itemTextColor="@color/ic_bottom_navigation"/>
</FrameLayout>

You should put the BottomNavigationView as the direct child of CoordinatorLayout. Also from my try, i think behavior is not supported right now for BottomNavigationView, or you should implement your own custom behavior. — Srijith, Oct 21 '16 at 08:32
The behavior clearly works even if it isn't a direct child, as it would not scroll at all if it didn't. Even NestedScrollview's that aren't direct children of the CoordinatorLayout still work flawlessly, so I don't think this is the problem. — Bogdan Zurac, Oct 21 '16 at 08:53
No, it isnt support app:layout_scrollFlags="scroll|enterAlways" — Shawn Thye, Oct 22 '16 at 18:36
The BottomNavigationView responds to scroll events even without setting the scrollFlags. Setting the flags doesn't change anything. — Bogdan Zurac, Oct 24 '16 at 09:02
How did you work around this @BogdanZurac? I have the exact same situation. — Chris Rohit Brendan, Jun 24 '18 at 13:38
Listener on the AppBarLayout and moving the BottomNavigationView inside the main layout, as I recall. — Bogdan Zurac, Jun 24 '18 at 13:40
Thank you @BogdanZurac, I will try implementing it that way. — Chris Rohit Brendan, Jun 24 '18 at 13:46

score 11 · Answer 1 · answered Jun 30 '17 at 14:42

11

A simple solution is to just add an offset listener to appbarlayout. Works perfectly for me.

So something like this:

((AppBarLayout)toolbar.getParent()).addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        mNavigationBar.setTranslationY(verticalOffset*-1);
    }
});

answered Jun 30 '17 at 14:42

Tobbbe

528
2
7
16

This works when the BottomNavigationView is inside the parent CoordinatorLayout, but it stops working altogether when you move the BottomNavigationView inside the FrameLayout. – Bogdan Zurac May 15 '18 at 09:51
By far the best solution I found – GuilhermeFGL Jun 19 '18 at 14:25
I wasted one full day to figure out what's the issue. You saved my time bro. Thanks for the solution. Best solution. – Abhishek Charismatic Oct 21 '19 at 09:38

score 9 · Accepted Answer · answered Oct 24 '16 at 13:49

9

This release of BottomNavigationView is missing scrolling behavior to work out of the box as specified in the guidelines.

I wrote an article on what's missing and how you can fix it. This includes implementing scrolling behavior of the BottomNavigationView in CoordinatorLayout.

answered Oct 24 '16 at 13:49

Nikola Despotoski

49,966
15
119
148

Doesn't appear to be having any effect though. Bear in mind that the whole inner fragment is contained inside of a FrameLayout with appbar_scrolling_view_behavior. – Bogdan Zurac Oct 24 '16 at 14:19
You are doing something wrong. View that has the behavior must be direct descendant of the `CoordinatorLayout`. – Nikola Despotoski Oct 24 '16 at 14:26
1

Well yeah, but in this use case, it is contained inside of a Fragment that can be swapped with other fragments inside the main activity. So cannot do that effectively with the current navigation structure... However, how do you explain that the default behavior works without any changes whatsoever for the BottomNavigationView? Granted, in reverse compared to the Toolbar, but still. LE: I can confirm though that using it as a direct child of CoordinatorLayout works. – Bogdan Zurac Oct 24 '16 at 14:29

score 1 · Answer 3 · edited May 23 '17 at 12:09

My solution was to replace the FrameLayout with a NestedCoordinatorLayout from here https://stackoverflow.com/a/37660246/2233621 and then add the BottomNavigationBehavior from Nikola's blog post https://medium.com/@nullthemall/bottomnavigationview-missing-pearls-eaa950f9ad4e#.p1i01wwui that way your bottom navigation behaviour can listen for nested scrolling of the fragment inside the NestedCoordinatorLayout

I believe you could use another view that implements NestedScrollParent + NestedScrollChild for the same behaviour.

BottomNavigationView hides when scrolling up instead of down

3 Answers3

Linked