Navigation Drawer - Divider between sections like Gmail App

Question

I am updating the Navigation Drawer in my app. I want to add section dividers as the Gmail App has. How do I add them? Just add them as views, which is a simple approach. But, i want to know, is it the correct approach?

Gmail App:

Right now, I am using a listview with a header view.

My current xml:

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

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

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar_with_spinner" />

        <FrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </FrameLayout>
    </LinearLayout>

    <ListView
        android:id="@+id/listview_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        android:choiceMode="singleChoice"
        android:divider="@null"
        android:dividerHeight="0dp" />

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

What is the correct approach of achieving something like the Gmail Navigation?

Answer 1

Use Menu Resources instead of listview. the group tag in menu creates a divider line

menu_drawer

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single"
        >
        <item
            android:id="@+id/id1"
            android:icon="@drawable/icon1"
            android:title="@string/title1"
            />
        <item
            android:id="@+id/id2"
            android:icon="@drawable/icon2"
            android:title="@string/title2"
            />
        <item
            android:id="@+id/id3"
            android:icon="@drawable/icon3"
            android:title="@string/title3"
            />

    </group>

    <group android:checkableBehavior="none"
        android:id="@+id/menu_nav_temp_gid"
        >
        <item
            android:id="@+id/settings"
            android:icon="@drawable/ic_settings"
            android:title="@string/settings" />
    </group>
</menu>

Link the menu resources in navigation view

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

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

    <android.support.design.widget.NavigationView
        android:id="@+id/ac_hs_nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/layout_nav_header"
        app:menu="@menu/menu_drawer"

        >

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

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

Answer 2

I used headerview and footerview to add the image on top and divider at the bottom. The divider is a View.

drawer_list_footer_divider.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="bottom"
    android:background="@android:color/white"
    android:orientation="vertical" >

    <View
        android:id="@+id/left_viewline"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="10dp"
        android:background="?android:attr/listDivider" />

</LinearLayout>

drawer_list_footer_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_gravity="bottom"
    android:background="@android:color/white"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:paddingLeft="5dp"
    android:paddingRight="5dp" >

    <ImageView
        android:id="@+id/imageView_settings"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:contentDescription="@string/empty"
        android:src="@drawable/ic_action_settings" />

    <TextView
        android:id="@+id/textView_settings"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:padding="10dp"
        android:singleLine="true"
        android:text="@string/action_settings" />

</LinearLayout>

and in my code:

private void setUpHeaderAndFooter() {

    LayoutInflater inflater = getLayoutInflater();
    View header = (View) inflater.inflate(R.layout.drawer_list_header_view,
            mDrawerList, false);
    mDrawerList.addHeaderView(header, null, false);

    View footer_divider = (View) inflater.inflate(
            R.layout.drawer_list_footer_divider, null, false);
    mDrawerList.addFooterView(footer_divider, null, false);

    // This view is Settings view 
    View footer = (View) inflater.inflate(R.layout.drawer_list_footer_view,
            mDrawerList, false);

    footer.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {

            if (mDrawerLayout.isDrawerOpen(Gravity.LEFT)) {
                mDrawerLayout.closeDrawer(Gravity.LEFT);
            }

            if (android.os.Build.VERSION.SDK_INT < 11) {
                startActivity(new Intent(MainActivity.this,
                        Settings1Activity.class)
                        .setFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT));
            } else {
                startActivity(new Intent(MainActivity.this,
                        Settings2Activity.class)
                        .setFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT));
            }

        }
    });

    mDrawerList.addFooterView(footer, null, true);

}

Answer 3

Use NavigationView inside DrawerLayout as its second child. Insert items in menu and apply menu attribute to NavigationView to display list items in Navigation Drawer. You can then give group id to menu items to be placed inside which will automatically creates a divider. For broader explanation, pls follow :

How to create a simple divider in the new NavigationView?