NavigationView - Setting `app:itemBackground` causes menu items to lose start padding

Question

I am running into an issue when setting the app:itemBackground for the NavigationView. I am trying to create a custom background for the selected menu item. The custom background works, but when I use it, it seems to kill the start padding of the menu items.

Without the background(default)

With the custom background

You can see that the menu items are flush to the left of the menu when the itemBackground is set.

Here is the relevant xml...

layout

 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/DrawerLayout"
    android:fitsSystemWindows="false">
<!-- your content layout -->
    <include
        layout="@layout/MainLayout" />
    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/primary_color"
        android:id="@+id/NavigationView"
        app:itemTextColor="?android:textColorPrimary"
        app:headerLayout="@layout/navigationheaderlayout"
        app:itemBackground="@drawable/navigation_item_selector"
        app:menu="@menu/navigation_menu" />
</android.support.v4.widget.DrawerLayout>

selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/navigation_item_selected_background" android:state_selected="true" />
   <item android:drawable="@drawable/navigation_item_selected_background" android:state_pressed="true" />
   <item android:drawable="@drawable/navigation_item_selected_background" android:state_checked="true" />
   <item android:drawable="@drawable/navigation_item_not_selected_background" />
</selector>

selected backgroud

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item 
        android:left="0dp" 
        android:right="2dp" 
        android:drawable="@color/accent_color" />

    <item 
        android:left="2dp" 
        android:right="2dp" 
        android:drawable="@color/navigation_selected_item_color" />
</layer-list>

not selected background

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
       <shape android:shape="rectangle">
           <solid android:color="@android:color/transparent" />
       </shape>
   </item>
</layer-list>

Has anybody run into something like this before?

Answer 1

Please note below solution will work for pre-lollipop versions. But will add extra padding in lollipop and above. Please apply different theme for different versions to avoid this.

After setting app:theme, padding left issue is fixed.

<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="false"
        android:background="@drawable/your_menu_bg"
        app:itemBackground="@drawable/your_menu_item_bg"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"
        app:theme="@style/NavigationDrawerStyle"
        app:itemIconTint="@color/your_color"
        app:itemTextColor="@android:color/white"
        app:itemTextAppearance="?android:attr/textAppearanceLarge"/>

This is my custom theme.

<style name="NavigationDrawerStyle">
    <item name="android:paddingLeft">20dp</item>
</style>

How to apply different themes for different versions? Check the other link below.

Change theme according to android version