Android：为底部导航栏选中图标添加椭圆形背景

要实现底部导航栏选中时显示椭圆形背景，按以下步骤修改即可：

步骤1：创建选中状态的背景Drawable #

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态的椭圆形背景 -->
    <item android:state_checked="true">
        <shape android:shape="oval">
            <solid android:color="#E1E9F3" /> <!-- 替换为你需要的背景色 -->
            <size android:width="48dp" android:height="48dp" /> <!-- 控制椭圆尺寸 -->
        </shape>
    </item>
    <!-- 未选中状态透明背景 -->
    <item android:state_checked="false">
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

步骤2：修改BottomNavigationView布局 #

在bottom_nav_layout.xml中新增app:itemBackground属性，指向刚创建的背景Drawable：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNav_view"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:elevation="0dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:theme="@style/Widget.BottomNavigationView"
    app:itemIconSize="20dp"
    app:itemIconTint="@color/bottom_nav_color"
    app:itemTextColor="@color/bottom_nav_color"
    app:labelVisibilityMode="labeled"
    app:itemBackground="@drawable/bottom_nav_item_background" <!-- 新增属性 -->
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/bottom_nav_menu" />

步骤3：调整文字与背景适配（可选） #

如果选中后文字和背景间距不协调，可在styles.xml中修改BottomNavigationView的样式：

<style name="Widget.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
    <item name="android:paddingTop">4dp</item>
    <item name="android:paddingBottom">4dp</item>
    <item name="itemTextAppearanceActive">@style/BottomNavigationTextActive</item>
    <item name="itemTextAppearanceInactive">@style/BottomNavigationTextInactive</item>
</style>

<style name="BottomNavigationTextActive" parent="TextAppearance.MaterialComponents.Caption">
    <item name="android:textSize">12sp</item>
    <item name="android:paddingTop">2dp</item>
</style>

<style name="BottomNavigationTextInactive" parent="TextAppearance.MaterialComponents.Caption">
    <item name="android:textSize">12sp</item>
    <item name="android:paddingTop">2dp</item>
</style>

完成以上设置后，底部导航栏选中项就会显示椭圆形背景，匹配预期效果。

内容的提问来源于stack exchange，提问作者Michael Okoli