Использование BottomAppBar или BottomNavigationView для создания пользовательского вида снизу

Question

Я хотел бы создать представление ниже для тестового android приложения. Вот настоящие шаги, которые я выполнил, чтобы создать представление:

1. Создан файл макета с макетом координатора в качестве элемента root.
2. Добавил нижнюю панель и закрепил ее к нижней части.
3. Добавлена ​​плавающая кнопка действия и привязана к нижней панели.
4. Создан файл ресурсов меню с тремя пунктами меню.
5. Добавлен пункт меню в нижнюю панель.

Когда я запускаю приложение, вид выглядит как изображение ниже:

Я пытался использовать Bottomnavigationview с основной кнопкой плавающего действия, которая раздувалась как макет действия в пункте меню. Использование этого подхода позволяет отображать только пункты меню и их тест, но кнопка с плавающим действием не отображается.

Какой подход лучше использовать? Использование BottomAppBar или BottomNavigationView. Я пытаюсь выяснить, могу ли я использовать доступные компоненты материала без необходимости выполнять хаки.

Файлы XML выглядят следующим образом:

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>

Меню 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

Сделайте это так

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

Результат

Вы можете настроить app:fabCradleRoundedCornerRadius и добавить TextView для получения желаемого вида .

По просьбе ОП я публикую свой 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

Я бы предложил использовать BottomNavigationView, так как это больше подходит для вашей ситуации. Вы получите тот разброс между вашими пунктами меню, как вы хотите, который не будет присутствовать в BottomAppBar (насколько я знаю).

Чтобы добиться FAB в виде центра, вы можете просто выровнять пользовательское представление FAB в середине вашего BottomNavigationView с использованием CoordinatorLayout.