Search code examples
androidnavigationviewandroid-navigationview

How to add custom views in the new NavigationView


I'm trying to add a switch as menuitem in NavigationView like this

enter image description here

I used the the actionViewClass attribute but it only shows the title.

<item
android:id="@+id/navi_item_create_notifications_sound"
android:title="Notifications Sounds"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:actionViewClass="android.support.v7.widget.SwitchCompat"
app:showAsAction="always" />

Solution

  • The new support library 23.1

    allows using a custom view for the items in Navigation View using app:actionLayout or using MenuItemCompat.setActionView().

    enter image description here

    Here's how I managed to display a SwitchCompat

    menu_nav.xml

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
        <group
            android:id="@+id/first"
            android:checkableBehavior="single">
    
            <item
                android:id="@+id/navi_item_1"
                android:icon="@drawable/ic_feed_grey_500_24dp"
                android:title="Feed" />
            <item
                android:id="@+id/navi_item_2"
                android:icon="@drawable/ic_explore_grey_500_24dp"
                android:title="Explore" />
            <item
                android:id="@+id/navi_item_4"
                android:icon="@drawable/ic_settings_grey_500_24dp"
                android:title="Settings" />
    
        </group>
        <group
            android:id="@+id/second"
            android:checkableBehavior="single">
            <item xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/navi_item_create_notifications_sound"
                android:title="Notifications Sounds"
                app:actionLayout="@layout/menu_swich"
                app:showAsAction="always" />
    
        </group>
    </menu>
    

    menu_switch.xml

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.SwitchCompat xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="right|center_vertical"
        app:buttonTint="@color/colorPrimary"
        app:switchPadding="@dimen/spacing_small" />
    

    To get the View and assign events to it, you should do :

    SwitchCompat item = (SwitchCompat) navigationView.getMenu().getItem(3).getActionView();
            item.setOnCheckedChangeListener( new CompoundButton.OnCheckedChangeListener(){
                @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    Logr.v(LOG_TAG, "onCheckedChanged" + isChecked);
                }
            });