Change color of line divider in group menu item of NavigationView

Question

After moving to material3, the color of the line divider is different. I want to change it.

themes.xml:

<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">

menu_navigation.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:id="@+id/nav_top"
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_request"
            android:icon="@drawable/icon_settings"
            android:title="HELLO" />
    </group>
    <group
        android:id="@+id/nav_other"
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_cancel_payment"
            android:icon="@drawable/icon_cancel"
            android:title="LOL"
            android:enabled="true"/>
    </group>
</menu>

my MainActivity:

<androidx.drawerlayout.widget.DrawerLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:id="@+id/drawer">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:drawerLayoutCornerSize="0dp"
        app:dividerInsetStart="0dp"
        app:dividerInsetEnd="0dp"
        app:menu="@menu/menu_navigation"
        app:layout_constraintStart_toStartOf="parent"
        android:background="@android:color/white"
        app:headerLayout="@layout/nav_header_view">
    </com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>

How can I change the color?

Answer 1

The listDivider color in M3 is based on the colorOutline defined in your app theme.

Change it in your app theme:

<style name="App.Theme" parent="Theme.Material3.DayNight">
    <!-- ...... -->
    <item name="colorOutline">@color/red500_dark</item>
</style>

or if you want to override only for the NavigationView in your layout you can use:

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:theme="@style/ThemeOverlay.App.NavigationView"

with:

<style name="ThemeOverlay.App.NavigationView" parent="">
    <item name="colorOutline">@color/red500_dark</item>
</style>

Answer 2

Update the android:listDivider in you AppTheme. You can try this if you only want to change it in the NavigationView layout.

<style name="Theme.NavigationView" parent="Widget.Material3.NavigationView">
    <item name="materialThemeOverlay">@style/ThemeOverlay.NavigationView</item>
</style>

<style name="ThemeOverlay.App.NavigationView" parent="">
    <item name="android:listDivider">@color/green</item>
</style>

Now you can apply this to your NavigationView

<com.google.android.material.navigation.NavigationView
    android:id="@+id/navigation"
    style="@style/Theme.NavigationView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:menu="@menu/menu_navigation"
    app:headerLayout="@layout/nav_header_view">