Search code examples
androidnavigationview

android navigation view empty space before(left side of) menu item

I am tinkering around with an android app using a navigation view. For the first few menu items, I have given an icon, but after that, I have given only the menu title. But in the navigation panel, the menu items without an icon have an empty space.

enter image description here

How can I remove the empty space? I want the menu items to start without the empty space.

This is my main_activity.xml code:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <include
        layout="@layout/activity_category"
        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"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:text="Emoji icons provided free by EmojiOne(www.emojione.com)"
            android:background="#424242"
            android:textColor="@android:color/white"
            android:textSize="12dp"
            android:layout_gravity="bottom"
            android:gravity="center"/>

    </android.support.design.widget.NavigationView>

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

This is my activity_main_drawer.xml code:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:checkableBehavior="single">

    <item
        android:id="@+id/numbers_menu_item"
        android:icon="@drawable/numbers"
        android:title="Numbers" />

    <item
        android:id="@+id/family_menu_item"
        android:icon="@drawable/family"
        android:title="Family"/>

    <item
        android:id="@+id/colors_menu_item"
        android:icon="@drawable/colors"
        android:title="Colors"/>

    <item
        android:id="@+id/animals_menu_item"
        android:icon="@drawable/animals"
        android:title="Animals"/>
    <item
        android:id="@+id/food_menu_item"
        android:icon="@drawable/coconut"
        android:title="Food"/>

    <item
        android:id="@+id/pronoun_menu_item"
        android:title="Pronouns" />

    <item
        android:id="@+id/pronoun_examples_menu_item"
        android:title="Pronoun Examples"/>

    <item
        android:id="@+id/greetings_menu_item"
        android:title="Greetings"/>

    <item
        android:id="@+id/introductions_menu_item"
        android:title="Introductions"/>

    <item
        android:id="@+id/vendors_menu_item"
        android:title="Talking with vendors"/>

    <item
        android:id="@+id/directions_menu_item"
        android:title="Asking for directions"/>

    <item
        android:id="@+id/colleagues_menu_item"
        android:title="Talking with colleagues"/>

    <item
        android:id="@+id/taxi_driver_menu_item"
        android:title="Talking with taxi driver"/>

    <item
        android:id="@+id/questioning_words_menu_item"
        android:title="Questioning Words"/>


    </group>

    <item android:title="Empty category"/>


</menu>

Edit: Tried grouping all the menu items without icons in a single group. Still didn't work. Code:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:checkableBehavior="single">
    <item
        android:id="@+id/numbers_menu_item"
        android:icon="@drawable/numbers"
        android:title="Numbers" />

    <item
        android:id="@+id/family_menu_item"
        android:icon="@drawable/family"
        android:title="Family"/>

    <item
        android:id="@+id/colors_menu_item"
        android:icon="@drawable/colors"
        android:title="Colors"/>

    <item
        android:id="@+id/animals_menu_item"
        android:icon="@drawable/animals"
        android:title="Animals"/>
    <item
        android:id="@+id/food_menu_item"
        android:icon="@drawable/coconut"
        android:title="Food"/>
    </group>
    <group
        android:checkableBehavior="single">
    <item
        android:id="@+id/pronoun_menu_item"
        android:title="Pronouns" />

    <item
        android:id="@+id/pronoun_examples_menu_item"
        android:title="Pronoun Examples"/>

    <item
        android:id="@+id/greetings_menu_item"
        android:title="Greetings"/>

    <item
        android:id="@+id/introductions_menu_item"
        android:title="Introductions"/>

    <item
        android:id="@+id/vendors_menu_item"
        android:title="Talking with vendors"/>

    <item
        android:id="@+id/directions_menu_item"
        android:title="Asking for directions"/>

    <item
        android:id="@+id/colleagues_menu_item"
        android:title="Talking with colleagues"/>

    <item
        android:id="@+id/taxi_driver_menu_item"
        android:title="Talking with taxi driver"/>

    <item
        android:id="@+id/phone_menu_item"
        android:title="Talking in phone"/>

    <item
        android:id="@+id/questioning_words_menu_item"
        android:title="Questioning Words"/>

    <item android:title="Empty category"/>
    </group>

</menu>
Solution

  • From NavigationMenuItemView and NavigationMenuPresenter source code, it will add empty icon if the group has icon or any menu item has an icon. So as suggested, you need to group all text menu on a separate group without an icon.You have to specify a different Group id for each group.

     private void prepareMenuItems() {
        if (mUpdateSuspended) {
            return;
        }
        mUpdateSuspended = true;
        mItems.clear();
        mItems.add(new NavigationMenuHeaderItem());

        int currentGroupId = -1;
        int currentGroupStart = 0;
        boolean currentGroupHasIcon = false;
        for (int i = 0, totalSize = mMenu.getVisibleItems().size(); i < totalSize; i++) {
            MenuItemImpl item = mMenu.getVisibleItems().get(i);
            if (item.isChecked()) {
                setCheckedItem(item);
            }
            if (item.isCheckable()) {
                item.setExclusiveCheckable(false);
            }
            if (item.hasSubMenu()) {
                SubMenu subMenu = item.getSubMenu();
                if (subMenu.hasVisibleItems()) {
                    if (i != 0) {
                        mItems.add(new NavigationMenuSeparatorItem(mPaddingSeparator, 0));
                    }
                    mItems.add(new NavigationMenuTextItem(item));
                    boolean subMenuHasIcon = false;
                    int subMenuStart = mItems.size();
                    for (int j = 0, size = subMenu.size(); j < size; j++) {
                        MenuItemImpl subMenuItem = (MenuItemImpl) subMenu.getItem(j);
                        if (subMenuItem.isVisible()) {
                            if (!subMenuHasIcon && subMenuItem.getIcon() != null) {
                                subMenuHasIcon = true;
                            }
                            if (subMenuItem.isCheckable()) {
                                subMenuItem.setExclusiveCheckable(false);
                            }
                            if (item.isChecked()) {
                                setCheckedItem(item);
                            }
                            mItems.add(new NavigationMenuTextItem(subMenuItem));
                        }
                    }
                    if (subMenuHasIcon) {
                        appendTransparentIconIfMissing(subMenuStart, mItems.size());
                    }
                }
            } else {
                int groupId = item.getGroupId();
                if (groupId != currentGroupId) { // first item in group
                    currentGroupStart = mItems.size();
                    currentGroupHasIcon = item.getIcon() != null;
                    if (i != 0) {
                        currentGroupStart++;
                        mItems.add(new NavigationMenuSeparatorItem(
                                mPaddingSeparator, mPaddingSeparator));
                    }
                } else if (!currentGroupHasIcon && item.getIcon() != null) {
                    currentGroupHasIcon = true;
                    appendTransparentIconIfMissing(currentGroupStart, mItems.size());
                }
                NavigationMenuTextItem textItem = new NavigationMenuTextItem(item);
                textItem.needsEmptyIcon = currentGroupHasIcon;
                mItems.add(textItem);
                currentGroupId = groupId;
            }
        }
        mUpdateSuspended = false;
    }