How to make my TabLayout header be under ToolBar?

Question

I have the app with 5 tabs in TabLayout. I decided to initialize it in MainActivity. Each tab is a fragment and each of them has its own ToolBar, so I decided to initialize toolbars in every fragment separately. But the problem is that my toolbars now are under the TabLaout header. I want to ask how it's possible to move them down or maybe I should organize in some another way?

MainActivity:

<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"
  tools:context=".activity.MainActivity">

  <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/AppTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/tabs" />

</RelativeLayout>

Example of fragment:

<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"
  tools:context=".activity.MainActivity">

  <View
    android:id="@+id/transparent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:alpha="90"
    android:background="#20000000"
    android:visibility="gone" />

  <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_home"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="Your Wi-Fi is online">

    <Button
      android:id="@+id/btn_pause"
      android:layout_width="90dp"
      android:layout_height="36dp"
      android:layout_margin="17dp"
      android:layout_gravity="end"
      android:background="@color/white"
      android:text="@string/pause"
      android:textColor="@color/midPurple"
      android:textSize="14sp" />

  </android.support.v7.widget.Toolbar>
</RelativeLayout>

TabLayout inisialization:

  private void initUIComponents() {
    mViewPager = findViewById(R.id.viewpager);
    mTabLayout = findViewById(R.id.tabs);
    mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

    mViewPager.setAdapter(new MenuCategoryAdapter(getSupportFragmentManager()));
    mTabLayout.setupWithViewPager(mViewPager);

    for (int i = 0; i < mTabLayout.getTabCount(); i++) {
      mTabLayout.getTabAt(i).setIcon(R.drawable.homeicon);
    }
  }

Example of ToolBar initialization:

  private void initUIComponents(LayoutInflater inflater, @Nullable ViewGroup container) {
    mRootView = inflater.inflate(R.layout.fragment_home, container, false);

    mToolbarHome = mRootView.findViewById(R.id.toolbar_home);
    mBtnPause = mRootView.findViewById(R.id.btn_pause);

    if (mToolbarHome != null) {
      ((AppCompatActivity) getActivity()).setSupportActionBar(mToolbarHome);
    }

    mBtnPause.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view) {
        pauseWiFi(mToolbarHome, mBtnPause);
      }
    });
  }

How does it looks like:

Answer 1

One way is you set your ViewPager's height to math_parent, and put TabLayout over your ViewPager with 80dp of top margin to reserve space for fragments toolbar

<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"
    tools:context=".activity.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        style="@style/AppTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</RelativeLayout>

And in your fragment, put fake and empty TabLayout under toolbar to reserve the TabLayout's space and under it you can put your other views

<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"
    tools:context=".activity.MainActivity">

    <View
        android:id="@+id/transparent_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="90"
        android:background="#20000000"
        android:visibility="gone" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_home"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:title="Your Wi-Fi is online">

        <Button
            android:id="@+id/btn_pause"
            android:layout_width="90dp"
            android:layout_height="36dp"
            android:layout_gravity="end"
            android:layout_margin="17dp"
            android:background="@color/white"
            android:text="@string/pause"
            android:textColor="@color/midPurple"
            android:textSize="14sp" />

    </android.support.v7.widget.Toolbar>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar_home"
        android:orientation="vertical">

        <android.support.design.widget.TabLayout
            android:id="@+id/fake_tabs"
            style="@style/AppTabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

        <!-- Your other views -->
    </LinearLayout>
</RelativeLayout>