如何为Android的BottomNavigationView添加菜单项间分割线

下面是3种常用的实现方式，可根据你的项目场景选择：

方案1：自定义菜单项布局（适配性最高，推荐） #

这种方式不需要修改原有交互逻辑，可精准控制分割线样式：

• 第一步：创建分割线布局layout/bottom_nav_divider.xml

<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="1dp"
    android:layout_height="24dp"
    android:layout_gravity="center_vertical"
    android:layout_marginHorizontal="8dp"
    android:background="@color/your_divider_color" />

• 第二步：在底部导航的菜单文件menu/bottom_nav_menu.xml中，Home和Settings对应item之间新增占位item，绑定分割线布局并禁用交互：

<!-- 原有Home item -->
<item
    android:id="@+id/nav_home"
    android:title="Home"
    android:icon="@drawable/ic_home" />

<!-- 新增分割线占位item -->
<item
    android:id="@+id/nav_divider"
    android:title=""
    app:actionLayout="@layout/bottom_nav_divider"
    android:enabled="false"
    android:checkable="false" />

<!-- 原有Settings item -->
<item
    android:id="@+id/nav_settings"
    android:title="Settings"
    android:icon="@drawable/ic_settings" />

• 第三步：代码中额外确认禁用分割线item的点击事件，避免干扰正常导航：

bottomNavigationView.menu.findItem(R.id.nav_divider).isEnabled = false

方案2：添加RecyclerView ItemDecoration #

适用于使用1.1.0及以上版本Material Components库的项目，BottomNavigationView内部使用RecyclerView渲染菜单项：

• 自定义分割线Decoration类：

class BottomNavDividerDecoration(
    // 分割线插入位置：Home为第0位，在Home后加分隔线则传0
    private val insertAfterPosition: Int,
    private val dividerWidthDp: Int,
    private val dividerColor: Int,
    private val verticalMarginDp: Int = 8
) : RecyclerView.ItemDecoration() {
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = dividerColor
        strokeWidth = dividerWidthDp.dpToPx().toFloat()
    }

    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        super.onDrawOver(c, parent, state)
        val targetChild = parent.getChildAt(insertAfterPosition) ?: return
        val top = parent.paddingTop + verticalMarginDp.dpToPx()
        val bottom = parent.height - parent.paddingBottom - verticalMarginDp.dpToPx()
        val x = targetChild.right.toFloat()
        c.drawLine(x, top.toFloat(), x, bottom.toFloat(), paint)
    }

    private fun Int.dpToPx(): Int {
        return (this * parent.resources.displayMetrics.density).toInt()
    }
}

• 给BottomNavigationView添加分割线：

val navRecycler = bottomNavigationView.getChildAt(0) as? RecyclerView
navRecycler?.addItemDecoration(
    BottomNavDividerDecoration(
        insertAfterPosition = 0,
        dividerWidthDp = 1,
        dividerColor = ContextCompat.getColor(this, R.color.your_divider_color)
    )
)

方案3：布局叠加View（实现最简单） #

适合临时快速实现，无需修改菜单逻辑，注意适配不同屏幕宽度时需调整边距：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:menu="@menu/bottom_nav_menu" />

    <View
        android:layout_width="1dp"
        android:layout_height="24dp"
        android:layout_gravity="center_vertical"
        <!-- 调整该值让分割线正好落在两个选项中间 -->
        android:layout_marginStart="168dp"
        android:background="@color/your_divider_color" />

</FrameLayout>

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