How to add custom views in the new NavigationView

Question

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" />

you can refer my this answer http://stackoverflow.com/questions/30626324/navigationview-and-custom-layout/30644656#30644656 — Moinkhan, Jun 24 '15 at 07:02
The solution uptill now is to use the DrawerLayout with the old NavigationDrawer, I couldn't find a workaround using the NavigationVIew — atabouraya, Aug 02 '15 at 10:32
Is that allowed regarding to the [Material Design Guidelines](https://www.google.com/design/spec/patterns/navigation-drawer.html)? — Tomblarom, Aug 03 '15 at 09:56

score 67 · Accepted Answer · edited Oct 09 '19 at 12:07

67

The new support library 23.1

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

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

edited Oct 09 '19 at 12:07

Sufian

6,405
16
66
120

answered Oct 20 '15 at 16:59

atabouraya

3,233
1
26
31

very informative. Thnx. How to handle that switch change event ? – MohK Oct 26 '15 at 06:59
7

For example in this view it's the 4th item: 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); } }); – atabouraya Oct 27 '15 at 14:18
@atabouraya +1 for that, one doubt, Where should the SwitchCompact be initialized , I'm getting NullPointerException when trying to call setOnChecked, – Nikesh Nov 03 '15 at 17:48
You're getting NullPointerException when trying to access navigationView or SwitchCompat? – atabouraya Nov 05 '15 at 10:39
2

@atabouraya .. I have an issue...SwichCompat's thumb not switching their position on checked and unchecked, only color changes – Deven Singh Dec 29 '15 at 11:04
1

I have another problem, how did you manage to make the text start from the same point the menu icons start ? for me the text is aligned with all the texts in the menu which leaves a lot of empty space on the left – Mina Zaki Feb 11 '16 at 13:14
If an item in the same group has an icon all the other items will have the same indentation, trying putting it in a separate group – atabouraya Feb 11 '16 at 17:52
2

I suggest using getMenu().findItem(itemID) method to get the menuItem object. – Lingviston Apr 08 '16 at 19:34
why don't better use getMenu/findItem(R.id.itemId) to find it easily? – htafoya Nov 08 '16 at 04:40
Working but I am facing same problem which was faced by @MinaZaki Any solution? – Shweta Nandha Aug 28 '17 at 10:58
@atabouraya accept any answer if your issue is resolved for SO users. – Aks4125 Sep 25 '17 at 08:54

score 5 · Answer 2 · answered Mar 16 '16 at 13:48

Simple solution as you are using NavigationView

<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:menu="@menu/activity_main_drawer">

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

        <android.support.v7.widget.SwitchCompat
            android:id="@+id/mSwitch"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="Night Mode" />

    </LinearLayout>

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

score 1 · Answer 3 · answered Jul 27 '15 at 13:15

Try to wrap your Switch into a separate Layout file:

Menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
    android:id="@+id/menu_switch"
    android:title="Switch Title"
    app:actionLayout="@layout/layout_my_switch"
    app:showAsAction="always" />
</menu>

Switch: "layout_my_switch.xml"

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.SwitchCompat
    android:id="@+id/my_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" />
</RelativeLayout>

'app:showAsAction' & 'app:actionLayout' is ignored in the NavigationView — Gallal, Jul 27 '15 at 14:37

Moinkhan · Answer 4 · 2017-03-03T04:58:26.443

[Update 03-03-2017] The answer is outdated. Don't refer this. Refer the accepted answer.

Unfortunately currently NavigationView is not much allow customization ...

You have to take the Customized ListView inside NavigationView.

<android.support.design.widget.NavigationView
    android:id="@+id/navView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

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

And create cell for this listview by taking TextView to left side and SwitchCompact to right side.

I hope it help you ...

score 0 · Answer 5 · answered Jul 07 '16 at 18:16

I used Below layout in Drawer Layout where Navigation View code has been used.

<android.support.design.widget.NavigationView
        android:id="@+id/navi_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start|top"
        android:background="@color/navigation_view_bg_color"
        app:theme="@style/NavDrawerTextStyle">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include layout="@layout/drawer_header" />

            <include layout="@layout/navigation_drawer_menu" />
        </LinearLayout>
    </android.support.design.widget.NavigationView>

score -5 · Answer 6 · answered Aug 03 '15 at 09:53

-5

Are you looking for something like this,

Then there is a custom component available in Synfusion, called Navigation drawer.

You can find the respective documentation here.

Man.! they offers Community license also.

answered Aug 03 '15 at 09:53

Joy Rex

608
7
32

2

he use NavigationView – Hugo Gresse Aug 03 '15 at 13:03
`NavigationDrawer` is also `NavigationView` with some other additional features in it – Joy Rex Aug 04 '15 at 03:57
where we can navigation from `LeftToRight`, `RightToLeft`, `TopToBottom` and `BottomToTop` with various animation transitions – Joy Rex Aug 04 '15 at 03:59
but why do you speak about Symfusion as he use standard Android ? – Hugo Gresse Aug 04 '15 at 07:07
just an option available to use custom `NavigationView`, instead of trying complex workaorund in the native `Android` – Joy Rex Aug 04 '15 at 08:53

How to add custom views in the new NavigationView

6 Answers6