Android NavigationView: reduce space between icon and text and `itemBackground` not working

Question

Is there a way to reduce the space between the icon and text in the NavigationView when its built using a menu xml?

I've tried to text android:drawablePadding using the app:itemTextAppearance attribute and that doesn't work, I've tried setting the padding and margins and nothing works.

Also, when I set app:itemBackground and set the checked state, the entire menu item doesn't highlight, I get something like the picture below.

The xml used to create the itemBackground is:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/white_alpha_10" />
    <item android:state_checked="true" android:drawable="@color/white_alpha_10" />
    <item android:state_focused="true" android:drawable="@color/white_alpha_10" />
    <item android:state_activated="true" android:drawable="@color/white_alpha_10" />
    <item android:drawable="@android:color/transparent" />
</selector>

Any idea what could be going on? Clearly looks like there is a background color on the menu item, however the menu xml is pretty stock standard.

The NavigationView back the purple background on it set from a theme:

<!--Activity xml -->
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:layout_gravity="start"
    app:theme="@style/AppTheme.NavigationView"
    app:menu="@menu/menu_nav_drawer"
    app:itemBackground="@drawable/nav_drawer_item"
    app:headerLayout="@layout/nav_header"/>

<!-- styles.xml -->
<style name="AppTheme.NavigationView" parent="Widget.Design.NavigationView">
    <item name="android:background">@color/charcoal_new</item>
    <item name="itemIconTint">@color/nav_drawer_icon</item>
    <item name="android:listDivider">@color/dusk_alpha_50</item>
    <item name="itemTextAppearance">@style/NavigationViewTextAppearance</item>
</style>

<style name="NavigationViewTextAppearance" parent="TextAppearance.Body.Regular">
    <item name="android:textColor">@color/white</item>
    <item name="android:padding">0dp</item>
    <item name="android:layout_margin">0dp</item>
</style>

I'm using Android support/design library 23.2.1.

`Change sec.. Code` is item or header? If it is header show us `@layout/nav_header` — Volodymyr Kulyk, Apr 04 '16 at 08:05
Try this link it will allow you to get textview for each row so then you can customize it. - http://stackoverflow.com/a/35313552/2128166 — Wasim K. Memon, Apr 04 '16 at 08:30
I managed to find the dimension resouce in the source and override it. Just the highlight problem remains. — Ali, Apr 04 '16 at 09:59
How did you found dimension resource and saw default values? — blackHawk, May 01 '17 at 09:23
You need to search through the source code. I can't remember what the exact process was now, but having a read through the source code is always a good idea. — Ali, May 02 '17 at 01:46

score 34 · Accepted Answer · answered Apr 05 '16 at 04:42

After digging through the source. I found that you could override a dimension resource to fix this.

<dimen tools:override="true" name="design_navigation_icon_padding">16dp</dimen>

Beware though that this will change the dimension resource everywhere! You may also be able to copy the layout file and override that instead design_navigation_menu.xml

As for the different color edges, I set app:itemBackground="@android:color/transparent" and then in the theme for the NavigationView set:

<item name="selectableItemBackground">@drawable/nav_drawer_item_selector</item>

You can handle both in the theme for your NavigationView as follows:

    <item name="selectableItemBackground">@drawable/nav_drawer_item_selector</item>
    <item name="itemBackground">@color/transparent</item>

nav_drawer_item_selector.xml looks like so:

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

Thanks for the answer the tools:override suggestion from your part helped me fixed the issue of reducing the margine of the elements within the separators by overriding 1dp , can you kindly mark your answer as the accepted one . — A.Alqadomi, May 12 '16 at 10:28
@Ali Do you still have the working example? Do you mind sharing them here. `selectableItemBackground` kills the whole layout for me. The edges causes by padding inside `NavigationMenuItemView` and setting `itemBackground` transparent doesn't seem to do anything for me. — RobGThai, Dec 18 '16 at 11:42
The code above, still works for me, the difference may be somewhere else. Try creating a question on SO and provide as much detail as you can. — Ali, Dec 19 '16 at 05:55
You also need to add xmlns:tools="http: //schemas.android.com/tools" to namespaces. — Borzh, Nov 05 '18 at 22:26

score 26 · Answer 2 · answered Jul 17 '18 at 06:41

26

Use app:itemIconPadding in new material NavigationView

<com.google.android.material.navigation.NavigationView
                        ...
                        app:itemIconPadding="10dp"/>

answered Jul 17 '18 at 06:41

random

10,238
8
57
101

Hey it worked for me, simple and effective. Thanks a lot. – Prakash Jadhav Jul 24 '20 at 11:47

score 22 · Answer 3 · edited Dec 26 '18 at 06:37

22

Just add this line in dimens.xml file

<dimen tools:override="true" name="design_navigation_icon_padding">10dp</dimen>

this will override padding of NavigationView

edited Dec 26 '18 at 06:37

Jeel Vankhede

11,592
2
28
58

answered Jun 17 '17 at 08:15

Ankur Bavishi

943
12
14

4

It's dimens.xml , not dimen.xml – Shamsul Arefin Apr 19 '18 at 11:24

score 2 · Answer 4 · answered Oct 13 '19 at 17:25

With the NavigationView defined in the Material Components Library use the app:itemIconPadding attribute.

<com.google.android.material.navigation.NavigationView
    app:itemIconPadding="4dp"
    ../>

You can also define a custom style like:

  <style name="CustomNavigationView" parent="Widget.MaterialComponents.NavigationView">
    <item name="itemIconPadding">@dimen/....</item>
  </style>

The default value is defined by the @dimen/mtrl_navigation_item_icon_padding and it is 14dp.

Optimiser · Answer 5 · 2020-12-02T08:41:17.007

If you are not using Material Design, in your .xml file where you have included the NavigationView insert this code:

app:itemIconPadding="14dp"

14dp is an example, please choose your own suitable value.

Example:

<com.google.android.material.navigation.NavigationView
    android:layout_width="175dp"
    android:layout_height="match_parent" 
    android:id="@+id/navigation_view"
    app:menu="@menu/drawer_menu"
    app:itemIconPadding="14dp"    <------
    app:headerLayout="@layout/drawer_header"
    android:layout_gravity="start"
    android:fitsSystemWindows="true">
</com.google.android.material.navigation.NavigationView>

score 1 · Answer 6 · answered Nov 26 '18 at 15:51

Just in case if someone doesn't know about tools, follow below Open dimens.xml in res->Values->dimens.xml

<resources xmlns:tools="http://schemas.android.com/tools"> <dimen tools:override="true" name="design_navigation_icon_padding">10dp</dimen> </resources>

Android NavigationView: reduce space between icon and text and `itemBackground` not working

6 Answers6

Linked