I am trying to put a fab button center of the bottom navigation bar. However it is not working as expected. My code puts fab button to bottom and add to top menu items with spaces. I watched many tutorials and wrote same code but it is not working.

I want this:

But result like this:

My code is below:

dependencies {
    implementation(libs.androidx.appcompat)
    implementation(libs.material)
}

<?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=".MainActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:fabCradleMargin="20dp"
        app:fabCradleVerticalOffset="10dp"
        app:fabAlignmentMode="center"
        app:fabCradleRoundedCornerRadius="20dp"
        android:layout_gravity="bottom">
        <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:menu="@menu/bottom_navbar" />
    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/baseline_add_24"
        app:layout_anchor="@id/bottomAppBar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>


<resources>
    <!-- Base application theme. -->
    <style name="Base.Theme.Android_learning" parent="Theme.Material3.DayNight.NoActionBar">
    </style>
    <style name="Theme.Android_learning" parent="Base.Theme.Android_learning" />
</resources>

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:title="Home"
        android:icon="@drawable/baseline_home_24"/>
    <item
        android:id="@+id/chart"
        android:title="Chart"
        android:icon="@drawable/baseline_bar_chart_24"/>
    <item
        android:id="@+id/fab"
        android:title=""
        android:enabled="false"/>
    <item
        android:id="@+id/card"
        android:title="Card"
        android:icon="@drawable/baseline_credit_card_24"/>
    <item
        android:id="@+id/settings"
        android:title="Settings"
        android:icon="@drawable/baseline_settings_24"/>
</menu>