TabLayout covered content in fragments

Question

I recently added a TabLayout wrapped in an AppBarLayout that previously contains the toolbar, but now the fragments hosted by the TabLayout, which should be beneath it, got covered by the TabLayout, I have tried adding android:layout_below="@+id/tablayout" to my ViewPager (which contains the fragments), and adding app:layout_behavior="@string/appbar_scrolling_view_behavior" to the TabLayout itself, but neither of the methods worked, here's the code for my layout file:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    tools:context="com.jackz314.todo.MainActivity"
    android:id="@+id/total_main_bar"
    >

    <include
        android:id="@+id/include"
        layout="@layout/content_main"
        app:layout_anchor="@+id/app_bar_layout"
        app:layout_anchorGravity="left|bottom"
        />

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

        <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.TabLayout
            android:id="@+id/tabs_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:tabMode="fixed"
            app:tabGravity="fill" />

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

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

note that the fragments' layouts are contained in "content_main, which is in that include part. I am pretty new to Android, so any kind of help or suggestions would be really appreciated.

Answer 1

After checking and modifying all kinds of stuff in my layout files, I moved the ViewPager from the included layout file to the same file that contains the TabLayout, then applying app:layout_behavior="@string/appbar_scrolling_view_behavior" to the ViewPager fixed the problem. (If it's not in your string file already, android.support.design.widget.AppBarLayout$ScrollingViewBehavior is the value for it)

Frankly, I'm still pretty confused why this would work (because I tried applying the same attribute to the include section, but that didn't work), so if anyone could help me out with this, that would be great.