Solving the BottomNavigationView Background Issue in Material Design

If you've been working with Material Design components in your Android app, you might have encountered a pesky issue where the BottomNavigationView shows an unwanted shadow or background. This problem often arises when using transparent backgrounds, especially with the Material Components Library version 1.1.0 or higher.

In this post, we'll dive into the root cause of this issue and provide a clear, step-by-step solution to eliminate that unwanted background once and for all.

Understanding the Issue

When you upgrade to com.google.android.material:material:1.1.0, you may notice that your BottomNavigationView displays a weird shadow or background even if you've set it to be transparent. This issue can be particularly frustrating when you're aiming for a clean, minimalistic design.

Here are some examples of how the issue might appear:

In these examples, you can see the trapezoidal shadow behind the BottomNavigationView, which looks especially bad on real devices compared to emulators.

Why Does This Happen?

The problem stems from the default elevation settings of the BottomNavigationView. Elevation is used in Material Design to create a sense of depth by adding shadows. However, when dealing with transparent backgrounds, these shadows can produce unwanted visual artifacts.

Solution: Setting Elevation to 0dp

The simplest and most effective solution to this problem is to set the elevation of the BottomNavigationView to 0dp. This removes the shadow effect, leaving your navigation bar clean and transparent.

Here's how you can do it:

Locate Your Layout XML File

Find the layout XML file where your BottomNavigationView is defined. It typically looks something like this:

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:menu="@menu/bottom_navigation_menu" />

Add the Elevation Attribute

Modify the BottomNavigationView element to include app:elevation="0dp":

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:elevation="0dp"
        app:menu="@menu/bottom_navigation_menu" />

Apply and Test

Save your changes and run your application. The unwanted shadow should now be gone, leaving you with a clean and transparent BottomNavigationView.

Complete Example

Here's a complete example of an activity_home.xml file with the necessary changes:

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

    <FrameLayout
        android:id="@+id/fragment_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"/>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottomAppBar"
        android:layout_gravity="bottom"
        android:background="@android:color/transparent"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="50dp"
        app:contentInsetStart="0dp"
        app:contentInsetEnd="0dp">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/bottom_navigation"
            app:labelVisibilityMode="auto"
            android:background="@android:color/transparent"
            app:elevation="0dp"
            app:menu="@menu/bottom_navigation_menu"
            app:layout_anchorGravity="center_horizontal"/>
    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorMutedGreen"
        android:contentDescription="@string/open_map_view"
        android:src="@drawable/ic_map"
        app:layout_anchor="@id/bottomAppBar"
        app:maxImageSize="45dp"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Alternative Solutions

While setting the elevation to 0dp is the most straightforward fix, there are other approaches you might consider:

Remove Alpha Channel from Colors

Some developers found that removing the alpha channel from their colors also resolved the issue. For example, use #141414 instead of #CC141414.

Custom Drawable Background

Create a custom drawable with a transparent rectangle and set it as the background:

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid android:color="#00000000" />
    </shape>

Then apply it to the BottomNavigationView:

    android:background="@drawable/bg_bottom_nav"

Disable Elevation Overlay

Another solution is to disable the elevation overlay by applying a custom theme:

    <style name="AppThemeOverlay.MyTheme.BottomNavigationView" parent="ThemeOverlay.MaterialComponents">
        <item name="elevationOverlayEnabled">false</item>
    </style>

And then apply it to your BottomNavigationView:

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppThemeOverlay.MyTheme.BottomNavigationView" />

There you go

Encountering visual glitches like this can be frustrating, but understanding the root cause and applying the right solution can save you a lot of time and headaches. By setting the elevation to 0dp, you can effectively remove the unwanted shadow and achieve the clean, transparent design you desire for your BottomNavigationView.

If you found this guide helpful, please share it with others who might be facing the same issue.

More discusion on Github issue

Weird background using Material 1.1.0 and Navigation component