Fixed navigation header in navigation drawer while scrolling through items

Question

CURRENT STATE: NavigationDrawer with a NavigationHeader and NavigationMenu items. The items are large in number so scrolling is required in order to access the items towards the bottom.

REQUIREMENT: When scrolling down to the bottom, the NavigationHeader should stay fixed

Here's my activity_main layout file

<android.support.v4.widget.DrawerLayout
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"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<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"
    android:background="#00000000"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer"
    />

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

Here's my navigation_header_main layout file

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:background="#3d3b3b"

android:theme="@style/ThemeOverlay.AppCompat.Dark">

<android.support.v7.widget.AppCompatImageView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:src="@drawable/categories"
    android:padding="1dp"
    />

</RelativeLayout>

P.S I am new to android dev. Please ask for more resources if required

`NavigationView` is but a `RecyclerView`, and the view on top _will_ scroll with the rest. if you don't want this, you will have to create your own layout to use as a menu. — David Medenjak, May 09 '16 at 18:23
Thanks for responding. So my understanding is I'd have to make a custom navigationview instead of the support design widget one, yeah? — Parabola, May 10 '16 at 16:50
Doesn't need to be custom view. E.g. you could add a LinearLayout with your header and the NavigationView below — David Medenjak, May 10 '16 at 17:01
Found a workaround. Definitely not the most efficient one. Please suggest if anything could be done from here. android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" android:background="#00000000" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer"> — Parabola, May 10 '16 at 19:07

score 6 · Answer 1 · answered May 10 '16 at 19:14

Found a workaround. Definitely not the most efficient one. Please suggest if anything could be done from here.

<android.support.v4.widget.DrawerLayout
  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"  
  android:id="@+id/drawer_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true"
  tools:openDrawer="start">

<include
  layout="@layout/app_bar_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />

<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"
  android:background="#00000000"
  app:headerLayout="@layout/nav_header_main"
  app:menu="@menu/activity_main_drawer">

 <include layout="@layout/nav_header_main"

 <android.support.design.widget.NavigationView>

Definitely works. But the header layout is redundant

Yes the header layout overlaps the menu so some portion of the menu is hidden below — Abhinav Saxena, Jun 16 '18 at 07:27

Deven · Answer 2 · 2017-08-05T21:02:52.537

I know its too old question but i sharing a solution that's working for me:

1. PLACE nav_header_main inside 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" >

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

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

2. ADD some empty item as suitable for your header height in @menu/activity_main_drawer file

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:enabled="false"
          android:title=" " />
    <item android:enabled="false"
          android:title=" " />
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/home"
            android:title="@string/home" />
        ......
    </group>
</menu>

Ingenious workaround. It works for me. Thanks Deven. – iSofia Sep 22 '17 at 13:54 — iSofia, Sep 22 '17 at 13:54

score 3 · Answer 3 · answered Apr 18 '18 at 09:15

Hey guys I've come up with a solution for the nav_drawer and how we can implement the static nav_drawer without writing any extra coding.

I'm sharing git link of the project that I'm currently working on. Thanks !! Below is the activity_main.xml file and I've used Navigation View Menu

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_main_bg_shape"
        android:orientation="vertical">

        <Button
            android:id="@+id/whats_cool"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="260dp"
            android:layout_marginTop="400dp"
            android:background="@drawable/buttonshape"
            android:fontFamily="@font/delius_unicase"
            android:shadowColor="#362802"
            android:shadowDx="4"
            android:shadowDy="3"
            android:shadowRadius="10"
            android:text="What's Cool"
            android:textColor="#003931"
            android:textSize="12sp" />

    </LinearLayout>


    <android.support.design.widget.NavigationView
        app:headerLayout="@layout/nav_header"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/gray_white"
        app:menu="@menu/nav_drawer"
        android:layout_gravity="start"
        app:itemTextColor="@color/darkBlue"
        app:itemIconTint="@color/darkBlue"
        >
    <include layout="@layout/nav_header"/>

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

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

And you don't need to make any changes into your header layout and nav_drawer.

This is same as the answer below from "Parabola" (causes redundancy), and answered by "Deven" just below your post. — Abhinav Saxena, Jun 16 '18 at 07:33

score 2 · Answer 4 · answered Mar 29 '17 at 12:49

Just wrap the navigation view into a linear layout

<android.support.v4.widget.DrawerLayout
    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"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

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

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

        <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:background="#00000000"
            android:fitsSystemWindows="true"
            app:menu="@menu/activity_main_drawer"/>

    </LinearLayout>

score 0 · Answer 5 · answered May 09 '16 at 18:24

Remove orientation from RelativeLayout. It doesn't support it
Set android:gravity="bottom" for parent RelativeLayout of header view.

My mistake, It will still scroll. You need to have custom recycler view for your navigation menu. So it scrolls in it's own container

score 0 · Answer 6 · answered Aug 21 '21 at 23:07

<com.google.android.material.navigation.NavigationView
    android:id="@+id/NavigationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/header_rectangle"
    app:itemTextColor="@color/white"
    app:headerLayout="@layout/hidder_layout"
    app:itemIconTint="@color/purple_700"
    android:layout_gravity="start"
    app:menu="@menu/navigation_menu" >

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

</com.google.android.material.navigation.NavigationView>

While this code may answer the question, it would be more useful if it explained _how_ it does so. — Ryan M, Aug 27 '21 at 23:35

Fixed navigation header in navigation drawer while scrolling through items

6 Answers6

Linked