How to create custom navigation view with Recycler View.

Android provide us NavigationView according to the material specification provided by Google. However to get the full control over a drawer. We can create our custom implementation in the navigation view.

NavigationView is a subclass of FrameLayout, which can have multiple children. That means you can add a custom view to your NavigationView

Here is a sample of custom navigation view created using Recycler View

 <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="false">

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

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

                <android.support.v7.widget.RecyclerView
                    android:id="@+id/nav_drawer_recycler_view"
                    android:layout_width="280dp"
                    android:layout_height="wrap_content"
                    android:background="@android:color/white"
                    android:nestedScrollingEnabled="false"
                    tools:targetApi="lollipop" />

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.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="false">

<android.support.v4.widget.NestedScrollView

android:layout_width="match_parent"

android:layout_height="wrap_content">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<android.support.v7.widget.RecyclerView

android:id="@+id/nav_drawer_recycler_view"

android:layout_width="280dp"

android:layout_height="wrap_content"

android:background="@android:color/white"

android:nestedScrollingEnabled="false"

tools:targetApi="lollipop" />

</LinearLayout>

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

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

Note: Make sure you have removed app:menu from the NavigationView.

Now you can use adapter to load view inside RecyclerView or our custom NavigationView.

That’s all folks. Stay updated !!

Shubham Agarwal 14 December 2016

. . .

2 comments

Eugene Kartoyev Jul 23, 2018 at 12:14 pm

Dear Shubham, you should not put RecyclerView inside a (nested) scrollview, as it kills the *recycler* property of a RecyclerView.

RecyclerView holds in memory only the visible elements. By putting it in a NestedScrollView, you make it inflate all its elements from top to bottom and the off-screen elements are no longer “recycled”, and this way the RecyclerView no longer serves its purpose.

You might as well use a ListView or CoordinatorLayout instead.

Olvin Lizama Jul 23, 2018 at 12:14 pm

But then how do you handle the clicked items?

How to create custom navigation view with Recycler View.

Leave a Comment Cancel Reply

2 comments

Message Sent!