Android Navigation view: Scroll the menu items only issue

Question

I want to scroll only the menu items of the navigation view but it also scroll the header with it. Please any body tell me how to achieve this... Here is my code:

activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        .......    
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/header"
            app:menu="@menu/drawer" />
    </android.support.v4.widget.DrawerLayout>

header.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="190dp"
        android:background="@drawable/background_material"
        android:orientation="vertical"
        >

        <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/profile_image"
            android:layout_width="76dp"
            android:layout_height="76dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="24dp"
            android:layout_marginStart="24dp"
            android:src="@mipmap/ic_launcher"
            app:border_color="#FF000000" /
    </RelativeLayout>

drawer_menu_items.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">

        <item
            android:id="@+id/inbox"
            android:checked="false"
            android:icon="@drawable/ic_inbox_black"
            android:title="@string/inbox_string" />

        <item
            android:id="@+id/starred"
            android:checked="false"
            android:icon="@drawable/ic_star_black"
            android:title="@string/starred_string" />

        <item
            android:id="@+id/sent_mail"
            android:checked="false"
            android:icon="@drawable/ic_send_black"
            android:title="@string/sent_mail_string" />

        <item
            android:id="@+id/drafts"
            android:checked="false"
            android:icon="@drawable/ic_drafts_black"
            android:title="@string/draft_string" />


        <item
            android:id="@+id/allmail"
            android:checked="false"
            android:icon="@drawable/ic_email_black"
            android:title="@string/all_mail_string" />
        <item
            android:id="@+id/trash"
            android:checked="false"
            android:icon="@drawable/ic_delete_black"
            android:title="@string/trash_string" />
        <item
            android:id="@+id/spam"
            android:checked="false"
            android:icon="@drawable/ic_error_black"
            android:title="@string/spam_string" />
        <item
            android:id="@+id/abc"
            android:checked="false"
            android:icon="@android:drawable/ic_menu_camera"
            android:title="Camera" />
        <item
            android:id="@+id/abcd"
            android:checked="false"
            android:icon="@android:drawable/ic_menu_call"
            android:title="Call" />
        <item
            android:id="@+id/abcde"
            android:checked="false"
            android:icon="@android:drawable/ic_menu_gallery"
            android:title="Gallery" />

        <item

            android:checked="false"
            android:icon="@android:drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item

            android:checked="false"
            android:icon="@android:drawable/ic_menu_compass"
            android:title="Compass" />
        <item

            android:checked="false"
            android:icon="@android:drawable/ic_menu_myplaces"
            android:title="My Places" />

    </group>
</menu>

How can I only scroll the menu item not the header... I've attached some pictures too...

Cayuga

You can't achieve it currently – Ignaz

I think I should add a listview inside navigation view instead of adding menu items? what do you say about it @Gabriele Mariotti – Cayuga

Not use the NavigationView in this case. – Ignaz

@Cayuga I've done this before, you use a ListView instead of adding menu items. – Cramfull

Answer 1

I know its Too old Question but its too easy!

<android.support.design.widget.NavigationView
    android:id="@+id/navigationview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/header_drawer"
    app:menu="@menu/item_drawer">

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

Add the following code to the NavigationView (<include layout="@layout/header_drawer"/>)

<android.support.design.widget.NavigationView
     android:id="@+id/navigationview"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_gravity="start"
     app:headerLayout="@layout/header_drawer"
     app:menu="@menu/item_drawer">

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

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

Orson

Answer 2

You should be able to place your header outside of the NavigationView, like so:

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

    <!-- nav drawer -->
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        >
        <!-- header -->
        <RelativeLayout 
            android:layout_width="match_parent"
            android:layout_height="190dp"
            android:background="@drawable/background_material"
            android:orientation="vertical"
            >

            <de.hdodenhof.circleimageview.CircleImageView 
                android:id="@+id/profile_image"
                android:layout_width="76dp"
                android:layout_height="76dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="24dp"
                android:layout_marginStart="24dp"
                android:src="@mipmap/ic_launcher"
                app:border_color="#FF000000" />
        </RelativeLayout>

        <!-- menu -->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1"
            android:layout_gravity="start"
            app:menu="@menu/drawer" />
    </FrameLayout>
</android.support.v4.widget.DrawerLayout>

Note: I've added a FrameLayout to encapsulate everything in a single view for the DrawerLayout, adjusted the NavigationView's height to automatically use the available space below your header, and have removed the headerLayout attribute.

Exquisite

Answer 3

I couldn't get Lornes answer to work, but I had some success by using a custom NavigationView. It's very hacky but achieves the desired effect.

The methods added to the custom NavigationView allow you to add a header on top of the NavigationView then size the menu so it fits beneath the header.

Comments for improvements are welcome

The overrided NavigationView

public class CustomNavigationView extends NavigationView {

public CustomNavigationView(Context context) {
    super(context);
}


public CustomNavigationView(Context context, AttributeSet attrs) {
    super(context, attrs);
}


public CustomNavigationView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}


// Consumes touch in the NavigationView so it doesn't propagate to views below
public boolean onTouchEvent (MotionEvent me) {
    return true;
}


// Inflates header as a child of NavigationView
public void createHeader(int res) {
    LayoutInflater inflater = LayoutInflater.from(getContext());
    View view = inflater.inflate(res, this, false);

    // Consumes touch in the header so it doesn't propagate to menu items below
    view.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event){
            return true;
        }
    });

    addView(view);
}


// Positions and sizes the menu view
public void sizeMenu(View view) {
    // Height of header
    int header_height = (int) getResources().getDimension(R.dimen.nav_header_height);

    // Gets required display metrics
    DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
    float screen_height = displayMetrics.heightPixels;

    // Height of menu
    int menu_height = (int) (screen_height - header_height);

    // Layout params for menu
    LayoutParams params = new LayoutParams(
            LayoutParams.MATCH_PARENT,
            LayoutParams.WRAP_CONTENT);
    params.gravity = Gravity.BOTTOM;
    params.height = menu_height;
    view.setLayoutParams(params);
}

}

And this in the onCreate of main activity

// Inflates the nav header
    CustomNavigationView navigationView = (CustomNavigationView) findViewById(R.id.your_nav_view);
    navigationView.createHeader(R.layout.your_nav_header);

    // sizes nav drawer menu so it appears under header
    ViewGroup parent = (ViewGroup) navigationView;
    View view = parent.getChildAt(0);
    navigationView.sizeMenu(view);

Weismannism

Answer 4

I know its Too old Question but its too easy.

<android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/header"
            app:menu="@menu/drawer" />
    </android.support.v4.widget.DrawerLayout>

change it to below code (include header inside)

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

              <include layout="@layout/header"/>
    </android.support.v4.widget.DrawerLayout>

work like charm happy coding :)

Spark

Answer 5

I also faced thhis problem and resolved it . here is the solution

1) Create default navigation drawer in your project

2) remove header tag from NavigationView in activity_main.xml and add header 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:headerLayout="@layout/nav_header_main" >>>>>> X
    app:menu="@menu/activity_main_drawer" >
    <include
        layout="@layout/nav_header_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

3) add required blank items in top of menu->activity_main_drawer.xml (depand on your header height

Knownothing

Answer 6

I solved this problem by doing

<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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

//where your main content goes.
<include
    layout="@layout/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<include
    layout="@layout/nav_drawer_layout"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true" />

Inside drawer layout, included add this layout,

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/nav_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

 //your header layout.
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:gravity="bottom"
    android:orientation="vertical">

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

</LinearLayout>

<android.support.v7.widget.RecyclerView
    android:id="@+id/drawerRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:layout_weight="1"
    android:background="#ffffff" />

   //your footer layout
<include layout="@layout/nav_footer_item" />

Then just populate the recyclerview.

Corelative