Add Custom Shape Ripple With Selector On Navigationview Menu Item

I want to add a ripple effect with rounded corners rectangle with a selector for navigation view item. But it keeps adding the gray rectangle ripple effect. navigation view

Solution 1:

With the Material Components you can use something like:

<com.google.android.material.navigation.NavigationView
      app:itemShapeAppearanceOverlay="@style/ShapeAppearanceOverlay.NavItem.Rounded"
      app:itemShapeFillColor="@color/selector_navitem"
      android:theme="@style/ThemeOverlay.NavItem.Ripple"
      ../>

With the app:itemShapeAppearanceOverlay attribute you can define a custom shape for the each item:

<stylename="ShapeAppearanceOverlay.NavItem.Rounded"parent=""><itemname="cornerFamily">rounded</item><itemname="cornerSize">8dp</item></style>

With the app:itemShapeFillColor attribute you can define the color used to fill the shape:

<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:alpha="0.50"android:color="@color/primaryColor"android:state_pressed="true"/><itemandroid:alpha="0.12"android:color="@color/primaryColor"android:state_activated="true"/><itemandroid:alpha="0.12"android:color="@color/primaryColor"android:state_checked="true"/><itemandroid:color="@android:color/transparent"/></selector>

Finally use the android:theme to override the color used by the ripple.

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

Note: it requires the version 1.1.0 of the Material Components library.

Solution 2:

"Solution"

I started experimenting with ripple effect when I found this question, and after some time I finished with this code.

Note: It is not real ripple effect, just a fake one. Let me know if you'll make an improved version of it.

@layout/your_layout.xml

<android.support.design.widget.NavigationView
    ...
    android:theme="@style/Widget_NavigationItem_NoRipple"
    app:itemBackground="@drawable/drawer_item_background"/>

@values/styles.xml

<stylename="Widget_NavigationItem_NoRipple"><itemname="android:colorControlHighlight">@android:color/transparent</item></style>

@drawable/drawer_item_background.xml

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:drawable="@drawable/drawer_item_shape"android:state_checked="true"/><itemandroid:drawable="@drawable/drawer_item_ripple"android:state_pressed="true"/><itemandroid:drawable="@android:color/transparent"android:state_pressed="false"/></selector>

@drawable/drawer_item_shape

<layer-listxmlns:android="http://schemas.android.com/apk/res/android"><item><shapeandroid:shape="rectangle"><cornersandroid:radius="8dp"/><solidandroid:color="@color/selectedItemBackgroundColor"/></shape></item></layer-list>

@drawable/drawer_item_ripple

<ripplexmlns:android="http://schemas.android.com/apk/res/android"android:color="@android:color/transparent"><item><shapeandroid:shape="rectangle"><cornersandroid:radius="8dp"/><solidandroid:color="?attr/colorControlHighlight"/></shape></item></ripple>

Share