如何删除 BottomNavigationView 周围的边框

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

将下行添加到您的 BottomNavigationView 标签

app:elevation="0dp"

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

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

Answer 2

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

第 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 3

您可以改用线性布局来摆脱边距开始和边距结束。请参阅下面的代码。

  <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        tools:context=".home.MainFragment">
    
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:menu="@menu/main_bottom_nav"/>
    
    </LinearLayout>

如何删除 BottomNavigationView 周围的边框

How to Remove border around BottomNavigationView

android

android-layout

android-bottomnavigationview