Android-এ NavigationView ব্যবহার করে নেভিগেশন ড্রয়ার তৈরির পদ্ধতি

Android-এ NavigationView ব্যবহার করে নেভিগেশন ড্রয়ার তৈরির পদ্ধতি

NavigationView (Material Design Komponente) হলো সাইড নেভিগেশন ড্রয়ার (Hamburger Menu) বাস্তবায়নের জন্য стандарт উপাদান। এটি DrawerLayout-এর সাথে কাজ করে এবং মেনু আইটেম, হেডার, এবং নেভিগেশন হ্যান্ডলিং সরল করে।

প্রয়োজনীয় ধাপসমূহ

ধাপ ১: নতুন প্রজেক্ট তৈরি করুন

Android Studio-তে File → New Project → Navigation Drawer Activity টেমপ্লেট বেছে নিন (এটি অটোমেটিক্যালি সব সেটআপ করে দেয়)। অথবা Empty Activity থেকে ম্যানুয়ালি তৈরি করুন।

ধাপ ২: ডিপেন্ডেন্সি নিশ্চিত করুন

dependencies {
    implementation 'com.google.android.material:material:1.11.0'
    implementation 'androidx.navigation:navigation-fragment:2.7.6'
    implementation 'androidx.navigation:navigation-ui:2.7.6'
}

ধাপ ৩: মেইন লেআউট (res/layout/activity_main.xml)

<?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" />

    <!-- নেভিগেশন ড্রয়ার (NavigationView) -->>
    <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>

ধাপ ৪: অ্যাপ বার লেআউট (res/layout/app_bar_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    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"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light" />

    </com.google.android.material.appbar.AppBarLayout>

    <!-- ফ্র্যাগমেন্ট কন্টেইনার (NavHostFragment) -->>
    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/mobile_navigation"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

ধাপ ৫: নেভিগেশন হেডার (res/layout/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="192dp"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.MaterialComponents.Dark">

    <ImageView
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:src="@mipmap/ic_launcher_round"
        android:contentDescription="প্রোফাইল ছবি" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="ব্যবহারকারীর নাম"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="user@example.com" />

</LinearLayout>

ধাপ ৬: নেভিগেশন মেনু (res/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_gallery"
            android:icon="@drawable/ic_gallery"
            android:title="গ্যালারি" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_slideshow"
            android:title="স্লাইডশো" />
        <item
            android:id="@+id/nav_tools"
            android:icon="@drawable/ic_tools"
            android:title="টুলস" />
        <item
            android:id="@+id/nav_share"
            android:icon="@drawable/ic_share"
            android:title="শেয়ার" />
        <item
            android:id="@+id/nav_send"
            android:icon="@drawable/ic_send"
            android:title="পাঠান" />
    </group>

    <item android:title="সেটিংস">
        <menu>
            <item
                android:id="@+id/nav_settings"
                android:icon="@drawable/ic_settings"
                android:title="সেটিংস" />
        </menu>
    </item>
</menu>

ধাপ ৭: নেভিগেশন গ্রাফ (res/navigation/mobile_navigation.xml)

<?xml version="1.0" encoding="utf-8"?>
<navigation 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/mobile_navigation"
    app:startDestination="@+id/nav_home">

    <fragment
        android:id="@+id/nav_home"
        android:name="app.com.sample.ui.home.HomeFragment"
        android:label="হোম"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/nav_gallery"
        android:name="app.com.sample.ui.gallery.GalleryFragment"
        android:label="গ্যালারি"
        tools:layout="@layout/fragment_gallery" />

    <fragment
        android:id="@+id/nav_slideshow"
        android:name="app.com.sample.ui.slideshow.SlideshowFragment"
        android:label="স্লাইডশো"
        tools:layout="@layout/fragment_slideshow" />

    <fragment
        android:id="@+id/nav_tools"
        android:name="app.com.sample.ui.tools.ToolsFragment"
        android:label="টুলস"
        tools:layout="@layout/fragment_tools" />

    <fragment
        android:id="@+id/nav_share"
        android:name="app.com.sample.ui.share.ShareFragment"
        android:label="শেয়ার"
        tools:layout="@layout/fragment_share" />

    <fragment
        android:id="@+id/nav_send"
        android:name="app.com.sample.ui.send.SendFragment"
        android:label="পাঠান"
        tools:layout="@layout/fragment_send" />

</navigation>

ধাপ ৮: হোম ফ্র্যাগমেন্ট উদাহরণ (res/layout/fragment_home.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_home"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="হোম ফ্র্যাগমেন্টে স্বাগতম!"
        android:textAlignment="center"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

ধাপ ৯: HomeFragment.java

package app.com.sample.ui.home;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;

public class HomeFragment extends Fragment {

    private HomeViewModel homeViewModel;

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        homeViewModel = new ViewModelProvider(this).get(HomeViewModel.class);
        View root = inflater.inflate(R.layout.fragment_home, container, false);
        final TextView textView = root.findViewById(R.id.text_home);

        homeViewModel.getText().observe(getViewLifecycleOwner(), textView::setText);
        return root;
    }
}

ধাপ ১০: HomeViewModel.java

package app.com.sample.ui.home;

import androidx.lifecycle.LiveData;
import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.ViewModel;

public class HomeViewModel extends ViewModel {

    private final MutableLiveData<String> text = new MutableLiveData<>();

    public HomeViewModel() {
        text.setValue("হোম ফ্র্যাগমেন্ট থেকে স্বাগতম! নেভিগেশন ড্রয়ার থেকে অন্য পেজ দেখুন।");
    }

    public LiveData<String> getText() {
        return text;
    }
}

ধাপ ১১: MainActivity.java (NavigationUI সেটআপ)

package app.com.sample;

import android.os.Bundle;
import android.view.MenuItem;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.navigation.NavigationView;
import com.google.android.material.snackbar.Snackbar;

public class MainActivity extends AppCompatActivity {

    private AppBarConfiguration mAppBarConfiguration;
    private DrawerLayout drawer;
    private NavigationView navigationView;

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

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

        drawer = findViewById(R.id.drawer_layout);
        navigationView = findViewById(R.id.nav_view);

        // NavController পান
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);

        // AppBarConfiguration: কোন ডেস্টিনেশনগুলো "টপ-লেভেল" (হোম্বার্টন দেখাবে)
        mAppBarConfiguration = new AppBarConfiguration.Builder(
                R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow,
                R.id.nav_tools, R.id.nav_share, R.id.nav_send)
                .setOpenableLayout(drawer)
                .build();

        // Toolbar-এ NavigationUI সেটআপ (হ্যামবার্গার আইকন, টাইটেল আপডেট)
        NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);

        // NavigationView-এ NavigationUI সেটআপ (মেনু আইটেম ক্লিক হ্যান্ডলিং)
        NavigationUI.setupWithNavController(navigationView, navController);

        // FAB ক্লিক
        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(view -> Snackbar.make(view, "আপনার অ্যাকশন এখানে যোগ করুন", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show());
    }

    @Override
    public boolean onSupportNavigateUp() {
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        return NavigationUI.navigateUp(navController, mAppBarConfiguration) || super.onSupportNavigateUp();
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        // NavigationUI অটোমেটিক্যালি হ্যান্ডেল করে, কিন্তু কাস্টম লজিকের জন্য ওভাররাইড করা যায়
        return NavigationUI.onNavDestinationSelected(item, Navigation.findNavController(this, R.id.nav_host_fragment))
                || super.onOptionsItemSelected(item);
    }
}

ধাপ ১২: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MaterialComponents.DayNight.NoActionBar">

        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.MaterialComponents.DayNight.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

থিম এবং স্টাইল (res/values/themes.xml)

<resources>
    <!-- Base theme -->
    <style name="Theme.MaterialComponents.DayNight.NoActionBar" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
    </style>

    <!-- Toolbar theme -->
    <style name="ThemeOverlay.MaterialComponents.Dark.ActionBar" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" />
    <style name="ThemeOverlay.MaterialComponents.Light" parent="ThemeOverlay.MaterialComponents.Light" />
</resources>

NavigationView কাস্টমাইজেশন

১. মেনু আইটেমের আইকন রঙ পরিবর্তন

// Java-এ
navigationView.setItemIconTintList(ColorStateList.valueOf(ContextCompat.getColor(this, R.color.custom_color)));

// XML-এ (app:itemIconTint="@color/custom_color")

২. মেনু আইটেমের টেক্সট রঙ/স্টাইল

// XML-এ
app:itemTextColor="@color/selector_text_color"
app:itemTextAppearance="@style/NavigationItemTextStyle"
app:itemBackground="@drawable/nav_item_background"

৩. হেডার ভিউতে ডাইনামিক ডেটা সেট

View headerView = navigationView.getHeaderView(0);
TextView nameTv = headerView.findViewById(R.id.nav_header_name);
TextView emailTv = headerView.findViewById(R.id.nav_header_email);
nameTv.setText(userName);
emailTv.setText(userEmail);

অ্যাপ্লিকেশন চালানোর পদ্ধতি

আপনার Android ডিভাইস কম্পিউটারের সাথে সংযুক্ত করুন। Android Studio-তে Run আইকনে ক্লিক করুন। অ্যাপ খুললে টুলবারের হ্যামবার্গার আইকনে ক্লিক করলে বা স্ক্রিনের বাম প্রান্ত থেকে ডান দিকে স্বাইপ করলে নেভিগেশন ড্রয়ার খুলবে।