How to put Fragment behind Bottom Navigation Bar in Android?

Question

So I have a XML code for an activity

activity_home.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.ui_elements.HomeActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabCradleMargin="13dp"
        android:paddingVertical="9dp"
        app:fabCradleVerticalOffset="4dp"
        app:fabCradleRoundedCornerRadius="20dp"
        app:addElevationShadow="true"
        >
        
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:menu="@menu/bottom_nav_menu"
            android:background="@drawable/transparent_background"
            app:itemIconSize="30dp"
            android:layout_marginHorizontal="16dp"
            app:labelVisibilityMode="unlabeled"
            app:itemHorizontalTranslationEnabled="false"
            />
        
    </com.google.android.material.bottomappbar.BottomAppBar>
    
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/addTaskFab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabCustomSize="80dp"
        app:maxImageSize="60dp"
        android:src="@drawable/baseline_add_60"
        app:layout_anchor="@id/bottomAppbar"
        android:contentDescription="TODO"
        tools:ignore="ContentDescription,HardcodedText" />

    <FrameLayout
        android:id="@+id/fragmentFrameLoader"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

And a fragment

fragment_task.xml

<?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"
    tools:context=".ui.ui_elements.TaskFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/lexend"
        android:text="Task Fragment"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.952" />

</androidx.constraintlayout.widget.ConstraintLayout>

The RESULT

So as you can see that any view (in this case textview saying "Task Fragment") from the Task fragment is above the Bottom Nav Bar, so HOW DO I PUT THEM BEHIND THE BOTTOM NAV BAR?

How do I make it look like all the contents in the the fragments are actually behind the bottom nav bar???