底部 AppBar，两边都有图标答案

【问题标题】：Bottom AppBar with icons on both sides底部 AppBar，两边都有图标
【发布时间】：2021-10-01 19:33:05
【问题描述】：

默认情况下，fab 在中心，所有图标都向右对齐，但我需要在一侧和另一侧有 3 个图标，如下例所示。

截图显示点击其中一个按钮，这样的涟漪在底部应用栏（不在底部导航中），点击时也会出现吐司，这只能是非假菜单项，而不是例如图像按钮。

重要的是每个图标都是一个真正的菜单项（不是图像按钮），长按菜单项应该在图标上显示一个吐司（如您在屏幕截图中所见），这非常重要。非常感谢您的帮助！

menu.xml

<?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">
    <item
        app:showAsAction="always"
        android:id="@+id/menu_home"
        android:layout_alignParentRight="true"
        android:icon="@drawable/ic_home"
        android:title="@string/title_home" />

    <item
        app:showAsAction="always"
        android:id="@+id/menu_tasks"
        android:icon="@drawable/ic_tasks"
        android:title="@string/title_tasks" />

    <item
        app:showAsAction="always"
        android:id="@+id/menu_habits"
        android:icon="@drawable/ic_timer"
        android:title="@string/title_pomo" />

    <item
        android:id="@+id/menu_timer"
        app:showAsAction="always"
        android:icon="@drawable/ic_habit"
        android:title="@string/title_habits" />
</menu>

当前结果：

【问题讨论】：

这能回答你的问题吗？ Bottom app bar problem with placing icons
@javdromero，这个解决方案使用了一个图像按钮，这就是为什么我不会像使用 menuitem 那样长按图标来祝酒
您可以通过长按图像视图来实现涟漪效果和敬酒，还有其他帖子。

标签： android material-design android-bottomappbar

【解决方案1】：

我做到了！我在 ActionMenuView 中膨胀了菜单的左侧。

在布局中：

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:contentInsetStart="0.0dip"
    android:contentInsetLeft="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:menu="@menu/bottom_nav_menu_right">

    <androidx.appcompat.widget.ActionMenuView
        android:id="@+id/additional_menu"
        android:layout_width="wrap_content"
        android:layout_height="?actionBarSize" />
</com.google.android.material.bottomappbar.BottomAppBar>

bottom_nav_menu_left：

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

    <item
        android:id="@+id/menu_tasks"
        android:layout_alignParentRight="true"
        android:icon="@drawable/ic_tasks"
        android:title="tasks"
        app:showAsAction="always" />

    <item
        android:id="@+id/menu_habit"
        android:layout_alignParentRight="true"
        android:icon="@drawable/ic_habit"
        android:title="habits"
        app:showAsAction="always" />

    <item
        android:id="@+id/menu_add"
        android:layout_alignParentRight="true"
        android:icon="@drawable/ic_add"
        android:title="add"
        app:showAsAction="always" />
</menu>

bottom_nav_menu_right：

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

    <item
        android:id="@+id/menu_nav"
        android:layout_alignParentRight="true"
        android:icon="@drawable/ic_menu"
        android:title="menu"
        app:showAsAction="always" />

    <item
        android:id="@+id/menu_home"
        android:layout_alignParentRight="true"
        android:icon="@drawable/ic_home"
        android:title="home"
        app:showAsAction="always" />

    <item
        android:id="@+id/menu_timer"
        android:layout_alignParentRight="true"
        android:icon="@drawable/ic_timer"
        android:title="timer"
        app:showAsAction="always" />
</menu>

带有左侧图标的膨胀菜单：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ...
        val actionMenuView = findViewById<ActionMenuView>(...)
        menuInflater.inflate(R.menu.bottom_nav_menu_left, actionMenuView.menu)
        ...
    }
}

【讨论】：