DrawerLayout with NavigationView - does not show ripple effect when pressed

Question

I am having trouble getting the click effect visible in my inbox.

I have an xml action layout as follows:

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" 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:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <include layout="@layout/app_bar_main" android:layout_width="match_parent" android:layout_height="match_parent"/> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer"/> </android.support.v4.widget.DrawerLayout> 

As you can see, I put the NavigationView in my DrawerLayout and then populate the NavigationView with the xml menu file.

My activity_main_drawer.xml as follows:

 <menu xmlns:android="http://schemas.android.com/apk/res/android" > <group> <item android:id="@+id/id1" android:title="Item 1"/> <item android:id="@+id/id2" android:title="Item 2"/> <item android:id="@+id/id3" android:title="Item 3"/> <item android:id="@+id/id4" android:title="Item 4"/> </group> 

Unfortunately, when I do this, I have no visual effect after clicking on an item in this drawer menu. I would like to have the so-called "ripple effect". How can i do this?

Answer 1

I also ran into this problem

Please remove these attributes:

interactive = true

focusableOnTouch = true

then apply the XML ripple effect

 <ripple xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:color="@android:color/transparent" tools:targetApi="lollipop"> <!-- ripple color --> <item android:drawable="@android:color/transparent" /> <!-- normal color --> 

Hope this helps you

Answer 2

The ripple effect can be added as follows.

Add itemBackground to NavigationView inside your xml file with the following attribute:

Application: itemBackground = "@ hood / ripple_navigation_selector"

Also, inside the drawable-v21 folder add ripple_navigation_selector.xml

 <?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/ripplecolor" > <item android:drawable="@color/accentColor" /> <item android:id="@android:id/mask" android:drawable="@android:color/white" /> </ripple> 

Answer 3

If you use appcompat, you can add this to XML for the element of your android:background="?attr/selectableItemBackground" navigation element android:background="?attr/selectableItemBackground" .

The above solution is taken from this.

Hope this helps you.

Answer 4

Perhaps due to poor performance, try adding a delay of 200-300 ms before doing anything in onClick.

 public void itemClicked(MenuItem item) { Handler theHandler = new Handler(); theHandler.postDelayed(new Runnable() { @Override public void run() { //whatever you wish to do } }, 200); } 

Do not worry that this delay will not be noticeable to the user, but will show the ripple effect smoothly.

Answer 5

You can use the itemBackground attribute with ?android:attr/selectableItemBackground to get a ripple effect for your items NavigationView

 <android.support.design.widget.NavigationView /* ... other attributes... */ app:itemBackground="?android:attr/selectableItemBackground"/>