Android Prevent BottomNavigationView Cover/Overlap Content/RecyclerView

May 11, 2018

If you use BottomNavigationView within CoordinatorLayout, you will realize BottomNavigationView will overlap or cover part of the content layout at the bottom.

My prefered solution at the moment is using a RelativeLayout to wrap around CoordinatorLayout (compared to using CoordinatorLayout as root), based on proposal by chet.

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

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:layout_above="@+id/navigation">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <!-- Use this to hide appbar on scroll - app:layout_scrollFlags="scroll|enterAlways" -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

        <!-- this could be a RecyclerView or NestedScrollView -->
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            >

        </FrameLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            app:tint="@android:color/white"
            app:srcCompat="@drawable/ic_photo_camera_black_24dp" />

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

    <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:menu="@menu/navigation"
         />

</RelativeLayout>

Some suggested putting android:layout_marginBottom="56dp" (height of BottomNavigationView is 56dp) to content layout/recyclerview, but this assumption might not always stay true. Alternatively, we can get BottomNavigationView at runtime and adjust it accordingly.

Some suggested using app:layout_dodgeInsetEdges in content layout and app:layout_insetEdge in BottomNavigationView, but this solution cases the top portion of content overlapped by AppBarLayout (probably conflict with app:layout_behavior="@string/appbar_scrolling_view_behavior").

Some suggested putting BottomNavigationView and RecylerView in content layout (which implement app:layout_behavior="@string/appbar_scrolling_view_behavior") to avoid overlapping. The side effected is when Toolbar implement app:layout_scrollFlags="scroll|enterAlways", it will cause BottomNavigationView to be hidden when scroll down.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.