Android Studio自定义BottomNavigationView异常：Menu按钮样式不符

自定义BottomNavigationView时出现异常：Menu按钮始终显示特殊样式（未处于按压状态），底部文本与其他按钮不一致。更换主题后问题仍未解决。

布局代码 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.BottomNavView">

    <FrameLayout
        android:id="@+id/flFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:theme="@style/NavTheme"
        android:background="@drawable/toolbar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0."
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav_bar"
        app:itemIconSize="30dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

主题代码 #

<style name="NavTheme" parent="Theme.MaterialComponents.BottomSheetDialog">
    <item name="colorPrimary">@color/colorBlack</item>
    <item name="colorPrimaryDark">@color/black</item>
    <item name="colorAccent">@color/colorBlue</item>
    <item name="colorNavigationItemSelected">@color/colorGray</item>
</style>

曾尝试使用Theme.MaterialComponents.Light.DarkActionBar作为主题，问题依旧。

菜单代码 #

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/list"
    android:title="@string/menu"
    android:enabled="true"
    android:icon="@drawable/menu" />
<item
    android:id="@+id/search"
    android:title="@string/search"
    android:enabled="true"
    android:icon="@drawable/search"/>
<item
    android:id="@+id/home"
    android:title="@string/map"
    android:enabled="true"
    android:icon="@drawable/home"/>
<item
    android:id="@+id/liked"
    android:title="@string/heart"
    android:enabled="true"
    android:icon="@drawable/liked"/>
<item
    android:id="@+id/add"
    android:title="@string/plus"
    android:enabled="true"
    android:icon="@drawable/add"/>
</menu>

异常情况说明 #

• 底部导航栏中，第一个Menu按钮（对应@+id/list）未处于按压状态，但样式特殊，底部文本呈现与其他按钮不同的样式。
• Menu按钮图标为灰色线条组成的列表样式。

解决建议 #

1. 修正主题父类 #

当前主题父类Theme.MaterialComponents.BottomSheetDialog不适合BottomNavigationView，改用组件专属主题：

<style name="NavTheme" parent="Widget.MaterialComponents.BottomNavigationView">
    <item name="colorPrimary">@color/colorBlack</item>
    <item name="colorOnPrimary">@color/white</item>
    <item name="colorNavigationItemSelected">@color/colorGray</item>
    <item name="colorNavigationItemUnselected">@color/your_unselected_color</item>
    <item name="android:textColorSecondary">@color/your_text_unselected_color</item>
</style>

2. 使用状态选择器图标 #

确保Menu按钮的图标是状态选择器（selector），而非单一静态图，这样才能正确切换选中/未选中状态样式。

创建drawable/menu_selector.xml：

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

然后在菜单中引用该选择器：

<item
    android:id="@+id/list"
    android:title="@string/menu"
    android:enabled="true"
    android:icon="@drawable/menu_selector" />

3. 移除无效布局属性 #

布局中app:layout_constraintHorizontal_bias="0."是无效值，改为0.0或直接删除该属性。

4. 明确配置文本与图标颜色 #

在布局中添加属性统一控制样式：

<!-- 为BottomNavigationView添加 -->
app:itemTextColor="@color/bottom_nav_text_color"
app:itemIconTint="@color/bottom_nav_icon_tint"

创建颜色选择器color/bottom_nav_text_color.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorGray" android:state_selected="true"/>
    <item android:color="@color/your_unselected_text_color"/>
</selector>

内容的提问来源于stack exchange，提问作者Guy Sadoun