Navigation Drawer: Add Titles to Groups, Not Items

Question

I have a standard Navigation Drawer, pre-created by Android Studio and want to populate it with number of groups. I started with this:

<?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/nav_mode_person"
            android:icon="@drawable/ic_person_black_24dp"
            android:title="Person" />
        <item
            android:id="@+id/nav_mode_group"
            android:icon="@drawable/ic_group_black_24dp"
            android:title="Community" />
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>

</menu>

But what I didn't get is if it even possible to give each group a title? I mean there is an android:title option available for <item>s, but it is unavailable for <group>s and if I try to wrap groups around items, what I get is a messy entries behavior.

I read through Google's design guideline on Navigation Drawer, but missed the point if groups should have its own names or they should not. Here is a picture of what I want to achieve:

Is it possible without adding random <TextView>s? By the way, I want to do it via XML, not programmatically.

Answer 1

You also required to have an outer group with android:checkableBehavior="single" so that no two item is selected one from First Category and other from Second Category. Here is the working code.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
    android:title="First Category">
    <menu>
        <group
            android:id="@+id/menu_top"
            android:checkableBehavior="single">
            <item
                android:id="@+id/id1"
                android:icon="@drawable/drawable1"
                android:title="Title1" />

            <item
                android:id="@+id/id2"
                android:icon="@drawable/drawable2"
                android:title="Title2" />
        </group>
    </menu>
</item>
<item
    android:title="Second Category">
    <menu>
        <group
            android:id="@+id/menu_bottom"
            android:checkableBehavior="single">
            <item
                android:id="@+id/id3"
                android:icon="@drawable/drawable3"
                android:title="Title3" />

            <item
                android:id="@+id/id4"
                android:icon="@drawable/drawable4"
                android:title="Title4" />
        </group>
    </menu>
</item>
</group>
</menu>

Answer 2

Here is well defined how to create menus.

http://developer.android.com/guide/topics/ui/menus.html

So in your case create your list in this order item->menu->group. that is to say:

 <item android:title="Title">
     <menu>
         <group android:checkableBehavior="single">
             <item android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
                .   .   .
                .   .   . 

Answer 3

add xml class navigation_drawer_title:

<?xml version="1.0" encoding="utf-8"?>
<TextView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:text="communicate"
        android:layout_height="wrap_content"/>

and change your navigationAdapter like this

private static final int TYPE_HEADER = 0; 
    private static final int TYPE_ITEM = 1;
    private static final int TYPE_SEPARATOR = 2;
    private static final int TYPE_TITLE = 3;
    @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
        {
            View v = null;
            switch (viewType)
            {
                case TYPE_HEADER:
                    v = LayoutInflater.from(parent.getContext()).inflate(R.layout.navigation_drawer_header, parent, false); //Inflating the layout
                    break;
                case TYPE_ITEM:
                    v = LayoutInflater.from(parent.getContext()).inflate(R.layout.navigation_drawer_item, parent, false); //Inflating the layout
                    break;
                case TYPE_SEPARATOR:
                    v = LayoutInflater.from(parent.getContext()).inflate(R.layout.navigation_drawer_separator, parent, false); //Inflating the layout
                    break;

                case TYPE_TITLE:
                    v = LayoutInflater.from(parent.getContext()).inflate(R.layout.navigation_drawer_title, parent, false); //Inflating the layout
                    break;
            }
            return new ViewHolder(v, viewType); // Returning the created object

        }

and

@Override
    public int getItemViewType(int position)
    {
        if (position == 0)
            return TYPE_HEADER;
        if (navMenuItems.get(position - 1).getItemType() == NavItemType.Group)
            return TYPE_SEPARATOR;
        if (navMenuItems.get(position - 2).getItemType() == NavItemType.Group)
            return TYPE_TITLE

        return TYPE_ITEM;
    }

Answer 4

You are right, it's not possible to give groups a title. The only option seems to be to wrap groups into <item> and <menu> tags like this

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

    <item android:title="General">
        <menu>
            <group android:checkableBehavior="single">
                <item
                    android:id="@+id/nav_camera"
                    android:icon="@drawable/ic_menu_camera"
                    android:title="Import" />
                <item
                    android:id="@+id/nav_gallery"
                    android:icon="@drawable/ic_menu_gallery"
                    android:title="Gallery" />
            </group>
        </menu>
    </item>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>

</menu>

Resulting in a navigation drawer menu like this