Search code examples
androidandroid-navigationview

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

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.

enter image description here

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.

Solution

  • 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>