How to add Custom item to a NavigationView with a menu layout?

Question

I am using the actionLayout tag, but its moving everything to the right. Can someone please advice why this is happening. I've tried with different icons too and same result.

activity_main.xml

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

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

activity_main_drawer.xml

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

        <item
            android:id="@+id/nav_saved_deals"
            android:icon="@drawable/ic_attach_money_black_24dp"
            android:title="Saved Deals" />
        <item
            android:id="@+id/nav_settings"
            android:icon="@mipmap/perm_group_system_tools"
            android:title="Settings" />
    </group>

    <item android:title="Communicate">
        <menu>

            <item
                android:id="@+id/nav_fb_share"
                android:title=""
                app:actionLayout="@layout/fb_menu_item" />
            <item
                android:id="@+id/nav_share_other"
                android:icon="@drawable/ic_menu_share"
                android:title="Share other" />

        </menu>
    </item>
</menu>

fb_menu_item.xml

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

    <ImageView
        android:id="@+id/icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:src="@mipmap/facebook" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toEndOf="@+id/icon"
        android:layout_toRightOf="@+id/icon"
        android:gravity="center_vertical"
        android:text="Line 1"
        android:textColor="#000"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/subTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"            
        android:layout_below="@+id/title"
        android:layout_toRightOf="@+id/icon"
        android:text="Line 2" />

</RelativeLayout>

Layout shows in the top left corner of the screen, over the status bar.

<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"
        app:headerLayout="@layout/nav_header_main">
        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="wrap_content">

            <include
                layout="@layout/fb_menu_item"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </LinearLayout>

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

Similar question for clarity. http://stackoverflow.com/questions/30728842/how-can-i-add-a-custom-item-to-a-navigationview-with-a-menu-layout/35372363#35372363 — llBuckshotll, Feb 17 '16 at 18:38

score 3 · Answer 1 · edited Jul 19 '17 at 11:40

Generally, actionLayout is needed to set action view (not the entire item) and it is always aligned to the right side. And I'm not sure this alignment might be changed. Here you can find some additional information regarding this https://developer.android.com/guide/topics/resources/menu-resource.html

As for custom items, as far as I know, would be better to use NavigationView in a following way:

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_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" />

        ... listview/linearlayout/just items ...

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

I've just tried this solution - and it works:

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_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">

        <LinearLayout
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="172dp"
            android:background="@drawable/drawer_background"
            android:orientation="horizontal">
        </LinearLayout>

        <RelativeLayout 
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/icon"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:src="@drawable/ic_add_black" />

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toEndOf="@+id/icon"
                android:layout_toRightOf="@+id/icon"
                android:gravity="center_vertical"
                android:text="Line 1"
                android:textColor="#000"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/subTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/title"
                android:layout_toRightOf="@+id/icon"
                android:text="Line 2" />

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

This adds the custom items to the top left of the screen over the status bar. — llBuckshotll, Feb 17 '16 at 17:22
Tried it on my machine - it works. Check my update for code. — Sergey Trukhachev, Feb 17 '16 at 21:09
Yes the extra LinearLayout will move the custom item down, but its no longer part of the original menu either. This can be over come by adding all menu items here. But is this really the best answer? Because the layouts are just overlapping the original menu layouts. Also where does the 172dp come from? Is that always the height of the headerLayout? — llBuckshotll, Feb 18 '16 at 21:30
172dp is a default value for the header according to material design guideline, but it is not a mandatory and you should feel free to change it by your needs. — Sergey Trukhachev, Feb 19 '16 at 07:44

score -1 · Answer 2 · answered Feb 15 '16 at 20:27

-1

Try this

public void addItem(){
     MenuItem mainItem = navigationView.getMenu().findItem(R.id.Communicate);
     SubMenu subMenu = mainItem.getSubMenu();
     subMenu.add(R.id.Communicate, Menu.NONE, Menu.NONE, "Share to Facebook").setIcon(context.getResources().getDrawable(R.drawable.facebook, context.getTheme()));
}

answered Feb 15 '16 at 20:27

Vasileios Pallas

4,801
4
33
50

This just adds a menu item. It does not add a custom item. – llBuckshotll Feb 17 '16 at 18:11

How to add Custom item to a NavigationView with a menu layout?

2 Answers2