4

I have a navigation drawer with many items so the user needs to scroll up and down in order to see all the items.

I would like to reduce the margins between individual menu items, so that all items fit within a standard screen with no need to scroll.

Is there a way to control the margins in between the menu items?

Zvi
  • 2,354
  • 2
  • 26
  • 37

4 Answers4

10

Answer here helped me to reduce space at least between groups. I used the following dimen

<dimen tools:override="true" name="design_navigation_separator_vertical_padding">1dp</dimen>
Community
  • 1
  • 1
Lanitka
  • 922
  • 1
  • 10
  • 20
2

We can create a drawable and set it as the NavigationView's itemBackground attribute. I will explain below:

If we walk through the NavigationMenuAdapter, we will see there are four types of items:

private static final int VIEW_TYPE_NORMAL = 0;
private static final int VIEW_TYPE_SUBHEADER = 1;
private static final int VIEW_TYPE_SEPARATOR = 2;
private static final int VIEW_TYPE_HEADER = 3;

What we want to work with is VIEW_TYPE_NORMAL. The attributes exposed to developers can be found in the below code:

case VIEW_TYPE_NORMAL:
      {
        NavigationMenuItemView itemView = (NavigationMenuItemView) holder.itemView;
        itemView.setIconTintList(iconTintList);
        if (textAppearanceSet) {
          itemView.setTextAppearance(textAppearance);
        }
        if (textColor != null) {
          itemView.setTextColor(textColor);
        }
        ViewCompat.setBackground(
            itemView,
            itemBackground != null ? itemBackground.getConstantState().newDrawable() : null);
        NavigationMenuTextItem item = (NavigationMenuTextItem) items.get(position);
        itemView.setNeedsEmptyIcon(item.needsEmptyIcon);
        itemView.setHorizontalPadding(itemHorizontalPadding);
        itemView.setIconPadding(itemIconPadding);
        if (hasCustomItemIconSize) {
          itemView.setIconSize(itemIconSize);
        }
        itemView.setMaxLines(itemMaxLines);
        itemView.initialize(item.getMenuItem(), 0);
        break;
      }

Unfortunately,there is no interface for us to add margins between the NavigationMenuItemView. However, it allows us to set a background. So we can set a customer drawable to the NavigationView with a specific height. We only set a height in that drawable, like:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">
<size android:height="60dp"/>
</shape>

Then apply this drawable to the NavigationView in the layout.xml, like:

   <com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:itemBackground="@drawable/bk_menu_item"/>

I understand it is not a perfect solution, but it seems the only solution working in my case.

Freddie
  • 210
  • 3
  • 6
  • This worked for me although because I had a state based background for each item (so different colors when selected or normal) I had to change two background drawable heights to make sure the height remained constant when an item was pressed or not. – leafcutter Nov 26 '20 at 13:21
0

Paste this in styles.xml

<style name="NavigationTheme" parent="AppTheme">
  <item name="android:textSize">16sp</item>
  <item name="android:layout_marginBottom">02dp</item>
</style>

In navigation drawer put this in each item:

android:theme="@style/NavigationTheme"
Ivan
  • 34,531
  • 8
  • 55
  • 100
ammar
  • 25
  • 1
0

add below code in dimens.xml

 <dimen tools:override="true" name="design_navigation_icon_padding">16dp</dimen>
Saeed
  • 3,294
  • 5
  • 35
  • 52
Kevendra
  • 71
  • 1
  • 5