如何为Android BottomNavigationView底部导航选中项设置圆角背景?
解决方案
你当前无法实现圆角选中效果的核心原因是itemBackground绑定的是颜色选择器,颜色资源本身不支持圆角属性,需要替换为带shape的drawable选择器,具体操作如下:
步骤1:创建选中/未选中状态的shape背景
在项目res/drawable目录下新建两个shape文件:
drawable/bottom_nav_item_selected.xml(选中状态带圆角)
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/background_selected"/> <!-- 按需调整圆角半径,可单独设置topLeftRadius等属性实现指定位置圆角 --> <corners android:radius="16dp"/> </shape>
drawable/bottom_nav_item_unselected.xml(未选中状态)
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/background"/> </shape>
步骤2:创建背景选择器
在res/drawable目录下新建bottom_nav_item_background_selector.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="@drawable/bottom_nav_item_selected" /> <item android:state_checked="false" android:drawable="@drawable/bottom_nav_item_unselected" /> </selector>
步骤3:替换BottomNavigationView的背景配置
修改布局文件中BottomNavigationView的app:itemBackground属性,指向刚才新建的drawable选择器:
<com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation" style="@style/CustomBottomNavigation" 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:menu="@menu/bottom_navigation_menu" <!-- 替换为drawable选择器 --> app:itemBackground="@drawable/bottom_nav_item_background_selector" app:itemTextColor="@color/bottom_navigation_bar_content_color" app:itemIconTint="@color/bottom_navigation_bar_content_color"/>
可选优化
如果圆角显示不全或有水波纹冲突,可以在CustomBottomNavigation样式中添加如下配置:
<!-- 调整item内边距,避免圆角被裁切 --> <item name="itemPadding">8dp</item> <!-- 关闭默认水波纹效果,避免和自定义背景冲突 --> <item name="itemRippleColor">@android:color/transparent</item>
如果父布局存在裁切问题,给BottomNavigationView及其父布局添加:
android:clipChildren="false" android:clipToPadding="false"
内容的提问来源于stack exchange,提问作者Pekyman
相关产品推荐
相关产品推荐

