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?

You need to leave 1 blank line between your paragraph and the code. I had it fixed before your edit :) — Laur Ivan, Feb 29 '16 at 15:12
IMHO you override some defaults by using the drawable. The only way I know to see what happens id to use [stetho](https://code.facebook.com/posts/393927910787513/stetho-a-new-debugging-platform-for-android/). — Laur Ivan, Feb 29 '16 at 15:22

score 1 · Accepted Answer · edited May 23 '17 at 12:08

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

@RyanAlford was this solution working for you? I'm facing the same problem and this doesn't help. — RobGThai, Dec 18 '16 at 11:46

score 0 · Answer 2 · answered Oct 26 '16 at 14:25

Add for Android 4 versions a padding at the end of the layer-list in your drawable.

Like this way:

<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" />
    <item>
        <shape android:shape="rectangle" >
            <padding android:left="12dp" android:right="12dp"/>
        </shape>
    </item>
</layer-list>

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

2 Answers2