How to Grouping Navigation Drawer Menu Items in Android?

Last Updated : 21 Apr, 2025

Navigation Drawer or Slider Drawer is a UI pattern, used in Mobile Applications and Websites. It is used to provide easy access to different features or parts of an app or website.

It is usually accessed by tapping on the hamburger menu icon (3 horizontal lines), present in the top-left or top-right corner of the screen, or swiping from the left edge of the screen.

Drawer Header Layout: Contains additional information, such as User’s profile picture or App Name/ Website Name, etc.
Menu: Contains a list of options or menu items that the user can navigate to. Users can select and menu item by clicking on it, then it will load a new screen based on the backend of the app or website.

Improves User Experience
Ensures the correct functioning of the app
Maintaining a cohesive user interface
Makes a user-friendly experience
Reduces vagueness

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Adding Material Design dependency in build.gradle.kts (Module g:app)

dependencies {
    ...
    implementation ("com.google.android.material:material:1.12.0")
}

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

activity_main.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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:context=".MainActivity">

    <!-- Main Content -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#2F8C46"
                app:title="GeeksForGeeks"
                app:titleTextColor="@android:color/white" />
        </com.google.android.material.appbar.AppBarLayout>

        <!-- Main Fragment or Content Area -->
        <FrameLayout
            android:id="@+id/layFL"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <!-- Navigation Drawer -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:itemTextColor="@color/black"
        android:fitsSystemWindows="true"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header" />

</androidx.drawerlayout.widget.DrawerLayout>

Step 4: Working with the nav_header.xml file

Navigate to the app > res > layout > nav_header.xml and add the below code to that file. Below is the code for the nav_header.xml file.

nav_header.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:background="#2F8C46"
    android:gravity="bottom"
    android:padding="15dp"
    android:layout_height="180dp">

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginStart="32dp"
        android:src="@drawable/gfg_logo"
        app:tint="@color/white" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GeeksForGeeks"
        android:layout_marginStart="12dp"
        android:textSize="18sp"
        android:textStyle="bold"
        android:textColor="#FFFFFF"/>

</LinearLayout>

Step 5: Working with the nav_menu.xml file

Navigate to the app > res > menu > nav_menu.xml and add the below code to that file. Make sure to add a relatable menu icon in the drawable file. Below is the code for the nav_menu.xml file.

nav_menu.xml:

XML

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

    <item android:title="General">
        <menu>
            <item
                android:id="@+id/row_home"
                android:title="Home"
                android:icon="@android:drawable/ic_menu_mylocation">
            </item>

            <item
                android:title="Favourites"
                android:id="@+id/row_fav"
                android:icon="@android:drawable/ic_menu_mylocation">
            </item>

            <item android:title="Profile"
                android:id="@+id/row_profile"
                android:icon="@android:drawable/ic_menu_mylocation"/>
        </menu>
    </item>

    <item android:title="Communication">
        <menu>
            <item android:title="Settings"
                android:id="@+id/row_settings"
                android:icon="@android:drawable/ic_menu_mylocation"/>

            <item
                android:title="Share"
                android:id="@+id/row_share"
                android:icon="@android:drawable/ic_menu_mylocation">
            </item>

            <item android:title="Bug Fix"
                android:id="@+id/row_bugfix"
                android:icon="@android:drawable/ic_menu_mylocation"/>

            <item
                android:title="Suggestions"
                android:id="@+id/row_suggestions"
                android:icon="@android:drawable/ic_menu_mylocation">
            </item>

        </menu>
    </item>

</menu>

Step 6: Working with the MainActivity file

Go to the MainActivity file and refer to the following code. Below is the code for the MainActivity file. Comments are added inside the code to understand the code in more detail.

MainActivity File:

MainActivity.java

package org.geeksforgeeks.demo;

import android.os.Bundle;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import com.google.android.material.navigation.NavigationView;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    private NavigationView navigationView;
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        drawerLayout = findViewById(R.id.drawerLayout);
        navigationView = findViewById(R.id.navigationView);
        toolbar = findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);

        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this,
                drawerLayout,
                toolbar,
                R.string.open_drawer,
                R.string.close_drawer
        );
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();

        if (savedInstanceState == null) {
            navigationView.setCheckedItem(R.id.row_home);
        }

        setNavigationActions();
    }

    private void setNavigationActions() {
        navigationView.setNavigationItemSelectedListener(item -> {
            switch (item.getItemId()) {
                case R.id.row_home:
                    showToast("Home");
                    break;
                case R.id.row_fav:
                    showToast("Favourites");
                    break;
                case R.id.row_profile:
                    showToast("Profile");
                    break;
                case R.id.row_settings:
                    showToast("Settings");
                    break;
                case R.id.row_share:
                    showToast("Share");
                    break;
                case R.id.row_bugfix:
                    showToast("Bug Fix");
                    break;
                case R.id.row_suggestions:
                    showToast("Suggestions");
                    break;
            }
            drawerLayout.closeDrawer(GravityCompat.START);
            return true;
        });
    }

    private void showToast(String message) {
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }

    @Override
    @Deprecated
    public void onBackPressed() {
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }
}

MainActivity.kt

package org.geeksforgeeks.demo

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar
import androidx.core.view.GravityCompat
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView

class MainActivity : AppCompatActivity() {

    private lateinit var drawerLayout: DrawerLayout
    private lateinit var navigationView: NavigationView
    private lateinit var toolbar: Toolbar

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        drawerLayout = findViewById(R.id.drawerLayout)
        navigationView = findViewById(R.id.navigationView)
        toolbar = findViewById(R.id.toolbar)

        setSupportActionBar(toolbar)

        val toggle = ActionBarDrawerToggle(
            this,
            drawerLayout,
            toolbar,
            R.string.open_drawer,
            R.string.close_drawer
        )
        drawerLayout.addDrawerListener(toggle)
        toggle.syncState()

        if (savedInstanceState == null) {
            navigationView.setCheckedItem(R.id.row_home)
        }

        setNavigationActions()
    }

    private fun setNavigationActions() {
        navigationView.setNavigationItemSelectedListener { item ->
            when (item.itemId) {
                R.id.row_home -> showToast("Home")
                R.id.row_fav -> showToast("Favourites")
                R.id.row_profile -> showToast("Profile")
                R.id.row_settings -> showToast("Settings")
                R.id.row_share -> showToast("Share")
                R.id.row_bugfix -> showToast("Bug Fix")
                R.id.row_suggestions -> showToast("Suggestions")
            }
            drawerLayout.closeDrawer(GravityCompat.START)
            true
        }
    }

    private fun showToast(message: String) {
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
    }

    @Deprecated("Deprecated in Java")
    override fun onBackPressed() {
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START)
        } else {
            super.onBackPressed()
        }
    }
}

Step 7: Working with strings.xml

Navigate app > res > values > strings.xml and add the following values

<resources>
    ...
    <string name="open_drawer">Open navigation drawer</string>
    <string name="close_drawer">Close navigation drawer</string>
</resources>