Implementing Navigation Drawers with NavigationView

Integration Steps

Dependency Inclusion

Include the Material Design library in your app-level build.gradle:

implementation 'com.android.support:design:23.1.1'

Layout Configuration

Configure DrawerLayout with NavigationView in your XML layout:

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- Main content layout -->
    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/drawer_items" />
</android.support.v4.widget.DrawerLayout>

Ensure android:layout_gravity="start" is set for the NavigationView.

Header and Menu Components

Header Layout (navigation_header.xml):

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/header_background"
        android:scaleType="centerCrop"/>

    <ImageView
        android:id="@+id/profile_image"
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:layout_gravity="bottom"
        android:layout_marginBottom="36dp"
        android:padding="8dp"
        android:src="@drawable/profile_icon"/>

    <TextView
        android:id="@+id/username_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:padding="16dp"
        android:text="@string/default_username"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
</FrameLayout>

Menu Configuration (drawer_items.xml):

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/menu_import"
            android:icon="@drawable/ic_import"
            android:title="Import"/>
        <item
            android:id="@+id/menu_gallery"
            android:icon="@drawable/ic_gallery"
            android:title="Gallery"/>
        <!-- Additional menu items -->
    </group>

    <item android:title="Communication">
        <menu>
            <item
                android:id="@+id/menu_share"
                android:icon="@drawable/ic_share"
                android:title="Share"/>
            <!-- Submenu items -->
        </menu>
    </item>
</menu>

Menu Item Selection Handling

Implement click listeners for menu items:

NavigationView navView = findViewById(R.id.nav_view);
navView.setNavigationItemSelectedListener(item -> {
    int itemId = item.getItemId();
    if (itemId == R.id.menu_import) {
        // Handle import action
    } else if (itemId == R.id.menu_gallery) {
        // Handle gallery action
    }
    // Close drawer after selection
    DrawerLayout drawer = findViewById(R.id.drawer_container);
    drawer.closeDrawer(GravityCompat.START);
    return true;
});

Implementation Details

Accessing Header Components

Retrieve header elements programmatically:

View header = navView.getHeaderView(0);
ImageView profileImage = header.findViewById(R.id.profile_image);
TextView usernameText = header.findViewById(R.id.username_text);

Preserving Menu Icon Colors

To display original icon colors instead of applying a tint:

navView.setItemIconTintList(null);

Adding Visual Separators

Use distinct <group> elements in your menu XML to create secsions:

<group android:id="@+id/primary_section">
    <!-- First group items -->
</group>
<group android:id="@+id/secondary_section">
    <!-- Second group items -->
</group>

Dynamic Menu Item Visibility

Show or hide menu items conditionally:

MenuItem targetItem = navView.getMenu().findItem(R.id.menu_share);
targetItem.setVisible(isAdminUser); // Toggle based on condition

Tags: Android Material Design Navigation Drawer UI Components

Posted on Wed, 05 Aug 2026 17:01:25 +0000 by Hybride