androidkotlinmaterial-componentsmaterial-components-androidandroid-navigationview

Navigation View seems to alter color of background


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.

enter image description here

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.


Solution

  • 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/..."
        ../>
    

    enter image description here

    (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.