how can i show , add fab icon in centre using bottom navigation view

Question

I have tried this but its not showing fab icon size bigger in centre and used almost solution on this site . I want to achieve like below youtube bottom centre icon.

<!--  Bottom Menu -->
                    <RelativeLayout
                        android:id="@+id/home_page_navigation"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="0.7"
                        android:background="@color/background_color"
                        android:gravity="bottom"
                        android:layout_marginTop="2dp"
                        android:orientation="horizontal">
    
    
                        <com.google.android.material.bottomnavigation.BottomNavigationView
                            android:id="@+id/navigation_view"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_alignParentBottom="true"
                            android:background="@color/bottom_navigation_view_color"
                            app:itemIconTint="@color/selector_item_primary_color"
                            app:itemTextColor="@color/selector_item_primary_color"
                            app:labelVisibilityMode="labeled"
                            app:menu="@menu/menu_navigation"/>
    
                        <com.google.android.material.floatingactionbutton.FloatingActionButton
                            android:id="@+id/fab_button"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentBottom="true"
                            android:layout_centerHorizontal="true"
                            android:src="@drawable/ic_add_icon"
                            android:tint="@color/colorGray"
                            android:background="@color/bottomcolor"
                            app:borderWidth="0dp"
                            app:elevation="9dp"
                            android:contentDescription="add" />
    
                    </RelativeLayout>

Answer 1

I have achieved this using coordinator layout , might be it will help others. Here is my code

<androidx.coordinatorlayout.widget.CoordinatorLayout
                        android:id="@+id/home_page_navigation"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"> 
                   <com.google.android.material.bottomnavigation.BottomNavigationView
                            android:id="@+id/nav_view"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="bottom"
                            android:background="@color/bottom_navigation_view_color"
                            app:itemIconTint="@color/selector_item_primary_color"
                            app:itemTextColor="@color/selector_item_primary_color"
                            app:labelVisibilityMode="labeled"
                            app:elevation="0dp"
                            app:menu="@menu/menu_navigation"
                            app:theme="@style/Theme.MaterialComponents"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
                            android:id="@+id/fab_button"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:contentDescription="add"
                            android:src="@drawable/ic_add_icon"
                            app:backgroundTint="@color/bottom_navigation_view_color"
                            app:elevation="0dp"
                            app:layout_anchor="@+id/nav_view"
                            app:layout_anchorGravity="center"
                            app:maxImageSize="40dp" />
                    </androidx.coordinatorlayout.widget.CoordinatorLayout>`