title: CoordinatorLayout content child overlaps BottomNavigationView
body: <p>I'm trying to use a <code>CoordinatorLayout</code> with a <code>BottomNavigationView</code>, an <code>AppBarLayout</code>, and a <code>ViewPager</code>. Here is my layout:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &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:layout_width="match_parent"
      android:layout_height="match_parent"
      android:fitsSystemWindows="true"
      tools:context=".MainActivity"&gt;
  
      &lt;android.support.design.widget.AppBarLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:fitsSystemWindows="true"
          android:theme="@style/AppTheme.AppBarOverlay"&gt;
  
          &lt;android.support.v7.widget.Toolbar
              android:id="@+id/toolbar"
              android:layout_width="match_parent"
              android:layout_height="?attr/actionBarSize"
              app:layout_scrollFlags="enterAlways|scroll"
              app:popupTheme="@style/AppTheme.PopupOverlay"/&gt;
  
      &lt;/android.support.design.widget.AppBarLayout&gt;
  
      &lt;android.support.v4.view.ViewPager
          android:id="@+id/pager"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:layout_behavior="@string/appbar_scrolling_view_behavior"/&gt;
  
      &lt;android.support.design.widget.BottomNavigationView
          android:id="@+id/navigation"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="bottom"
          android:background="?android:attr/windowBackground"
          app:itemIconTint="?colorPrimaryDark"
          app:itemTextColor="?colorPrimaryDark"
          app:menu="@menu/navigation"/&gt;
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
  </code></pre>
  
  <p>The problem is that the <code>CoordinatorLayout</code> places the <code>ViewPager</code> to extend to the bottom of the screen, so the bottom is obscured by the <code>BottomNavigationView</code>, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/4DK79.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4DK79.png" alt="bounds of ViewPager"></a></p>
  
  <p>This happens even though the <code>CoordinatorLayout</code> itself doesn't extend down so far:</p>
  
  <p><a href="https://i.stack.imgur.com/w2z6p.png" rel="noreferrer"><img src="https://i.stack.imgur.com/w2z6p.png" alt="bounds of CoordinatorLayout"></a></p>
  
  <p>I've tried adding <code>app:layout_insetEdge="bottom"</code> to the <code>BottomNavigationView</code> and <code>app:layout_dodgeInsetEdges="bottom"</code> to the <code>ViewPager</code>, but that has a different problem: it shifts the bottom of the <code>ViewPager</code> up, but it keeps the same height, so the top is now chopped off:</p>
  
  <p><a href="https://i.stack.imgur.com/eboU9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eboU9.png" alt="shifted ViewPager bounds"></a></p>
  
  <p>I tried two other experiments. First, I tried removing the <code>BottomNavigationView</code> from the  <code>CoordinatorLayout</code> and making them siblings under a vertical <code>LinearLayout</code>. Second, I put the <code>ViewPager</code> and <code>BottomNavigationView</code> together under a <code>LinearLayout</code>, hoping they would layout out correctly. Neither helped: in the first case, the <code>CoordinatorLayout</code> still sized the <code>ViewPager</code> with respect to the entire screen, either hiding part of it behind the <code>BottomNavigationView</code> or chopping off the top. In the second case, the user needs to scroll to see the <code>BottomNavigationView</code>.</p>
  
  <p>How do I get the layout right?</p>
  
  <p>P.S. When I tried <a href="https://stackoverflow.com/a/47917710/535871">the layout suggested by @Anoop S S</a> (putting the <code>CoordinatorLayout</code> and the <code>BottomNavigationView</code> as siblings under a <code>RelativeLayout</code>), I get the following (with the <code>ViewPager</code> still extending down behind the <code>BottomNavigationView</code>):</p>
  
  <p><a href="https://i.stack.imgur.com/uCtvF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uCtvF.png" alt="result of Anoop&#39;s layout"></a></p>
  
  <p>As before, the <code>CoordinatorView</code> itself only extends down to the top of the <code>BottomNavigationView</code>.</p>