How to overcome this item padding in navigation drawer?

Question

I check out all the question and also google a lot I just want to remove this padding between each item in navigation view. Help me to sort out this problem thanks in advance.

This is the code of my main_drawer

<?xml version="1.0" encoding="utf-8"?>
<menu  xmlns:android="http://schemas.android.com/apk/res/android">


    <group android:checkableBehavior="single" android:id="@+id/home1"
        >
        <item
            android:id="@+id/home"
            android:title="Home"

            />
        </group>
    <group android:checkableBehavior="single" android:id="@+id/aboutus1">
        <item

            android:id="@+id/nav_camera"


            android:title="AboutUs" />
        </group>
    <group android:checkableBehavior="single" android:id="@+id/Services1">
        <item
            android:id="@+id/nav_gallery"

            android:title="Services" />
        </group>
    <group android:checkableBehavior="single" android:id="@+id/consultation1">

        <item
            android:id="@+id/nav_slideshow"

            android:title="Consultation" />
        </group>
    <group android:checkableBehavior="single" android:id="@+id/gallery1">
        <item
            android:id="@+id/nav_manage"

            android:title="Gallery" />

        </group>
        <group android:checkableBehavior="single" android:id="@+id/appoinment1">
        <item
            android:id="@+id/nav_manage1"

            android:title="Appoinment" />
        </group>
    <group android:checkableBehavior="single" android:id="@+id/Contact_Us1">
        <item
            android:id="@+id/Contact_Us"

            android:title="Contact Us" />
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>

</menu>

My image is ...

Hi, @champandorid please share your xml code – Dileep Patel Oct 07 '16 at 09:11 — Dileep Patel, Oct 07 '16 at 09:11
Check the code of drawer main – Abhishek Bhardwaj Oct 07 '16 at 09:14 — Abhishek Bhardwaj, Oct 07 '16 at 09:14
@champandorid please check out my answer – deadfish Oct 07 '16 at 10:11 — deadfish, Oct 07 '16 at 10:11

score 44 · Accepted Answer · edited Apr 25 '19 at 09:26

According to source code of NavigationView found here, it led me to NavigationMenuPresenter (found here) which says, every normal type in menu list inflates R.layout.design_navigation_item. So if you preview it (here) you will notice what preference it uses.

<android.support.design.internal.NavigationMenuItemView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="?attr/listPreferredItemHeightSmall"
        android:paddingLeft="?attr/listPreferredItemPaddingLeft"
        android:paddingRight="?attr/listPreferredItemPaddingRight"
        android:foreground="?attr/selectableItemBackground"
android:focusable="true"/>

So, the final step is to override the style attribute, i.e. layout_height which references to "?attr/listPreferredItemHeightSmall" (default 48dp).

Open your styles.xml and override it by i.e using custom value:

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!-- HERE-->
        <item name="listPreferredItemHeightSmall">18dp</item>
    </style>

Original:

Custom:

Thanks when on different screen sizes the `listPreferredItemHeightSmall` must be changed but how? — Erik, Sep 19 '17 at 16:29
@Erik extract your value to dimens.xml and put to specific `values-*` folder, https://developer.android.com/training/multiscreen/screensizes#TaskUseSizeQuali — deadfish, Sep 26 '18 at 07:53

score 12 · Answer 2 · answered May 18 '17 at 10:09

Add this line to your dimens.xml file and customize this DP as per your need i have solved my problem by this lines.

<dimen name="design_navigation_padding_top_default" tools:override="true">5dp</dimen>
<dimen name="design_navigation_separator_vertical_padding" tools:override="true">0dp</dimen>
<dimen name="design_navigation_padding_bottom" tools:override="true">5dp</dimen>
<dimen name="design_navigation_icon_size" tools:override="true">20dp</dimen>
<dimen name="design_navigation_icon_padding" tools:override="true">12dp</dimen>

Rahul Khurana · Answer 3 · 2016-10-07T09:32:43.317

Yes just add this parameter in your dimens.xml file

<dimen name="design_navigation_separator_vertical_padding" tools:override="true">0dp</dimen>

other possible values you can change are here https://github.com/android/platform_frameworks_support/blob/master/design/res/values/dimens.xml

OR
if you want to customize fully then you just need to add your own list view inside navigation drawer like this..

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_dashboard"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <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="true"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include layout="@layout/nav_header_dashboard"
                android:id="@+id/header"/>

            <ListView
                android:id="@+id/lst_menu_items"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@color/white"
                android:divider="@color/navigation_divider"
                android:dividerHeight="1dp"
                android:layout_marginTop="@dimen/padding10"/>
        </LinearLayout>
    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

then provide your own custom padding to listview row

Is there any possible way by which i don't need to change the code? — Abhishek Bhardwaj, Oct 07 '16 at 09:18
@RahulKhurana thanks for all your precious effort and i did this. — Abhishek Bhardwaj, Oct 07 '16 at 09:23
other possible values are avialable here https://github.com/android/platform_frameworks_support/blob/master/design/res/values/dimens.xml — Rahul Khurana, Oct 07 '16 at 09:33

score 1 · Answer 4 · answered Oct 07 '16 at 09:38

You can put all your item in one group then you don't need to remove the padding

<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_camera"
        android:icon="@drawable/ic_menu_camera"
        android:title="Home" />
    <item
        android:id="@+id/nav_gallery"
        android:icon="@drawable/ic_menu_gallery"
        android:title="Camera" />
    <item ...
    ...>
</group>

How to overcome this item padding in navigation drawer?

4 Answers4

Linked

Related