Android开发：设置BottomNavigationView项背景透明及解决BottomAppBar中FAB凹槽不显示问题

首先，问题的核心是BottomNavigationView的默认背景和item背景会覆盖BottomAppBar的凹槽，同时默认的item选中背景会导致图标周围出现黑色区域。我们可以通过以下步骤逐一解决：

1. 调整布局文件，让BottomNavigationView完全透明并避开凹槽区域 #

修改你的activity_home.xml中BottomNavigationView的属性，直接在布局里设置透明背景，替代代码里的null设置（布局设置更稳定，避免绘制顺序问题）：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@android:color/transparent" <!-- 直接设为全透明 -->
    app:itemIconSize="32dp"
    app:itemIconTint="@color/primaryYellow"
    app:itemBackground="@android:color/transparent" <!-- 消除item默认选中背景 -->
    app:labelVisibilityMode="unlabeled"
    app:menu="@menu/navigation_bottom_menu" />

同时，给你的navigation_bottom_menu.xml添加一个占位项，用来留出FAB凹槽的空间（假设你需要5个导航项，中间项作为占位）：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home"
        android:title="Home"/>
    <item
        android:id="@+id/nav_search"
        android:icon="@drawable/ic_search"
        android:title="Search"/>
    <!-- 中间占位项：用透明图标+禁用状态，专门留出FAB凹槽位置 -->
    <item
        android:id="@+id/nav_placeholder"
        android:icon="@drawable/ic_transparent" <!-- 可以用全透明的图标 -->
        android:title=""
        android:enabled="false"/>
    <item
        android:id="@+id/nav_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Notifications"/>
    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/ic_profile"
        android:title="Profile"/>
</menu>

2. 在Activity中隐藏占位项，确保凹槽完全可见 #

修改HomeActivity的代码，把中间的占位项隐藏，这样BottomNavigationView就不会遮挡BottomAppBar的凹槽：

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.appedia.birthdays.R
import kotlinx.android.synthetic.main.activity_home.*

class HomeActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)
        
        // 隐藏中间占位项，露出BottomAppBar的凹槽
        bottomNavigationView.menu.findItem(R.id.nav_placeholder).isVisible = false
    }
}

3. 确认BottomAppBar的凹槽属性配置 #

确保你的BottomAppBar保留以下关键属性，保证凹槽样式正常：

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/toolbarAndBottomBarColor"
    app:contentInsetEnd="0dp"
    app:contentInsetStart="0dp"
    app:fabAlignmentMode="center" <!-- 保证FAB居中对齐凹槽 -->
    app:fabCradleMargin="10dp" <!-- FAB与凹槽的间距 -->
    app:fabCradleRoundedCornerRadius="16dp"> <!-- 凹槽的圆角半径 -->

为什么之前的方法不生效？ #

• bottomNavigationView.background = null：代码设置背景为null可能存在布局绘制顺序问题，导致默认背景短暂显示，直接在布局里设透明更可靠。
• 未设置itemBackground：BottomNavigationView的item默认有选中状态的深色背景，必须显式设为透明才能消除图标周围的黑色区域。
• 无占位项：如果导航项占满整个宽度，中间的项会直接覆盖BottomAppBar的凹槽，必须通过占位项留出空间。

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