如何删除底部导航视图周围的边框

Question

如何在 BottomNavigationView 中移除边框，如下所示。

我的布局： bottom_nav_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".main.BottomNavigation">
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/frameContainer"
    app:layout_constraintBottom_toTopOf = "@id/bottomAppBar">
</FrameLayout>
<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fabCradleMargin="10dp"
    app:fabCradleVerticalOffset="10dp"
    app:fabCradleRoundedCornerRadius="20dp"
    android:layout_gravity="bottom">             
<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:menu="@menu/bottom_nav_menu"
    android:layout_marginEnd="16dp"
    app:popupTheme="@style/MyDarkToolbarStyle"
    app:backgroundTint="@android:color/transparent"/>
</com.google.android.material.bottomappbar.BottomAppBar>         
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/white"
    android:src="@drawable/ic_explore"
    app:layout_anchor="@id/bottomAppBar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

如果我在BottomAppbar 中添加背景颜色，结果是

有人帮我解决这个问题吗？

Answer 1

你可以分两步解决这个问题：

第 1 步：创建一个具有透明颜色的矩形形状的可绘制文件

res\drawable\transparent_rect.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#00000000" />
</shape>

第 2 步： 使用 android:background 将 BottomNavigationView 的背景设置为此可绘制对象

android:background="@drawable/transparent_rect"

将此应用到您的布局中：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".main.BottomNavigation">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/frameContainer"
        app:layout_constraintBottom_toTopOf = "@id/bottomAppBar">
    </FrameLayout>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:fabCradleMargin="10dp"
        app:fabCradleVerticalOffset="10dp"
        app:fabCradleRoundedCornerRadius="20dp"
        android:layout_gravity="bottom">     
            
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:menu="@menu/bottom_nav_menu"
            android:layout_marginEnd="16dp"
            app:popupTheme="@style/MyDarkToolbarStyle"
            android:background="@drawable/transparent_rect"
            app:backgroundTint="@android:color/transparent"/>
    </com.google.android.material.bottomappbar.BottomAppBar>         

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/white"
        android:src="@drawable/ic_explore"
        app:layout_anchor="@id/bottomAppBar" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

预览：

Answer 2

将下面的行添加到您的 BottomNavigationView 标记

app:elevation="0dp"

如果您使用的是 Api-level 28 以上，您也可以添加以下行

android:outlineAmbientShadowColor="@android:color/transparent"
android:outlineSpotShadowColor="@android:color/transparent"