FrameLayout is overlapping with my BottomAppBar that is embedded inside a CoordinatorLayout

Question

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.

<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">

    <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" />

    <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">

        <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" />

        <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">

            <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"
                                />

        </android.support.design.bottomappbar.BottomAppBar>


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

</android.support.constraint.ConstraintLayout>

All that I am trying to achieve is:

• A bottom navigation view /tabs at the bottom
• With a floating action button that's anchored to the center of it.
• Then a FrameLayout where I load my fragments.

Am I doing something completely wrong?

Answer 1

what's your Nuget version,i test your codes with all nugets version v28.0.0.1,it works well.Maybe you should try to clean solution and restart or update the nuget.

the effect like below :

Update:

<?xml version="1.0" encoding="utf-8"?>
<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.support.design.widget.FloatingActionButton
        android:id="@+id/mainFloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/settingsicon"
        app:layout_anchorGravity="center_horizontal"
        android:backgroundTint="@android:color/holo_orange_dark"
        android:tint="@android:color/white"
        app:layout_anchor="@id/bottom_app_bar" />

   <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


   <FrameLayout
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/bottom_app_bar"
    android:background="@android:color/holo_green_dark" />


    <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:layout_alignParentBottom="true"
        android:outlineAmbientShadowColor="@android:color/black"
        android:outlineSpotShadowColor="@android:color/black">

        <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"
                            />
    </android.support.design.bottomappbar.BottomAppBar>
   </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

the effect like,the framlayout is above the BottomAppBar

Answer 2

You framelayout was overlapping coordinator layout because you have set it's height to match parent and because of this, it was not following the bottom constraint. Change its height to 0dp it will follow the constraint and adjust height accordingly.

Nextly, your coordinator layout's height was match_parent so it was all over the screen not only at the bottom.

Your second bullet is not clear to me so I can't properly answer your question. Is that is anchored to the center of coordinator layout or center of parent layout?

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"  <!-- changed from match parent to 0 dp--->
        android:background="@android:color/holo_green_dark"
        app:layout_constraintBottom_toTopOf="@+id/main_tab_bar_layout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/main_tab_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" <!-- chnaged from match_parent to wrap_content--->
        app:layout_constraintBottom_toBottomOf="parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/mainFloatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@android:color/holo_orange_dark"
            android:src="@drawable/settingsicon"
            android:tint="@android:color/white"
            app:layout_anchor="@id/bottom_app_bar" />

        <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"
            android:outlineAmbientShadowColor="@android:color/black"
            android:outlineSpotShadowColor="@android:color/black"
            app:backgroundTint="@android:color/white"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:fabAlignmentMode="center"
            app:fabCradleMargin="9dp"
            app:fabCradleRoundedCornerRadius="10dp"
            app:fabCradleVerticalOffset="5dp">

            <android.support.design.widget.BottomNavigationView
                android:id="@+id/bottom_navigation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:outlineAmbientShadowColor="@android:color/transparent"
                android:outlineSpotShadowColor="@android:color/transparent"
                app:menu="@menu/main_tab_navigation" />

        </android.support.design.bottomappbar.BottomAppBar>


    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

To stop the overlapping, include a layout in the Coordinator layout and you can use other view in that layout, FrameLayout in your case. In coordinator layout you can use the bottom bar.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/content_main" />

    <!-- Bottom bar -->
       <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:fabAlignmentMode="center"
        app:fabAttached="true"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary">
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:outlineAmbientShadowColor="@android:color/transparent"
            android:outlineSpotShadowColor="@android:color/transparent"
            app:menu="@menu/main_tab_navigation" />
    </com.google.android.material.bottomappbar.BottomAppBar>

    <!-- Floating Action button -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:tint="@android:color/white"
        app:fabSize="normal"
        app:layout_anchor="@id/bar"
        app:srcCompat="@drawable/ic_add_black_24dp" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>