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.
Functioning of Navigation Drawer
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.
Components of Navigation Drawer
- 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>
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>
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();
}
}
}
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>
Output:
Similar Reads
How to Check Navigation Drawer Menu Items in Android?
Navigation Drawer or Slider Drawer is a UI component that is used in Mobile Applications and Websites to provide easy access to different features or parts of an app or website. Functioning of Navigation Drawer It is generally accessed by tapping on the hamburger menu icon (3 horizontal lines), pres
4 min read
How to Add Icons in Navigation Drawer in Android?
Android navigation drawer is a user interface that shows the app's main navigation menu. It appears when the user touches the drawer icon in the app bar or when the user swipes their fingers or does some kind of action on the screen. It is not visible by default and it needs to open either by slidin
2 min read
How to Change the Text Font of Side Navigation Drawer Items in Android?
The navigation drawer is the most common feature offered by android and the navigation drawer is a UI panel that shows your app’s main navigation menu. It is also one of the important UI elements, which provides actions preferable to the users like example changing user profile, changing settings of
2 min read
How to Hide NavigationBar in Android?
NavigationBar in Android is a row comprising the back button, home button, and Recent button located at the bottom of the application. Most Android 5.0 Lollipop and above devices have no physical navigation buttons and hence come as buttons present on the screen throughout the screen life. However,
2 min read
Navigation Drawer in Android
The navigation drawer is the most common feature offered by Android and the navigation drawer is a UI panel that shows your app's main navigation menu. It is also one of the important UI elements, which provides actions preferable to the users, for example changing the user profile, changing the set
5 min read
How to Create Google Glass Options Menu in Android?
Google Glass is a wearable device developed by Google that allows users to perform various tasks such as taking photos, recording videos, and sending messages. In this article, we will show you how to create a Google Glass options menu in Android. Step By Step Implementation Step 1: To create a new
2 min read
How to Create Swipe Navigation in Android?
When talking about Android Apps, the first thing that comes to mind is variety. There are so many varieties of Android apps providing the user with a beautiful dynamic UI. One such feature is to navigate our Android Apps using left and right swipes as opposed to clicking on buttons. Not only does it
6 min read
Navigation Drawer in Java Android
A Navigation Drawer is the UI panel that can show the app's main navigation menu. When the user swipes from the left edge of the screen or touches the app icon in the action bar and the drawer appears. It can provide a simple way to navigate between the different sections of the application. This ar
5 min read
How to Apply onClickListener on Menu Item in Android?
In the context of Android development, a "menu item" refers to an individual item in a menu. A menu is a visual element in an Android app that provides a set of options to the user, allowing them to perform various actions or navigate to different parts of the app. A menu item is typically represent
5 min read
How to Create Option Menu in Android using Kotlin?
In this article, we will learn how to create an options menu in the Android app using Kotlin. To have an options menu in an Activity, we need to create a new menu XML file and inflate it using menuInflator.inflate( ) method. In menu.xml we will design the options menu as the requirement of the app.
2 min read