AppbarLayout with Toolbar, Navigation Drawer, and tabs

Question

I'm developing an app that has a Main Activity and a Navigation Drawer to switch between different fragments inside the Main Activity.
One of the fragments contains a tab layout.
My layouts are a mess and they don't behave or perform properly.
Here is my XML:
Main:

<android.support.v4.widget.DrawerLayout 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:layout_gravity="right"
      android:fitsSystemWindows="true"
      android:clickable="true"
      android:layoutDirection="rtl"
      android:id="@+id/drawer_layout">
      <RelativeLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layoutDirection="rtl"
          android:background="#EEEEEE"
          android:clickable="true">

          <include
              android:id="@+id/toolbar"
              android:gravity="right"
              layout="@layout/toolbar"
              android:clickable="true" />

          <FrameLayout
              android:id="@+id/content_frame"
              android:layout_below="@id/toolbar"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:clickable="true" />
          <android.support.design.widget.FloatingActionButton
              android:id="@+id/mainFab"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentBottom="true"
              android:layout_alignParentLeft="true"
              android:layout_gravity="bottom|end"
              android:layout_marginLeft="16dp"
              android:layout_marginBottom="16dp"
              android:layout_marginTop="5dp"
              android:elevation="8dp"
              app:pressedTranslationZ="12dp"
              app:backgroundTint="?android:colorAccent"
              android:src="@drawable/ic_perm_phone_msg_white_24px" />
          <LinearLayout
              android:id="@+id/miniFabFrame"
              android:orientation="vertical"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:visibility="invisible"
              android:layout_alignParentLeft="true"
              android:layout_gravity="bottom|end"
              android:layout_marginLeft="20dp"
              android:layout_above="@id/mainFab"
              android:padding="0dp">
              <android.support.design.widget.FloatingActionButton
                  android:id="@+id/messageFab"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentBottom="true"
                  android:layout_alignParentLeft="true"
                  android:elevation="8dp"
                  android:layout_marginTop="5dp"
                  android:layout_marginRight="0dp"
                  android:layout_marginBottom="5dp"
                  android:layout_marginLeft="5dp"
                  app:pressedTranslationZ="12dp"
                  app:backgroundTint="?android:colorPrimary"
                  app:fabSize="mini"
                  android:src="@drawable/ic_textSMS_white_24px" />
              <android.support.design.widget.FloatingActionButton
                  android:id="@+id/callFab"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentBottom="true"
                  android:layout_alignParentLeft="true"
                  android:layout_marginTop="5dp"
                  android:layout_marginRight="0dp"
                  android:layout_marginBottom="5dp"
                  android:layout_marginLeft="5dp"
                  android:elevation="8dp"
                  app:pressedTranslationZ="12dp"
                  app:backgroundTint="?android:colorPrimary"
                  app:fabSize="mini"
                  android:src="@drawable/ic_call_white_24px" />
          </LinearLayout>
      </RelativeLayout>

      <android.support.design.widget.NavigationView
          android:layout_width="wrap_content"
          android:layout_height="match_parent"
          android:layout_gravity="right"
          android:id="@+id/nav_view"
          android:layoutDirection="rtl"
          app:headerLayout="@layout/header"
          app:menu="@menu/nav_menu" />
  </android.support.v4.widget.DrawerLayout>

Tabs Fragment:

<LinearLayout 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:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="true"
    android:id="@+id/halachot_layout"
    android:layoutDirection="ltr">
    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <com.refractored.PagerSlidingTabStrip
            android:id="@+id/halachotTabs"
            android:layout_below="@id/halachot_layout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:fitsSystemWindows="true"
            pstsPaddingMiddle="false"
            app:pstsShouldExpand="true" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/halachotPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

I want to use Coordinator Layout in my Main layout, and use AppBarLayout to wrap the Toolbar, although I don't know how to use them.
If someone could please help me organize my layout properly, with some explanations of how this works and what I am doing wrong, I would appreciate it very very much.

Thanks!

Answer 1

Firstly create an activity layout which contains Navigation Drawer and ToolBar

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
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.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:background="@drawable/ab_bg2"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@style/Base.TextAppearance.AppCompat.Subhead"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleMarginBottom="40dp">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:contentInsetStart="0dp"/>

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

    <!-- Framelayout to display Fragments -->
   <FrameLayout
    android:id="@+id/frame_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="5dp"
    android:layout_marginRight="3dp"
    android:layout_marginTop="5dp"
    android:background="@drawable/linlayoutshape_shadow"
    android:tag="@string/layout_default"/>

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

<ListView
    android:id="@+id/list_slidermenu"
    android:layout_width="250dp"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:background="@color/Drawer_bg"
    android:choiceMode="singleChoice"
    android:divider="@color/Drawer_bg"
    android:dividerHeight="10dp"
    android:listSelector="@drawable/list_selector"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp" />

Now create a Fragment which will show your Tab layout

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

   <com.utils.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@drawable/background_tab"
        app:pstsShouldExpand="true" />

    <com.utils.CustomViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/linHeader"
        android:background="@drawable/background_tab"
        tools:context=".TestBoardActivity" />
</RelativeLayout>