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

Answer 1

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>

Answer 2

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.

Answer 3

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>

Answer 4

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

Answer 5

Use app:itemIconPadding in new material NavigationView

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

Answer 6

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>