How to prevent FAB overlaying BottomSheet when Expanded?

Question

I'm using Material FAB and BottomSheet in my Android App and i'm having some issues with the FAB which is overlaying the BottomSheet and i would prevent it.

Actually i have two BottomSheets when the BottomSheet1 is completly expanded i would the FAB to be behind the BottomSheet while when the BottomSheet2 is HalfExpanded i would it to be over the BottomSheet and make it behind it when it's fully expanded.

I've yet tried to make the BottomSheet elevation highter than the FAB one but it's not working any way.

Here is how my code looks like:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    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"
    tools:context=".LetturaActivity">

        <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_gravity="bottom"
        app:navigationIcon="@drawable/ic_baseline_menu_24"
        app:menu="@menu/bottom_app_bar"
        app:hideOnScroll="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" \>
   
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabNuovo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_add"
        android:elevation="4dp"
        app:tint="@color/white"
        android:contentDescription="@string/nuovo_documento"
        app:layout_anchor="@id/bottomAppBar"
        />


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

</androidx.coordinatorlayout.widget.CoordinatorLayout>

And the BottomSheet parent layout is the following:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottomSheetTestata"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    app:behavior_hideable="true"
    android:elevation="5dp"
    android:clickable="false"
    android:focusable="false"
    app:behavior_peekHeight="0dp"
    app:layout_behavior="@string/bottom_sheet_behavior"
    android:orientation="vertical">

   ...

<\LinearLayout>

But it looks like this when BottomSheet is expanded:

Answer 1

Is not overlapping is overlaying, the problem is the elevation.

From the documentation you can see all elements have different elevations.

Fab is 6dp, although the BottomSheet is not easy to find is there, it should be 16dp (you can use your browser functionality for the keyword bottom)

So change your elevation to

android:elevation="16dp"