How to Grouping Navigation Drawer Menu Items in Android?

0 0 3 minutes read

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.

Need of Grouping Menu Items

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. Note that select Java as the programming language.

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

implementation 'com.google.android.material:material:1.8.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.

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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layDL"
    android:fitsSystemWindows="true"
    tools:openDrawer="start"
    tools:context=".MainActivity">
  
    <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:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#2F8C46"
                app:title="GeeksForGeeks"
                app:titleTextColor="@color/white"
                android:id="@+id/toolbar" />
  
        </com.google.android.material.appbar.AppBarLayout>
  
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/layFL" />
  
    </LinearLayout>
  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Grouping Navigation Drawer Items"
        android:textColor="#2F8C46"
        android:textStyle="bold|italic"
        android:textSize="20sp" />
  
    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/vNV"
        app:menu="@menu/nav_item2"
        app:headerLayout="@layout/nav_header"
        android:layout_gravity="start"
        android:fitsSystemWindows="true" />
  
</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.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    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_marginLeft="32dp"
        android:src="@drawable/gfg_logo" />
  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GeeksForGeeks"
        android:layout_marginLeft="12dp"
        android:textSize="18sp"
        android:textStyle="bold"
        android:textColor="#FFFFFF"/>
  
</LinearLayout>

Step 5: Working with the nav_menu2.xml file

Navigate to the app > res > menu > nav_menu2.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_menu2.xml file.

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="@drawable/home">
        </item>
  
        <item
            android:title="Favourites"
            android:id="@+id/row_fav"
            android:icon="@drawable/fav">
        </item>
  
        <item android:title="Profile"
            android:id="@+id/row_profile"
            android:icon="@drawable/profile"/>
    </menu>
    </item>
  
    <item android:title="Communication">
        <menu>
            <item android:title="Settings"
                android:id="@+id/row_settings"
                android:icon="@drawable/settings"/>
  
            <item
                android:title="Share"
                android:id="@+id/row_share"
                android:icon="@drawable/share">
            </item>
  
            <item android:title="Bug Fix"
                android:id="@+id/row_bugfix"
                android:icon="@drawable/bugfix"/>
  
            <item
                android:title="Suggestions"
                android:id="@+id/row_suggestions"
                android:icon="@drawable/suggestions">
            </item>
  
        </menu>
    </item>
  
</menu>

Step 6: Working with the MainActivity.java file

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

Java

package com.anas.gfggroupingnavitems;
  
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 androidx.fragment.app.Fragment;
  
import android.os.Bundle;
import android.widget.Toast;
  
import com.google.android.material.navigation.NavigationView;
  
public class MainActivity extends AppCompatActivity {
  
    DrawerLayout layDL;
    NavigationView vNV;
    Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        layDL = findViewById(R.id.layDL);
        vNV = findViewById(R.id.vNV);
        toolbar = findViewById(R.id.toolbar);
  
        setSupportActionBar(toolbar);
  
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, layDL, toolbar, R.string.open_drawer, R.string.close_drawer);
  
        layDL.addDrawerListener(toggle);
        toggle.syncState();
  
        if (savedInstanceState == null) {
            vNV.setCheckedItem(R.id.row_home);
        }
        NavClick();
    }
  
    private void NavClick() {
        vNV.setNavigationItemSelectedListener(item -> {
            Fragment frag = null;
            switch (item.getItemId()) {
  
                case R.id.row_home:
                    Toast.makeText(this, "Home", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.row_profile:
                    Toast.makeText(this, "Profile", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.row_fav:
                    Toast.makeText(this, "Favourites", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.row_settings:
                    Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.row_share:
                    Toast.makeText(this, "Share", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.row_bugfix:
                    Toast.makeText(this, "Bug fix", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.row_suggestions:
                    Toast.makeText(this, "Suggestions", Toast.LENGTH_SHORT).show();
                    break;
            }
            layDL.closeDrawer(GravityCompat.START);
            return true;
        });
    }
  
    @Override
    public void onBackPressed() {
        Fragment currFrag = getSupportFragmentManager().findFragmentById(R.id.layFL);
        if (layDL.isDrawerOpen(GravityCompat.START)){
            layDL.closeDrawer(GravityCompat.START);
        }
        else {
            super.onBackPressed();
        }
    }
}