如何实现两侧分布图标、带FAB的Bottom AppBar，图标为真实MenuItem

实现BottomAppBar左右各分布3个MenuItem的方案 #

步骤1：修改布局中BottomAppBar的基础属性

首先去掉BottomAppBar默认的左右内边距，避免左侧出现空白偏移：

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottom_app_bar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:fabAlignmentMode="center"
    <!-- 关键属性，取消默认内边距 -->
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetEnd="0dp"/>

步骤2：修改menu.xml增加占位item

因为居中FAB会占用中间位置，需要在左右两侧MenuItem中间加一个不可见的占位item，让系统自动把菜单项分配到FAB两侧：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <!-- 左侧3个MenuItem -->
    <item
        android:id="@+id/menu_home"
        android:icon="@drawable/ic_home"
        android:title="@string/title_home"
        app:showAsAction="always" />
    <item
        android:id="@+id/menu_tasks"
        android:icon="@drawable/ic_tasks"
        android:title="@string/title_tasks"
        app:showAsAction="always" />
    <item
        android:id="@+id/menu_habits"
        android:icon="@drawable/ic_timer"
        android:title="@string/title_pomo"
        app:showAsAction="always" />

    <!-- 中间占位item，不显示，用于占住FAB的空间 -->
    <item
        android:id="@+id/menu_placeholder"
        android:title=""
        android:visible="false"
        app:showAsAction="always" />

    <!-- 右侧3个MenuItem -->
    <item
        android:id="@+id/menu_timer"
        android:icon="@drawable/ic_habit"
        android:title="@string/title_habits"
        app:showAsAction="always" />
    <item
        android:id="@+id/menu_stat"
        android:icon="@drawable/ic_stat"
        android:title="@string/title_stat"
        app:showAsAction="always" />
    <item
        android:id="@+id/menu_settings"
        android:icon="@drawable/ic_settings"
        android:title="@string/title_settings"
        app:showAsAction="always" />
</menu>

步骤3：可选间距调整

如果两侧MenuItem对齐有偏差，可在代码中动态调整边距：

// Kotlin代码示例
val menu = bottomAppBar.menu
val space = 24.dpToPx() // 根据需求调整数值
for (i in 0 until menu.size()) {
    val item = menu.getItem(i)
    if (item.itemId == R.id.menu_placeholder) continue
    val actionView = item.actionView ?: continue
    val params = actionView.layoutParams as ViewGroup.MarginLayoutParams
    if (i < 3) params.marginEnd = space
    else params.marginStart = space
    actionView.layoutParams = params
}

// dp转px扩展方法
fun Int.dpToPx(): Int = (this * Resources.getSystem().displayMetrics.density).toInt()

长按弹出说明效果

你要求的点击水波纹、长按弹出标题Toast都是系统MenuItem自带的原生效果，只要给MenuItem设置了android:title属性就会自动生效，不需要额外开发。

内容的提问来源于stack exchange，提问作者Денис Вережников