Why the toolbar is being ignored after I switch a fragment in Android?

Question

I am building an app with a BottomNavigationView where the first tab is loaded correctly:

Tab 1:

However, when I switch to the next tab, it seems the Framelayout goes under the Toolbar like this:

Tab 2:

Tab 1 again:

This is my Layout:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:layout_above="@+id/bottom_navigation"/>
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_menu"
        app:labelVisibilityMode="unlabeled"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/bottom_nav_color"
        app:itemTextColor="@color/bottom_nav_color" />
</RelativeLayout>

There are similar cases like this one:

Part of Fragment items hides under Action bar

But their solutions don't work in my case. Any idea what should I change? Or why the Toolbar loses priority? I already tested to create one by myself in the Layout and it didn't work properly too.

P.S.

I'm loading some WebViews, but I doubt it influences.

Answer 1

I found how to fix it using a CoordinatorLayout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"            
            android:layout_above="@+id/bottom_navigation">
            <FrameLayout
                android:id="@+id/content_frame"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </android.support.design.widget.CoordinatorLayout>
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            app:menu="@menu/bottom_nav_menu"
            app:labelVisibilityMode="unlabeled"
            app:itemBackground="@color/colorPrimary"
            app:itemIconTint="@color/bottom_nav_color"
            app:itemTextColor="@color/bottom_nav_color" />
    </RelativeLayout>
</android.support.v4.widget.DrawerLayout>

I got an idea from here:

https://forums.xamarin.com/discussion/146285/how-to-do-appbarlayout-with-collapsing-toolbarlayout-that-will-collapse-when-viewpager-scroll