CoordinatorLayout is hiding half of the floating action button when CoordinatorLayout 's width is set to wrap_content

Question

So I am trying to make a layout like this:

With a FramLayout to hold fragments and I want the frameLayout to be positioned below the topAppBar and above floatingActionButton but I couldn't make it works

I tried to make a relativeLayout and put the FrameLayout between the topApbar and the coordinatorAyout but it cuts the FAB and the rounded space under the fab disappeared as the image below

This is my activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/AppBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        </com.google.android.material.appbar.AppBarLayout>

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/topToolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/primary"
            app:layout_anchor="@+id/AppBarLayout"
            app:layout_anchorGravity="center"
            app:menu="@menu/top_nav_menu"
            app:title="Reading List">

        </com.google.android.material.appbar.MaterialToolbar>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/topToolbar"
            android:layout_above="@id/coordinatorLayout"
            android:background="@color/purple_500"/>
        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/coordinatorLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/white"
            tools:context=".MainActivity">


            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:backgroundTint="@color/secondary"
                android:src="@drawable/ic_add"
                app:layout_anchor="@id/bottomAppBar"
                app:maxImageSize="55dp"
                app:tint="@color/white" />

            <com.google.android.material.bottomappbar.BottomAppBar
                android:id="@+id/bottomAppBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:backgroundTint="@color/primary">

                <com.google.android.material.bottomnavigation.BottomNavigationView
                    android:id="@+id/bottomNavigationView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginEnd="16dp"
                    android:background="@android:color/transparent"
                    app:elevation="0dp"
                    app:itemIconSize="27dp"
                    app:itemIconTint="@color/white"
                    app:itemTextColor="@color/white"
                    app:menu="@menu/bottom_nav_menu">

                </com.google.android.material.bottomnavigation.BottomNavigationView>

            </com.google.android.material.bottomappbar.BottomAppBar>


        </androidx.coordinatorlayout.widget.CoordinatorLayout>
    </RelativeLayout>


    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:backgroundTint="@color/primary"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/sidebar_header"
        app:menu="@menu/nav_drawer_menu"


        ></com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>

Answer 1

Try this one (I moved all elements into CoordinatorLayout and added app:layout_behavior="@string/appbar_scrolling_view_behavior" to your FrameLayout ):

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        tools:context=".MainActivity">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/AppBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/topToolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/primary"
                app:layout_anchor="@+id/AppBarLayout"
                app:layout_anchorGravity="center"
                app:menu="@menu/top_nav_menu"
                app:title="Reading List" />

        </com.google.android.material.appbar.AppBarLayout>

        <FrameLayout
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/coordinatorLayout"
            android:layout_below="@id/topToolbar"
            android:background="@color/purple_500" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/secondary"
            android:src="@drawable/ic_add"
            app:layout_anchor="@id/bottomAppBar"
            app:maxImageSize="55dp"
            app:tint="@color/white" />

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottomAppBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:backgroundTint="@color/primary">

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottomNavigationView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginEnd="16dp"
                android:background="@android:color/transparent"
                app:elevation="0dp"
                app:itemIconSize="27dp"
                app:itemIconTint="@color/white"
                app:itemTextColor="@color/white"
                app:menu="@menu/bottom_nav_menu">

            </com.google.android.material.bottomnavigation.BottomNavigationView>

        </com.google.android.material.bottomappbar.BottomAppBar>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>


    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:backgroundTint="@color/primary"
        app:headerLayout="@layout/sidebar_header"
        app:menu="@menu/nav_drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>