如何去除BottomNavigationBar选中图标上的紫色高亮框

核心原因 #

你看到的紫色高亮框是Material Design组件中BottomNavigationView的选中状态指示器，默认继承自主题的colorPrimary颜色，和你设置的itemBackground、itemRippleColor不属于同一属性，所以之前的设置无法生效。

快速解决方法 #

直接在BottomNavigationView的布局代码中添加以下属性，将指示器颜色设为透明：

app:itemActiveIndicatorColor="@android:color/transparent"

修改后的完整布局代码：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:background="@drawable/tab_view_bg"
    android:elevation="2dp"
    app:itemBackground="@android:color/transparent"
    app:itemIconSize="30dp"
    app:itemIconTint="@color/icons_colors"
    app:itemRippleColor="@android:color/transparent"
    app:labelVisibilityMode="unlabeled"
    app:itemActiveIndicatorColor="@android:color/transparent" <!-- 新增属性 -->
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_nav_menu" />

备选方案（若上述方法无效） #

如果项目使用了自定义主题，也可以在主题中全局修改这个指示器颜色：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- 其他主题属性 -->
    <item name="bottomNavigationItemActiveIndicatorColor">@android:color/transparent</item>
</style>

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