How to remove NavigationView item background

Question

This seems like it should be trivial with the itemBackground attribute, but for some reason, it isn't working. As shown below, I can successfully add my own background (in blue), but the original ripple (grey rectangle) is still visible. Setting itemBackground to null doesn't seem to do the trick either.

My navigation view:

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    style="@style/Widget.MaterialComponents.NavigationView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:itemBackground="@drawable/nav_item_background"
    app:menu="@menu/main_drawer" />

(Basically untouched style wise from the generated view)

My ripple:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/accent_ripple">
    <item
        android:id="@android:id/mask"
        android:right="8dp">
        <shape android:shape="rectangle">
            <corners
                android:bottomRightRadius="50dp"
                android:topRightRadius="50dp" />
            <solid android:color="#fff" />
        </shape>
    </item>
</ripple>

My app theme also extends Theme.MaterialComponents, so I'm out of ideas.

Answer 1

If you want a custom shape in your Item Background don't use the app:itemBackground attribute.

Use the app:itemShapeAppearanceOverlay and the app:itemShapeFillColor attributes:

<com.google.android.material.navigation.NavigationView
    app:itemShapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Item"
    app:itemShapeFillColor="@color/nav_item_shape_fill"
    android:theme="@style/ThemeOverlay.NavigationView"
    ../>

where:

  <style name="ShapeAppearanceOverlay.Item" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">16dp</item>
    <item name="cornerSizeBottomRight">16dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
    <item name="cornerSizeTopLeft">0dp</item>
  </style>

and the color selector is something like:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_activated="true"/>
  <item android:alpha="0.12" android:color="?attr/colorPrimary" android:state_checked="true"/>
  <item android:color="@android:color/transparent"/>
</selector>

Currently there isn't a method to remove the ripple outside the shape in the item. However you can use the android:theme to override the color used by the ripple.

  <style name="ThemeOverlay.NavItem.Ripple" parent="">
    <item name="android:colorControlHighlight">@android:color/transparent</item>
  </style>

Check this issue for updates.