DrawerLayout with NavigationView - not showing ripple effect on click

Question

I have a problem with obtaining on-click effect visible at my drawer.

I have activity xml 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 NavigationView into my DrawerLayout and then populate NavigationView using menu xml file.

My activity_main_drawer.xml looks 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 it that way I don't have any visual effect after clicking on item in that drawer menu. What I would like is to have so called "ripple effect". How can I do it?

What version of OS are you testing on? – azizbekian Jun 21 '17 at 06:29 — azizbekian, Jun 21 '17 at 06:29
@azizbekian I use Android 7.1.2 – michalsol Jul 05 '17 at 17:22 — michalsol, Jul 05 '17 at 17:22

score 2 · Answer 1 · answered Jun 26 '17 at 11:07

2

I have also faced this problem

Please Remove this attributes:

clickable=true

focusableOnTouch=true

then apply ripple effect XML

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

I Hope it will help you

answered Jun 26 '17 at 11:07

Sejal Baraiya

238
2
9

2

What do you mean by removing `clickable=true` and `focusableOnTouch=true`? I do not have those attributes. However, your solution also doesn't work - still no ripple effect :( – michalsol Jul 05 '17 at 17:23
1

Why has this answer received two upvotes and 25 bounty points?? It makes no sense. – Adil Hussain Nov 20 '17 at 11:56

score 2 · Answer 2 · edited Sep 03 '19 at 12:30

2

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

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

edited Sep 03 '19 at 12:30

Dharman

30,962
25
85
135

answered Sep 03 '19 at 12:07

Anna Duong

21
2

score 0 · Answer 3 · answered Jun 22 '17 at 06:05

Ripple Effect can be added in following way.

Add itemBackground into NavigationView inside your xml file the following attribute:

app:itemBackground="@drawable/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>

Unfortunately, ripple effect is still not accesible, this solution doesn't work — michalsol, Jul 05 '17 at 17:22

score 0 · Answer 4 · answered Jun 24 '17 at 21:47

0

If you are using appcompat you can add this to the XML for your navigation drawer item android:background="?attr/selectableItemBackground".

The above solution is taken from this answer.

Hope this helps you.

answered Jun 24 '17 at 21:47

Rahulrr2602

701
1
13
34

It doesn't work. It just causes drawer to be transparent, but ripple effect is still not visible – michalsol Jul 05 '17 at 17:23

score 0 · Answer 5 · answered Jun 26 '17 at 06:58

It might be due to slow performance, try adding a 200-300ms delay before doing anything at onClick.

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

Don't worry this much delay wont be visible to the user, but will show the ripple effect smoothly.

It's not the reason. The solution didn't help. – michalsol Jul 05 '17 at 17:23 — michalsol, Jul 05 '17 at 17:23

DrawerLayout with NavigationView - not showing ripple effect on click

5 Answers5