Android में NavigationView और Navigation Drawer लागू करना

Navigation Drawer क्या है?

Navigation Drawer (नेविगेशन ड्रॉअर) एक स्लाइड-इन पैनल है जो ऐप के मुख्य नेविगेशन विकल्पों को प्रदर्शित करता है। यह आमतौर पर स्क्रीन के बाएं किनारे से स्लाइड होता है और DrawerLayout + NavigationView का उपयोग करके बनाया जाता है।

आर्किटेक्चर अवलोकन

Android Studio का "Navigation Drawer Activity" टेम्पलेट निम्नलिखित फाइलें जनरेट करता है:

• activity_main.xml - रूट DrawerLayout जिसमें NavigationView और include होता है
• app_bar_main.xml - CoordinatorLayout + AppBarLayout + Toolbar
• content_main.xml - मुख्य कंटेंट क्षेत्र
• nav_header_main.xml - ड्रॉअर हेडर (प्रोफाइल इमेज, नाम, ईमेल)
• menu/activity_main_drawer.xml - नेविगेशन मेनू आइटम्स

मुख्य लेआउट फाइलें

activity_main.xml (DrawerLayout)

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</androidx.drawerlayout.widget.DrawerLayout>

nav_header_main.xml (हेडर लेआउट)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:contentDescription="@string/nav_header_desc"
        android:src="@drawable/profile_placeholder" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="उपयोगकर्ता नाम"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="#FFF"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="user@example.com"
        android:textColor="#FFF" />

</LinearLayout>

menu/activity_main_drawer.xml (मेनू आइटम्स)

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_home"
            android:title="होम" />
        <item
            android:id="@+id/nav_profile"
            android:icon="@drawable/ic_person"
            android:title="प्रोफाइल" />
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_settings"
            android:title="सेटिंग्स" />
    </group>

    <item android:title="अन्य">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_share"
                android:title="शेयर करें" />
            <item
                android:id="@+id/nav_about"
                android:icon="@drawable/ic_info"
                android:title="हमारे बारे में" />
        </menu>
    </item>
</menu>

MainActivity.java - नेविगेशन हैंडलिंग

import android.os.Bundle;
import android.view.MenuItem;
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 
        implements NavigationView.OnNavigationItemSelectedListener {

    private DrawerLayout drawerLayout;

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        drawerLayout = findViewById(R.id.drawer_layout);
        NavigationView navigationView = findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);

        // हैमबर्गर आइकन एनिमेशन
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawerLayout, toolbar,
            R.string.navigation_drawer_open,
            R.string.navigation_drawer_close
        );
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.nav_home) {
            // होम फ्रैगमेंट/एक्टिविटी लोड करें
        } else if (id == R.id.nav_profile) {
            // प्रोफाइल खोलें
        } else if (id == R.id.nav_settings) {
            // सेटिंग्स खोलें
        } else if (id == R.id.nav_share) {
            // शेयर इंटेंट
        } else if (id == R.id.nav_about) {
            // अबाउट डायलॉग
        }

        // चयन के बाद ड्रॉअर बंद करें
        drawerLayout.closeDrawer(GravityCompat.START);
        return true;
    }

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

दाएं तरफ ड्रॉअर (RTL सपोर्ट)

दाएं तरफ ड्रॉअर के लिए, android:layout_gravity="end" सेट करें और बंद करने के लिए GravityCompat.END का उपयोग करें।

मॉडर्न विकल्प: Navigation Component

नए प्रोजेक्ट्स के लिए, Jetpack Navigation Component का उपयोग करने पर विचार करें जो टाइप-सेफ नेविगेशन, डीप लिंकिंग, और बैक स्टैक मैनेजमेंट प्रदान करता है।