Search code examples
javaandroiddrawerlayoutnavigationviewripple-effect

Remove Ripple Effect from Drawer Layout Navigation View

I'm trying to remove this ripple effect from my Navigation View without any luck. I tried following the answers from BottomNavigationView - Shadow and Ripple Effect and How to disable gray animation from center to edges on bottom navigation on tap question that I found on Stack and nothing worked for me. It's also a strange behavior that the ripple effect only happens sometimes, usually after 2 clicks on the Navigation Menu, this can be seen in the video.

This is my XML file:

<androidx.drawerlayout.widget.DrawerLayout
    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:id="@+id/drawer_layout"
    tools:openDrawer="start"
    tools:context=".HomeActivity">

    <com.google.android.material.navigation.NavigationView
        android:layout_width="275dp"
        android:layout_height="match_parent"
        android:id="@+id/navigation_view"
        app:itemIconPadding="10dp"
        app:itemHorizontalPadding="20dp"
        android:layout_gravity="start"
        android:fontFamily="@font/exo"
        android:textStyle="bold"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/navigation_menu"
        app:itemBackground="@android:color/transparent"
        app:itemRippleColor="@android:color/transparent"
        app:itemIconTint="@color/moroccan_blue"
        app:itemTextColor="@color/moroccan_blue"
        android:backgroundTint="@color/white"
        app:drawerLayoutCornerSize="20dp"/>

</androidx.drawerlayout.widget.DrawerLayout>

I tried adding app:itemBackground="@android:color/transparent" and app:itemRippleColor="@android:color/transparent" to solve this problem, but it didn't work. The former removed a gray ripple effect that it previously had and replaced it with the transparent ripple effect that was seen in the first 2 clicks of the Navigation Menu in the video. I already had the same behavior prior to adding those lines, the only difference was that the first 2 clicks were gray and the rest were the pink-ish color that appears in the video.

Solution

  • After some more digging I was able to solve my problem by adding <item name="colorControlHighlight">@android:color/transparent</item> in the themes.xml file. I also left the following parameters in the NavigationView in the xml:

    app:itemBackground="@android:color/transparent"
app:itemRippleColor="@android:color/transparent"

    Now, there's no random ripple effect showing.