title: FrameLayout is overlapping with my BottomAppBar that is embedded inside a CoordinatorLayout
body: <p>The following is my XML snippet, what the problem I'm facing is, the FrameLayout per se, although it's constraints are setup so that the bottom bound sits above the the tab bar, but it doesn't seem to do that. What's more is when a Fragment is loaded into the FrameLayout is just obscured the entire bottom nav/bottom app bar.</p>
  
  <pre><code>
  &lt;android.support.constraint.ConstraintLayout
      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"&gt;
  
      &lt;FrameLayout
          android:id="@id/content"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintBottom_toTopOf="@id/main_tab_bar_layout"
          android:background="@android:color/holo_green_dark" /&gt;
  
      &lt;android.support.design.widget.CoordinatorLayout
          android:id="@+id/main_tab_bar_layout"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:layout_constraintBottom_toBottomOf="parent"&gt;
  
          &lt;android.support.design.widget.FloatingActionButton
              android:id="@+id/mainFloatingActionButton"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:src="@drawable/settingsicon"
              android:backgroundTint="@android:color/holo_orange_dark"
              android:tint="@android:color/white"
              app:layout_anchor="@id/bottom_app_bar" /&gt;
  
          &lt;android.support.design.bottomappbar.BottomAppBar
              android:id="@+id/bottom_app_bar"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_gravity="bottom"
              app:backgroundTint="@android:color/white"
              app:fabAlignmentMode="center"
              app:fabCradleMargin="9dp"
              app:fabCradleRoundedCornerRadius="10dp"
              app:fabCradleVerticalOffset="5dp"
              app:contentInsetStartWithNavigation="0dp"
              app:contentInsetStart="0dp"
              android:outlineAmbientShadowColor="@android:color/black"
              android:outlineSpotShadowColor="@android:color/black"&gt;
  
              &lt;android.support.design.widget.BottomNavigationView
                  android:background="@android:color/transparent"
                  android:id="@+id/bottom_navigation"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  app:menu="@menu/main_tab_navigation"
                  android:outlineAmbientShadowColor="@android:color/transparent"
                  android:outlineSpotShadowColor="@android:color/transparent"
                                  /&gt;
  
          &lt;/android.support.design.bottomappbar.BottomAppBar&gt;
  
  
      &lt;/android.support.design.widget.CoordinatorLayout&gt;
  
  &lt;/android.support.constraint.ConstraintLayout&gt;
  
  
  </code></pre>
  
  <p>All that I am trying to achieve is:</p>
  
  <ul>
  <li>A bottom navigation view /tabs at the bottom</li>
  <li>With a floating action button that's anchored to the center of it.</li>
  <li>Then a FrameLayout where I load my fragments.</li>
  </ul>
  
  <p>Am I doing something completely wrong?</p>