Material-components-android: [BottomNavigationView] Invalid background color in dark mode.

[Shipaaaa]

Description:
When I change the background color of BotomNavigationView by android:background or backgroundTint in the light theme, it displays correctly, but not in the dark one.

In a dark theme, some other color is superimposed, which can be disabled only through itemBackground, but then the ripple effect disappears.

Wrong result:

Expected behavior:
The color is right:

Source code:
fragment.xml

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

themes.xml

<item name="colorSurface">@color/background_primary</item>

colors.xml

// Light theme
<color name="background_primary">#FFFFFD</color>
// Dark theme
<color name="background_primary">#261D32</color>

Correct result in ligth theme:

Wrong result in dark theme:

FIX 1
I can fix this by itemBackground, but ripple isn't working:

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

Result:

FIX 2
I can fix this by changing colorSurface:

themes.xml

    <style name="ThemeOverlay.AppTheme.BottomNavigationView" parent="@style/ThemeOverlay.MaterialComponents">
        <item name="colorSurface">@null</item>
    </style>

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/fragment_main_bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppTheme.BottomNavigationView"
        android:background="@color/background_primary"
        app:menu="@menu/bottom_navigation" />

Correct result:

Android API version:
I tested it on 26, 28 and 29 API

Material Library version:
1.1.0

Device:
Nexus 5x, OnePlus 6t, Emulator Pixel 3a.

[wcshi]

The superimposed overlay color you are observing may be the elevation overlay, try setting elevationOverlayEnabled=false OR set the elevation to 0 in dark theme

https://material.io/develop/android/theming/dark/

[Steppschuh]

Glad I stumbled upon this thread. Had the same issue when setting the background color to black in dark mode. As I didn't want to remove the elevation in light mode, I've added a runtime check:

private void initializeNavigation() {
    BottomNavigationView navigationView = findViewById(R.id.bottomNavigationView);

    // setting configuration, controllers, ...

    if (application.isInDarkMode()) {
        // workaround for removing the elevation color overlay
        // https://github.com/material-components/material-components-android/issues/1148
        navigationView.setElevation(0);
    }
}

private boolean isInDarkMode() {
    int currentNightMode = getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
    return currentNightMode == Configuration.UI_MODE_NIGHT_YES;
}

You could also add an xml attribute for the elevation with a night mode qualifier (being 0dp in night and your desired elevation in day mode).

Hope this gets fixed though, would prefer not to use this workaround 🙂