Floating Action Button and Bottom Navigation View in Android

Question

I am trying to customize a bottombar and floating button position, but I am stuck and can't figure out a way to do it.

For now, the bottom bar and fab is looking like this:

The center of the fab is aligned with the top of the bottom bar but I would like to have it centered in the bottom bar and not aligned with the top.

Below is the code:

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.activities.HomeActivity">

        <fragment
            android:id="@+id/nav_host_fragment_home"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:defaultNavHost="true"
            app:navGraph="@navigation/nav_home_graph" />

        <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="10dp"
            app:fabCradleRoundedCornerRadius="20dp"
            app:fabCradleVerticalOffset="0dp">

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottom_navigation_bar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="16dp"
                android:background="@android:color/transparent"
                app:menu="@menu/nav_bottom_bar" />
        </com.google.android.material.bottomappbar.BottomAppBar>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floating_action_upload"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="add"
            app:fabSize="mini"
            app:srcCompat="@drawable/ic_nav_upload"
            app:layout_anchor="@id/floating_action_video"
            app:layout_anchorGravity="center"/>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floating_action_video"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="add"
            app:fabSize="mini"
            app:srcCompat="@drawable/ic_nav_video"
            app:layout_anchor="@id/floating_action_button"
            app:layout_anchorGravity="center"/>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floating_action_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="add"
            app:srcCompat="@drawable/ic_nav_add"
            app:layout_anchor="@id/bottomAppBar"
            app:layout_anchorGravity="center"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

Also, When clicking on it, I'm opening a menu which look like this:

I would like to set a background to have the camera icon and lib icon which look like connected to the "+" button. So the 3 button share the same background. Kind of a layout which contain everything

any idea ?