Android如何只为底部导航栏的图标添加背景？

我希望只为底部导航栏的图标添加背景，而非整个菜单项的背景。以下是我的代码：

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/surface_container_lowest"
        app:itemTextAppearanceActive="@style/Theme.FarmKeep.TextAppearance.SemiBold.LabelSmallProminent"
        app:itemTextAppearanceInactive="@style/Theme.FarmKeep.TextAppearance.Regular.LabelSmall"
        app:itemTextColor="@color/on_surface"
        app:labelVisibilityMode="labeled"
        app:itemBackground="@drawable/selector_bottom_nav_background"
        app:menu="@menu/menu_main"/>

当前背景会覆盖图标和文字，想要实现仅图标区域带有圆角/圆形背景、文字位于背景下方的效果，请问该如何处理？

不能直接使用itemBackground（它会作用于整个菜单项容器），需要通过自定义菜单项布局实现需求：

步骤1：创建自定义菜单项布局 #

在res/layout目录下新建layout_bottom_nav_item.xml，将图标放在带背景的独立容器中，下方放置文字：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:paddingVertical="8dp">

    <!-- 图标背景容器 -->
    <FrameLayout
        android:id="@+id/icon_container"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:gravity="center"
        android:background="@drawable/selector_bottom_nav_icon_background">

        <ImageView
            android:id="@+id/icon"
            android:layout_width="24dp"
            android:layout_height="24dp" />
    </FrameLayout>

    <!-- 菜单项文字 -->
    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:textSize="12sp" />
</LinearLayout>

步骤2：创建图标背景选择器 #

在res/drawable目录下创建selector_bottom_nav_icon_background.xml，定义选中/未选中状态的背景：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_bottom_nav_icon_selected" android:state_checked="true" />
    <item android:drawable="@android:color/transparent" android:state_checked="false" />
</selector>

再创建选中状态的圆角背景bg_bottom_nav_icon_selected.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/primary_container" /> <!-- 替换为你需要的选中背景色 -->
</shape>

步骤3：配置BottomNavigationView #

移除原有的itemBackground属性，添加itemLayout指定自定义布局，同时设置图标颜色选择器：

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/surface_container_lowest"
        app:itemTextAppearanceActive="@style/Theme.FarmKeep.TextAppearance.SemiBold.LabelSmallProminent"
        app:itemTextAppearanceInactive="@style/Theme.FarmKeep.TextAppearance.Regular.LabelSmall"
        app:itemTextColor="@color/on_surface"
        app:labelVisibilityMode="labeled"
        app:itemLayout="@layout/layout_bottom_nav_item"
        app:itemIconTint="@color/selector_bottom_nav_icon_color"
        app:menu="@menu/menu_main"/>

步骤4：创建图标颜色选择器 #

在res/color目录下创建selector_bottom_nav_icon_color.xml，定义图标选中/未选中的颜色：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/on_primary_container" android:state_checked="true" />
    <item android:color="@color/on_surface_variant" android:state_checked="false" />
</selector>

内容的提问来源于stack exchange，提问作者M.SH