Android Studio中BottomNavigationBar自定义中间图标不显示问题咨询

你的现有布局使用两个独立BottomNavigationView+单独ImageView的实现逻辑存在问题，会导致左右导航无法联动、布局层级重叠、图标显示异常，可通过「单个底部导航+悬浮自定义图标」的方案实现效果，具体步骤如下：

第一步：调整布局文件 #

删除你现有代码中bottom_nav_left、bottom_nav_right、包裹parkcenter的LinearLayout三个控件，替换为如下结构：

<!-- 统一的底部导航栏 -->
<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav"
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:layout_gravity="bottom"
    android:background="@color/purple_500"
    map:menu="@menu/bottom_navigation"
    map:labelVisibilityMode="labeled" />

<!-- 中间凸起可点击自定义图标 -->
<ImageView
    android:id="@+id/parkcenter"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="bottom|center_horizontal"
    android:layout_marginBottom="35dp"
    android:src="@drawable/ic_parkcenter"
    android:clickable="true"
    android:focusable="true" />

其中layout_marginBottom的数值可根据你的图标大小调整，保证图标一半嵌入导航栏、一半凸起即可。

第二步：调整menu配置 #

修改bottom_navigation.xml，给中间位置留空，添加占位item禁用点击和显示：

<!-- 左侧两个导航项 -->
<item
    android:id="@+id/home"
    android:icon="@drawable/ic_home"
    android:title="首页"/>
<item
    android:id="@+id/record"
    android:icon="@drawable/ic_record"
    android:title="记录"/>
<!-- 中间占位项，不显示内容、不可点击 -->
<item
    android:id="@+id/placeholder"
    android:icon="@android:color/transparent"
    android:title=""
    android:enabled="false"/>
<!-- 右侧两个导航项 -->
<item
    android:id="@+id/mine"
    android:icon="@drawable/ic_mine"
    android:title="我的"/>
<item
    android:id="@+id/setting"
    android:icon="@drawable/ic_setting"
    android:title="设置"/>

你之前写的park导航项不需要保留，功能直接交给悬浮的ImageView承载即可。

第三步：添加交互逻辑 #

在MapsActivity的onCreate方法中添加两类逻辑：

1. 中间自定义图标点击事件

// Kotlin示例
findViewById<ImageView>(R.id.parkcenter).setOnClickListener {
    // 处理中间按钮点击逻辑，比如跳转页面、弹出弹窗等
}

// Java示例
ImageView parkCenter = findViewById(R.id.parkcenter);
parkCenter.setOnClickListener(v -> {
    // 处理点击逻辑
});

2. 底部导航选中过滤

bottom_nav.setOnItemSelectedListener { menuItem ->
    // 拦截中间占位项的点击事件
    if(menuItem.itemId == R.id.placeholder) {
        return@setOnItemSelectedListener false
    }
    // 处理其他导航项的选中跳转逻辑
    true
}

可选优化 #

如果底部导航的默认图标着色覆盖了你的自定义图标颜色，可给BottomNavigationView添加属性app:itemIconTint="@null"，或者在代码中设置bottom_nav.itemIconTintList = null关闭默认着色。

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