Unable to Set Floating Action button as Cutted Navigation

Question

I am Working on the Layout to Design like First image I have tried to implement the Layout Like this I always get layout Like the Second Image i have added As I used this Library implementation 'de.hdodenhof:circleimageview:3.1.0' From this Link Link of Library

The Layout xml File I have used to Design the layout like this is

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:fitsSystemWindows="true">
<FrameLayout
    android:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/cordinatorBottom"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/cordinatorBottom"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:background="@color/transparent"
    app:layout_constraintBottom_toBottomOf="parent"

    >

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginTop="32dp"
        android:paddingBottom="0dp"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="25dp"
        app:fabCradleVerticalOffset="0dp"
        android:background="@color/transparent"
        >

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="0dp"
            android:layout_marginEnd="0dp"
            android:background="@drawable/background_transparent"
            app:labelVisibilityMode="selected"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/menu_bottom" />
    </com.google.android.material.bottomappbar.BottomAppBar>


    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/btnAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/plussign"
        app:layout_anchor="@id/bottom_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout></androidx.constraintlayout.widget.ConstraintLayout>

Here is My XML Where I have Created ImageView and having a text under it

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="18dp"
    android:gravity="center"
    android:orientation="vertical">

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/img"
    android:layout_width="@dimen/_67sdp"
    android:layout_height="@dimen/_67sdp"
    android:contentDescription="@string/app_name"
    app:civ_border_color="#FF000000"
    app:civ_border_width="@dimen/_2sdp" />

<TextView
        android:id="@+id/txt"
        android:textSize="8sp"
        android:text="Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:textStyle="normal"/>

I want to Design this layout and i am getting the Layout Like this after all of above Effort in Code

Now layout is looking like this