1. Tutorials
  2. Android

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.

❤️ 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
Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager
By Desmond Lua
A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.