NavigationView and custom Layout

Question

I'm using the Designs Support Libraries NavigationView like this:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <!-- put your main layout here -->
    <include layout="@layout/drawer_main_layout"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view"/>

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

And I have set this menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_dashboard"
            android:title="Home" />
        <item
            android:id="@+id/nav_messages"
            android:icon="@drawable/ic_event"
            android:title="Messages" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/ic_headset"
            android:title="Friends" />
        <item
            android:id="@+id/nav_discussion"
            android:icon="@drawable/ic_forum"
            android:title="Discussion" />
    </group>

    <item android:title="Sub items">
        <menu>
            <item
                android:icon="@drawable/ic_dashboard"
                android:title="Sub item 1" />
            <item
                android:icon="@drawable/ic_forum"
                android:title="Sub item 2" />
        </menu>
    </item>

</menu>

Is there any way to use the NavigationView with a layout rather than a menu?

i want the header view and i want instead of menu to use a custom layout — Panayiotis Irakleous, Jun 03 '15 at 17:10

score 193 · Accepted Answer · edited Jul 07 '23 at 14:44

193

Here's how I solved it, and worked perfectly:

<android.support.design.widget.NavigationView
    android:id="@+id/navigationView"
    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
            android:id="@+id/menuItemsListView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

    </LinearLayout>

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

edited Jul 07 '23 at 14:44

Adil Hussain

30,049
21
112
147

answered Jul 30 '15 at 06:41

Hamzeh Soboh

7,572
5
43
54

Perfect way! I was tired of finding this but stupid of me why didn't I try expanding the closing tags! Nice One! I needed an explandable ListView actually! – sud007 Aug 12 '15 at 08:53
2

does this draw the headerview unter the status bar? – marilion91 Sep 03 '15 at 07:44
Yes for sure, as its still a part of the NavigationView. – Hamzeh Soboh Sep 03 '15 at 08:13
this is the only XML based working solution I have found so far. +1 – michnovka Oct 06 '15 at 16:10
Could anyone give reference link for this solution? because I tried this but getting problems. – Pranav P Nov 27 '15 at 06:29
Is it possible to get the "navigationView.setCheckedItem" system while using a recyclerview/listview? – MHogge Feb 22 '16 at 11:14
@Shargotth you should change checked item status onResume of each screen of Menu – Jemshit Feb 23 '16 at 13:49
@HamzehSoboh what is @layout/nav_header? – Sibelius Seraphini Mar 24 '16 at 18:31
@SibeliusSeraphini it's any other layout in your resources folder that you need as a header. The `include` line can be simply substituted by that layout. – Hamzeh Soboh Mar 25 '16 at 11:10
just brilliant. was hunting for the solution since long.. God bless u :) – geeky_monster Jul 01 '17 at 20:33
hey @HamzehSoboh , how can i get the call back when an view in the header or list clicked..not getting call back to onNavigationItemSelected(). – Alvin Varghese Jul 02 '17 at 06:42
@AlvinVarghese, sure because you're using a custom layout for the drawer. Just get the callback as you used to do in a normal listviews or recyclerviews. For the header, you can just set a normal click listener for it. – Hamzeh Soboh Jul 04 '17 at 07:00
why do you need the NavigationView here? Can't you just use the LinearLayout instead of the NavigationView? What does it add? – Boy Jun 13 '18 at 19:32
Really better approach. I only recommend you guys to use one unique include instead. With that you gonna be able to keep ordered the menu-drawer interface separately. – Bruno Reis Portela Mar 10 '19 at 01:12
hi all for me listview is not scrolling please help me – Vijay May 07 '19 at 10:36
thanks so much. This should be in the official docs – MikeMcC Apr 18 '23 at 15:57

score 38 · Answer 2 · edited Dec 03 '17 at 22:55

38

Yes You can .... As I have done ... Just take your custom layout inside the NavigationView

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <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:entries="@array/test"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

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

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

The above code work for me... But don't forget to remove app:menu from NavigationView . Otherwise it will overlap your custom view on the menu items.

edited Dec 03 '17 at 22:55

Benoit Duffez

11,839
12
77
125

answered Jun 04 '15 at 13:08

Moinkhan

12,732
5
48
65

1

The listview is appearing over the headerview. How to put it below headerview? – Sudheesh Mohan Jun 19 '15 at 09:39
If u are using `ListView` as a child view then you can not use `NavigationView's` Header. So If you are using `ListView` you can add headerView in `ListView`. – Moinkhan Jun 19 '15 at 09:42
1

When I added headerview in Listview, headerview disappeared. code – Sudheesh Mohan Jun 19 '15 at 09:45
Bro currently Design support library is buggy... You can do it. If you want to add headerview you have inflate it and add in listview programatically .. – Moinkhan Jun 19 '15 at 09:48
7

What the NavigationView gives more if then we use ListView inside of it with a custom row as we are doing so far until now? – Davideas Jun 24 '15 at 13:14
NavigationView is just for give a navigation in your app. You can also use it without drawer. It's just allow you to do a less code if you want simple label and image in your menu optional header that's it.... – Moinkhan Jul 23 '15 at 03:35
`LayoutInflater inflater = getLayoutInflater(); View listHeaderView = inflater.inflate(R.layout.header_list,null, false); mDrawerList.addHeaderView(listHeaderView);` – yalematta Jul 14 '17 at 09:33

NavigationView and custom Layout

2 Answers2

Linked