Fixed navigation header in navigation drawer while scrolling through items

问题

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

回答1:

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

回答2:

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>

回答3:

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>

回答4:

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.

回答5:

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

来源：https://stackoverflow.com/questions/37122753/fixed-navigation-header-in-navigation-drawer-while-scrolling-through-items

标签

android

navigation-drawer

android-navigationview