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

Answer 1

图片中的菜单来自

material3

风格，因此您的应用程序主题或至少bottom_navigation_main主题必须具有来自

Theme.Material3

的父主题，例如

Theme.Material3.DayNight.NoActionBar

。这样它应该可以正常工作，只需删除

app:itemBackground="@drawable/selector_bottom_nav_background"

线即可。

如果您不想更改整个应用程序主题，请添加

android:theme="@style/Theme.Material3.DayNight"

仅为导航设置主题，它应该如下所示：

<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"
        android:theme="@style/Theme.Material3.DayNight"
        app:menu="@menu/menu_main"/>

Answer 2

试试这个：

<!-- res/drawable/icon_selector.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#FF6200EE"/> <!-- Background color for the selected state -->
                    <size android:width="24dp" android:height="24dp"/>
                </shape>
            </item>
            <item android:drawable="@drawable/ic_your_icon" android:gravity="center"/>
        </layer-list>
    </item>
    <item android:drawable="@drawable/ic_your_icon"/> <!-- Default icon -->
</selector>

其他布局：

 <!-- res/menu/menu_main.xml -->
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/navigation_home"
            android:icon="@drawable/icon_selector"
            android:title="@string/title_home" />
        <!-- Other items -->
    </menu>