Navigation View seems to alter color of background

Question

I would like to have my Navigation View's background be #121212, however it turns to be a much lighter grey. However a item in the view has the proper color displayed when the same color is applied as it's background.

android:background="@color/navview"
app:itemBackground="@color/navview"

The test item's background is set to the same color as the Navigation View background, however there is a staggering difference in colors as shown below.

Is there a filter on the navigation view background? I have tried disabling it by setting the background tint mode to null,

        nvView.backgroundTintMode = null

however it seems to have no effect. Any help is appreciated!

EDIT:

<androidx.drawerlayout.widget.DrawerLayout

    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:id="@+id/navigation_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/navview"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nvView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        android:background="@color/navview"
        app:itemBackground="@color/navview"

        app:menu="@menu/toolbar_menu">


    </com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>

My Navigation View's Background is not the right color, the item's background is the right color. The color i am trying to achieve is #121212.

Enliven

Answer 1

In the NavigationView use the itemShapeFillColor attribute to fill the item and android:background for the background of the menu view.

In the layout:

<com.google.android.material.navigation.NavigationView
    android:background="#121212"
    app:itemShapeFillColor="@color/..."
    ../>

(I just use an alpha on selected item just to highlight it)

You can also use a style:

<style name="..." parent="Widget.MaterialComponents.NavigationView" >
   <item name="itemShapeFillColor">@color/....</item>
</style>

Just a note about the itemBackground.

In the default style is set to @null to use a shaped background programmatically generated by NavigationView when itemShapeAppearance and/or itemShapeAppearanceOverlay is set.
This background is styled using the itemShape* attributes (as itemShapeFillColor, itemShapeInsetStart...).
Setting itemBackground will overwrite the programmatic background and cause values set in the itemShape* attributes to be ignored.

Perfoliate

I do understand as to why the items in the navview are colored like that, however my problem is that I want the navbackground to be the same color as the items. Instead it appears as a lighter gray variant of #121212 – Enliven

post your layout and your color/selector – Perfoliate

@Enliven Just tried the code in the answer with 1.1.0-beta02 and 1.2.0-alpha02 and it works with the right color. Updated the answer. – Perfoliate

@GabrieleMariotti If I use itemShapeFillColor then all items' (not only selected one) background color is set to that color. How can I make it for only selected item? – Archimage

Answer 2

You can set the background color of navigation view using following snippet of code

navView.setBackgroundColor(ContextCompat.getColor(this,R.color.yourColor)) // yourColor is 
                                                                           // #121212

Untwist

Answer 3

In my case the accepted answer does not solve what I needed, and what I understand that the question requests: keeping the NavigationView from modifying the background color provided.

In case someone else needs this, I achieved it by adding the following attributes to the Navigation view:

android:backgroundTintMode="add"
android:backgroundTint="#000"

This disables the tint that is applied to the background, as it adds 0 to the current color.

Chirpy

Answer 4

Another way to fix it is by set your DrawerLayout elevation to 0dp

<androidx.drawerlayout.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:elevation="0dp" <!-- here -->
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/appbar_layout"
    tools:openDrawer="start">

 <!-- Another view -->

 <com.google.android.material.navigation.NavigationView
  ...
  ...
  android:background="@color/nav_color" />

 </androidx.drawerlayout.widget.DrawerLayout>

Then you get the right color for your NavigationView

Bonedry