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>

Answer 1

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>

Answer 2

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()));
}