Navigation drawer item highlight color exceeds over the radius of the corners

Question

Navigation drawer item highlight color exceeds over the radius of the corners when I select (long press/ hold down) the item.

<...NavigationView in activity_main.xml

<com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="330dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:layout_marginTop="0.1dp"
            android:layout_marginBottom="0.1dp"
            android:background="@drawable/corner_radius_nav_main"
            android:clipToPadding="false"
            android:fitsSystemWindows="false"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            app:headerLayout="@layout/nav_header"
            android:theme="@style/NavigationItemHighLightColor"
            app:itemIconPadding="17dp"
            app:itemTextAppearance="@style/Font.GoogleSans"
            app:itemBackground="@drawable/nav_item_bg"
            app:itemIconTint="@color/nav_item_color"
            app:itemTextColor="@color/nav_item_color"
            app:menu="@menu/drawer_menu" />

nav_item_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="2dp"
        android:right="2dp"
        android:top="1dp"
        android:bottom="1dp">

        <shape>
            <solid android:color="@color/nav_item_color_bg"/>
            <corners android:radius="7dp"/>
        </shape>

    </item>
</layer-list>

nav_item_color_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:color="#E1EFEE"
        android:state_checked="true" />
    <item
        android:color="#E1EFEE"
        android:state_pressed="true" />
    <item
        android:color="@android:color/transparent"/>
</selector>

themes.xml

<style name="NavigationItemHighLightColor" parent="Theme.AppCompat.Light">
    <item name="colorControlHighlight">#B2DFDB</item>
</style>

I really appreciate your help.
Thank you.

Answer 1

To define the item background remove app:itemBackground and use:

• app:itemShapeFillColor: background item color
• app:itemShapeAppearanceOverlay: item shape

Something like:

<com.google.android.material.navigation.NavigationView
    app:itemShapeFillColor="@color/selector_menu"
    app:itemShapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Nav"
    android:theme="@style/ThemeOverlay.NavigationView"
    ../>

where @color/selector_menu is a selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="0.50" android:color="@color/...." android:state_pressed="true"/>
    <item android:alpha="0.12" android:color="@color/...." android:state_activated="true"/>
    <item android:alpha="0.12" android:color="@color/..." android:state_checked="true"/>
    <item android:color="@android:color/transparent"/>
</selector>

and:

<style name="ShapeAppearanceOverlay.Nav" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">7dp</item>
</style>

<style name="ThemeOverlay.NavigationView" parent="">
    <item name="android:colorControlHighlight">@android:color/transparent</item>
</style>