Using BottomAppBar or BottomNavigationView to create custom bottom view

Question

I would like to create the view below for a test android application. These are the present steps that I have followed to create the view:

1. Created layout file with the coordinator layout as the root element.
2. Added the bottom bar and anchored it to the bottom.
3. Added a floating action button and anchored it to the bottom bar.
4. Created a menu resource file with three menu items.
5. Added the menu item to the bottom bar.

When I run the application, the view looks like the image below:

I have tried using the Bottomnavigationview with the main floating action button being inflated as an action layout in the menu item. Using this approach only allows for the menu items and their test to be displayed but the floating action button is not displayed.

What would be the best approach to use. Using the BottomAppBar or using BottomNavigationView. I am trying to see if I can use the material components available without having to perform hacks.

The XML files are as follows:

activity_main

<?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.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bar"
        app:srcCompat="@mipmap/sharp_local_atm_black_24" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center"
        app:fabCradleRoundedCornerRadius="0dp"
        app:fabCradleMargin="0dp"
        app:fabAnimationMode="slide"
        app:labelVisibilityMode="labeled"
        app:fabCradleVerticalOffset="8dp"
        app:menu="@menu/app_bar_menu"
       />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

The menu XML:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/app_bar_home"
        android:icon="@mipmap/sharp_home_black_24"
        android:title="@string/home"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_wallet"
        android:icon="@mipmap/sharp_account_balance_wallet_black_24"
        android:title="@string/wallet"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_atm"
        android:title="CASH"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_cart"
        android:icon="@mipmap/sharp_shopping_cart_black_24"
        android:title="@string/cart"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_more"
        android:icon="@mipmap/sharp_menu_black_24"
        android:title="@string/more"
        app:showAsAction="always"/>
</menu>

Answer 1

Do it like this

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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:backgroundTint="@color/colorBottomBar"
        app:fabCradleRoundedCornerRadius="16dp"
        app:fabAlignmentMode="center"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:id="@+id/wall_share"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_ripple"
                android:drawableTop="@drawable/ic_share"
                android:gravity="center"
                android:orientation="vertical"
                android:text="@string/share"
                android:fontFamily="@font/lato"
                android:textAllCaps="false"
                android:textColor="@color/colorIconMain">
            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:id="@+id/wall_stats"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_ripple"
                android:drawableTop="@drawable/ic_stats_main"
                android:gravity="center"
                android:orientation="vertical"
                android:text="@string/stats"
                android:fontFamily="@font/lato"
                android:textAllCaps="false"
                android:textColor="@color/colorIconMain">
            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_ripple"
                android:drawableTop="@drawable/ic_blur"
                android:gravity="center"
                android:orientation="vertical"
                android:textColor="@color/colorIconMain"
                android:fontFamily="@font/lato"
                android:textAllCaps="false"
                android:visibility="invisible">
            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:id="@+id/wall_blur"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_ripple"
                android:drawableTop="@drawable/ic_blur"
                android:gravity="center"
                android:orientation="vertical"
                android:text="@string/blur"
                android:fontFamily="@font/lato"
                android:textAllCaps="false"
                android:textColor="@color/colorIconMain">
            </TextView>

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_ripple"
                android:drawableTop="@drawable/ic_filter"
                android:gravity="center"
                android:orientation="vertical"
                android:text="@string/filters_title"
                android:fontFamily="@font/lato"
                android:textAllCaps="false"
                android:textColor="@color/colorIconMain">
            </TextView>

        </LinearLayout>

    </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/ic_save"
        app:tint="@color/colorFabTint"
        app:backgroundTint="@color/colorAccentX"
        app:layout_anchor="@id/bottomAppBar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Result

You can adjust app:fabCradleRoundedCornerRadius and adding a TextView for getting the look you desire.

As requested by the OP, I'm posting my ic_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorRipple">
<item
    android:id="@android:id/mask"
    android:gravity="center">
    <shape android:shape="rectangle">
        <solid android:color="@color/colorRipple"/>
        <corners android:radius="@dimen/card_round"/>
    </shape>
</item>

Answer 2

I would suggest to use the BottomNavigationView as that is more pertinent to your situation. You will get that spread between your menu items as you want, which will not be present in the BottomAppBar (as far as I am aware of).

To achieve the FAB in the center look, you can simply align a FAB custom view on the middle of your BottomNavigationView using CoordinatorLayout.