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