How can I add a custom item to a NavigationView with a menu layout?

Question

I've been experimenting with simplifying some navigation drawer code by making use of the new NavigationView class in the Android design support library. It works great if you just want icons on the left, and text on the right like in the example in the documentation, but what if I want to add a single custom view to the layout which has an android.support.v7.widget.SwitchCompat like in the Google Play Movies app (see screenshot below)?

I've tried using the actionLayout attribute to specify a custom layout file like in the example code below, however that attribute appeared to be ignored as it didn't work.

res/menu/navigation_drawer.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:id="@+id/group1"
            android:checkableBehavior="single">
        <item
            android:id="@+id/nav_screen1"
            android:icon="@drawable/ic_list_black_24dp"
            android:title="Screen 1" />
        <item
            android:id="@+id/nav_screen2"
            android:icon="@drawable/ic_search_black_24dp"
            android:title="Screen2"/>
    </group>
    <group  android:id="@+id/group2">
        <item
            android:id="@+id/nav_custom"
            android:icon="@drawable/custom_icon_24dp"
            app:actionLayout="@layout/nav_drawer_switch"
            android:title="Custom item with switch"/>
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="Settings"/>
    </group>
</menu>

res/layout/nav_drawer_switch.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.SwitchCompat
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:text="Custom item with switch"/>
</LinearLayout>

How can I get this to work? Ideally I'd like to add the custom view while still making use of my Menu layout, but if that's not possible without using a crude hack (like tapping into an existing layout generated by the support library) then I'd like to know the solution with the least amount of code, and which still makes it worth transitioning to NavigationView.

Answer 1

The actionLayout attribute is now supported in Android Support Library 23.1:

NavigationView provides a convenient way to build a navigation drawer, including the ability to creating menu items using a menu XML file. We’ve expanded the functionality possible with the ability to set custom views for items via app:actionLayout or using MenuItemCompat.setActionView().

So the code in the question should just work now.

Answer 2

NavigationView is a subclass of FrameLayout, which can have multiple children:

You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.

That means you can add a custom view to your NavigationView:

<android.support.design.widget.NavigationView
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:menu="@menu/side_menu">

    <LinearLayout 
        android:orientation="horizontal" 
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="bottom">

        <android.support.v7.widget.SwitchCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="night_mode"/>
    </LinearLayout>
</android.support.design.widget.NavigationView>

Answer 3

I had the same problem and found that NavigationView behaves differently depending on:

• Whether you set the android:title and android:icon attributes on item or not
• What kind of view your action layout contains (e.g. TextView or others)

Not setting the attributes worked for completely customizing the item:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">

    <item
        android:id="@+id/nav_custom"
        android:title="@null"
        app:actionLayout="@layout/nav_drawer_switch" />
</menu>

(Note that you can also just not set android:title, but that results in a warning in Android Studio.)

The result:

(This is with version 27.1.1 of com.android.support:design, not sure about other versions.)

Answer 4

You might want to take a look at this library: https://github.com/mikepenz/MaterialDrawer. It makes it easy to use Navigation Drawer and it supports custom views.

Answer 5

create a layout with switchcompat and mention it in menu item as

<item android:id="@+id/notification"
        android:title="Notification"
        app:actionLayout="@layout/notify" />`

then notify layout add this

<android.support.v7.widget.SwitchCompat
    android:id="@+id/switch_compat"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:checked="false"
    android:onClick="notify"/>

onclick is the keyPoint,implement handler in your Activity,then it will work.