How to Remove border around BottomNavigationView

Question

How to remove border in BottomNavigationView like below.

My layout: 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>

If I add background color in BottomAppbar the result is

Is there anyone help me to resolve this?

Answer 1

You can solve this in two steps:

Step 1: Create a drawable file that has a Rectangle shape with a transparent color

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>

Step 2: Set the background of the BottomNavigationView to this drawable using android:background

android:background="@drawable/transparent_rect"

Applying this to your layout:

<?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>

Preview:

Answer 2

Add below line to your BottomNavigationView tag

app:elevation="0dp"

If you are using above Api-level 28, You can Add below lines too

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

Answer 3

You can use linear layout instead to get rid of the margin start and margin end. See below code.

  <?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>