title: Parallax TabLayout with collapsing Toolbar and imageview
body: <p>I'm trying to get 3 tabs to appear at the bottom of my ImageView, and ideally overlapping it so that when you scroll down the ViewPager you can still see the tabs. </p>
  
  <p>The problem I'm having is the tabs are above the ImageView and get pushed off screen so you can't see them when you scroll downwards.</p>
  
  <p>Here is my XML layout:</p>
  
  <pre><code>&lt;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:id="@+id/main_content"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@android:color/white"
  android:fitsSystemWindows="true"
  tools:context="com.example.aine.cardview.MainActivityTabbed"&gt;
  
      &lt;android.support.design.widget.AppBarLayout
          android:id="@+id/appbar"
          android:layout_width="match_parent"
          android:layout_height="@dimen/detail_backdrop_height"
          android:paddingTop="@dimen/appbar_padding_top"
          android:theme="@style/AppTheme.AppBarOverlay"&gt;
  
  
          &lt;android.support.design.widget.CollapsingToolbarLayout
              android:id="@+id/collapsing_toolbar"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:fitsSystemWindows="true"
              app:contentScrim="?android:attr/colorControlHighlight"
              app:expandedTitleMarginEnd="64dp"
              app:expandedTitleMarginStart="48dp"
              app:expandedTitleTextAppearance="@android:color/transparent"
              app:layout_scrollFlags="scroll|exitUntilCollapsed"&gt;
  
          &lt;RelativeLayout
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"&gt;
  
              &lt;ImageView
                  android:id="@+id/backdrop"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:fitsSystemWindows="true"
                  android:scaleType="centerCrop"
                  app:layout_collapseMode="parallax" /&gt;
  
  
          &lt;/RelativeLayout&gt;
  
          &lt;android.support.v7.widget.Toolbar
              android:id="@+id/toolbar"
              android:layout_width="match_parent"
              android:layout_height="?attr/actionBarSize"
              android:background="?attr/colorPrimary"
              app:layout_scrollFlags="scroll|enterAlways"
              app:popupTheme="@style/AppTheme.PopupOverlay"&gt;
          &lt;/android.support.v7.widget.Toolbar&gt;
  
          &lt;android.support.design.widget.TabLayout
              android:id="@+id/tabs"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              app:tabMode="fixed"
              app:tabGravity="fill"/&gt;
  
  
          &lt;/android.support.design.widget.CollapsingToolbarLayout&gt;
  
  &lt;/android.support.design.widget.AppBarLayout&gt;
  
  &lt;android.support.v4.view.ViewPager
      android:id="@+id/container"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"/&gt;
  </code></pre>
  
  <p></p>
  
  <p>I'm not too familiar with how TabLayouts work so I'm not too sure how to fix this.</p>
  
  <p>EDIT: Here is a screenshot of what it looks like initially:
  <a href="https://i.stack.imgur.com/X8Iy0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X8Iy0.png" alt="enter image description here"></a></p>
  
  <p>And here is what it looks like when you scroll down:
  <a href="https://i.stack.imgur.com/I1CcW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I1CcW.png" alt="enter image description here"></a></p>