[BottomNavigationView] Request for FAB support similar to BottomAppBar

[SupasinTatiyanupanwong]

I have scenario that I would need to add FAB to the BottomNavigationBar similar to this screenshot.

Apparently I see that BottomAppBar have this scenario supported, but not for BottomNavigationBar

Describe the solution you'd like

Provide similar FAB support from BottomAppBar to BottomNavigationBar.

Describe alternatives you've considered

Here is how I workaround at the moment by readjust my existing layout to achieve the same UI. Suggestions also welcome if it will not fit to include in libs (Probably can be app-specific use case rather to be included in libs I guess?).

Layout

<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">

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

    <FrameLayout
        android:id="@+id/home_touch_interceptor"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible" />

    <androidx.cardview.widget.CardView
        android:id="@+id/home_bottom_sheet"
        android:layout_width="@dimen/bottom_sheet_width"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        app:behavior_hideable="false"
        app:behavior_peekHeight="0dp"
        app:cardBackgroundColor="?colorPrimaryVariant"
        app:cardElevation="0dp"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

         <!-- TODO extra menu upon tapping FAB -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center" />

    </androidx.cardview.widget.CardView>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/home_bottom_navigation"
        style="@style/Widget.MaterialComponents.BottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:elevation="@dimen/bottom_bar_elevation"
        app:labelVisibilityMode="labeled" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/home_bottom_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add_24px"
        android:tint="?colorOnPrimary"
        app:elevation="@dimen/bottom_bar_elevation"
        app:layout_anchor="@id/home_bottom_navigation"
        app:layout_anchorGravity="center_horizontal" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Menu

<menu
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:icon="@drawable/ic_apps_24px"
        android:title="Apps" />

    <item
        android:icon="@drawable/ic_pins_24px"
        android:title="Pins" />

    <!-- Extra space for FAB -->
    <item
        android:enabled="false"
        tools:ignore="MenuTitle" />

    <item
        android:icon="@drawable/ic_profile_24px"
        android:title="Profile" />

    <item
        android:icon="@drawable/ic_more_24px"
        android:title="More" />

</menu>