You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何移除Bottom Navigation Bar选中图标周围的椭圆形高亮效果?

移除Bottom Navigation Bar选中图标椭圆形高亮的解决方案

这个椭圆形高亮是Material Design BottomNavigationView默认的选中项背景,可通过以下几种方式移除:

方法一:直接设置透明背景

在activity_main.xml的BottomNavigationView标签中添加app:itemBackground="@android:color/transparent"属性,直接将选中项背景设为透明:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:background="#142C6E"
    app:itemIconTint="@drawable/bottom_nav_selector"
    app:labelVisibilityMode="unlabeled"
    app:itemBackground="@android:color/transparent" <!-- 添加此行 -->
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_nav_menu" />

方法二:自定义背景选择器(灵活控制)

若需要后续扩展背景样式,可创建自定义背景选择器:

  1. 在res/drawable目录下新建bottom_nav_item_background.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@android:color/transparent" />
    <item android:drawable="@android:color/transparent" />
</selector>
  1. 在BottomNavigationView中引用该选择器:
app:itemBackground="@drawable/bottom_nav_item_background"

方法三:通过主题全局修改

若需统一应用内所有BottomNavigationView的样式,可在主题中配置:

  1. 在res/values/styles.xml中添加自定义主题:
<style name="CustomBottomNavTheme" parent="Widget.MaterialComponents.BottomNavigationView">
    <item name="itemBackground">@android:color/transparent</item>
</style>
  1. 在布局中为BottomNavigationView设置该主题:
android:theme="@style/CustomBottomNavTheme"

修改完成后重新运行应用,选中图标周围的椭圆形高亮即可消失,仅保留图标颜色切换效果。

内容的提问来源于stack exchange,提问作者purpleapple

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 08:29:57