Android Kotlin应用BottomNavigationView仅点击空白区才显示图标问题

问题详情 #

基于Kotlin的Android应用初始Fragment中配置了BottomNavigationView，已设置app:labelVisibilityMode="labeled"，但运行时仅显示5个菜单项中的第一个图标，其余图标和标签仅在点击导航栏对应空白区域时才会触发显示。

主Fragment布局代码 #

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/StartPage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    tools:context=".StartPage">

    <ImageView
        android:id="@+id/ivBackgroundImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        />

    <Button
        android:id="@+id/btnSendCard"
        style="@style/btnTheme"
        android:layout_width="175dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textSize="24dp"
        android:text="Send Card!"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottomNavigationView"/>

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/bottom_nav_menu"
            app:itemIconSize="24dp"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>


</layout>

底部菜单布局（bottom_nav_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
        android:id="@+id/PaymentFragment"
        android:visible="true"
        android:enabled="true"
        android:icon="@drawable/baseline_contact_mail_24"
        android:title="@string/buyCards" />

    <item
        android:id="@+id/bottomNavPhotos"
        android:visible="true"
        android:enabled="true"
        android:icon="@drawable/baseline_insert_photo_24"
        android:title="@string/photos" />

    <item
        android:id="@+id/bottomNavContacts"
        android:visible="true"
        android:enabled="true"
        android:icon="@drawable/baseline_contact_page_24"
        android:title="@string/contacts" />

    <item
        android:id="@+id/bottomNavSchedulingDays"
        android:visible="true"
        android:enabled="true"
        android:icon="@drawable/baseline_calendar_month_24"
        android:title="@string/scheduling" />

    <item
        android:id="@+id/bottomNavSetOwner"
        android:visible="true"
        android:enabled="true"
        android:icon="@drawable/baseline_account_circle_24"
        android:title="@string/account" />

</menu>

解决方案 #

1. 修复图标颜色与资源问题 #

BottomNavigationView默认依赖主题颜色处理图标选中/未选中状态，若图标资源或颜色配置错误会导致未选中图标不可见：

• 确保所有菜单图标为矢量Drawable，且未手动设置android:tint属性，让组件自动处理颜色切换
• 直接在BottomNavigationView上显式指定颜色：

  app:itemIconTint="@color/bottom_nav_icon_color"
  app:itemTextColor="@color/bottom_nav_text_color"
  

  其中bottom_nav_icon_color需定义为selector，区分选中和未选中状态：

  <!-- res/color/bottom_nav_icon_color.xml -->
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:color="@color/colorPrimary" android:state_selected="true"/>
      <item android:color="@color/colorOnSurface" android:state_selected="false"/>
  </selector>
  

2. 调整视图层级与约束 #

背景ImageView可能导致BottomNavigationView被遮挡，添加 elevation 提升层级：

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    android:elevation="8dp"
    />

同时检查按钮btnSendCard的约束，确保未挤压BottomNavigationView的可用空间。

3. 代码中强制设置labelVisibilityMode #

避免XML配置未生效，在Fragment的onViewCreated中添加代码：

import com.google.android.material.bottomnavigation.LabelVisibilityMode

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    bottomNavigationView.labelVisibilityMode = LabelVisibilityMode.LABEL_VISIBILITY_LABELED
}

4. 更新Material Components库版本 #

旧版本库可能存在显示bug，更新Module级build.gradle中的依赖：

implementation 'com.google.android.material:material:1.11.0' // 使用最新稳定版

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