Android AppBarLayout With BottomNavigationView: Hide Toolbar on Scroll With Fixed BottomNavigationView

September 29, 2019

TLDR

To avoid BottomNavigationView hidden when scrolling, BottomNavigationView must not be within layout with app:layout_behavior="@string/appbar_scrolling_view_behavior".

Setup Activity with AppBarLayout

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <application ...>
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

res/layout/main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:layout_above="@+id/bottomNavView"
        >

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </com.google.android.material.appbar.AppBarLayout>

        <!-- <include layout="@layout/main_content" /> -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <fragment
                android:id="@+id/nav_host_fragment"
                android:name="androidx.navigation.fragment.NavHostFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:defaultNavHost="true"
                app:navGraph="@navigation/mobile_navigation" />
        </FrameLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_menu" />

</RelativeLayout>

NOTE: BottomNavigationView must not be within layout with app:layout_behavior="@string/appbar_scrolling_view_behavior" to avoid being hidden/covered during scroll event.

NOTE: Add app:layout_scrollFlags="scroll|enterAlways" to Toolbar to enable hide toolbar on scroll.

NOTE: Refer Android Prevent BottomNavigationView Cover/Overlap Content/RecyclerView

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now

By Desmond Lua

A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.

Tags:

Android Setup BottomNavigationView With Jetpack Navigation UI (Kotlin)

Setup Android BottomNavigationView With Fragment (Kotlin)

BottomNavigationView With FloatingActionButton

Android Setup Custom Appbar (Action bar) and Toolbar

Customize UI of Android BottomNavigationView

Android Switch Fragment Without Losing Ui State (Kotlin)

Android Prevent BottomNavigationView Cover/Overlap Content/RecyclerView

Android Expand/Show Toolbar/AppBar Hidden by Scroll

Android BottomNavigationView: Change Icon and Selected Icon