Ripple effect using itemBackground on NavigationView

Question

I wonder if anyone is having problems when redefining the background of the items on a NavigationView with app:itemBackground"? I get the behavior shown on the screenshot, no matter what item I press the last item shows the ripple instead.

Here is my drawer_menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single" android:id="@+id/first_group">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_home"
            android:title="@string/nav_home" />
    </group>

    <group android:id="@+id/second_group">
        <item
            android:id="@+id/nav_settings"
            android:title="@string/nav_settings" />
        <item
            android:id="@+id/nav_about"
            android:title="@string/nav_about" />
        <item
            android:id="@+id/nav_logout"
            android:title="@string/nav_logout" />
    </group>

</menu>

My my_ripple.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="#ffff0000">
    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white" />
</ripple>

My NavigationView:

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@android:color/white"
    app:headerLayout="@layout/drawer_header"
    app:itemBackground="@drawable/my_ripple"
    app:itemIconTint="@color/drawer_item"
    app:itemTextColor="@color/drawer_item"
    app:menu="@menu/drawer_menu" />

Answer 1

Ripple drawables should be defined like this sample:

 <!-- A red ripple masked against an opaque rectangle. -->
 <ripple android:color="#ffff0000">
   <item android:id="@android:id/mask"
         android:drawable="@android:color/white" />
 </ripple>

read more

https://developer.android.com/reference/android/graphics/drawable/RippleDrawable.html

Answer 2

Apply the itemBackground attribute to the menu rather than the NavigationView. The ripple will then stay contained to the menu item handling the touch event.

Answer 3

Possible workaround for now - Just for people looking and just in case....

Adding addOnGlobalLayoutListener in onCreate for the navigation view and applying the Drawable on each menu item.

/**
 * Contains the {@link MenuItem} views in the {@link NavigationView}
 */
private final ArrayList<View> mMenuItems = new ArrayList<>(5);

    // Grab the NavigationView Menu
    final Menu navMenu = mNavigationView.getMenu();
    mNavigationView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            // Remember to remove the installed OnGlobalLayoutListener
            mNavigationView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            // Loop through and find each MenuItem View
            for (int i = 0, length = 5; i < length; i++) {
                final MenuItem item = navMenu.getItem(i);
                mNavigationView.findViewsWithText(mMenuItems, item.getTitle(), View.FIND_VIEWS_WITH_TEXT);
            }
            // Loop through each MenuItem View and apply your custom Typeface
            for (final View menuItem : mMenuItems) {
              //Create RippleDrawable called myRipple 
                ((TextView) menuItem).setBackground(myRipple);
            }
        }
    });