এই টিউটোরিয়ালে আমরা আমাদের অ্যান্ড্রয়েড অ্যাপ্লিকেশনে একটি নেভিগেশন ড্রয়ার প্রয়োগ করব। অ্যান্ড্রয়েড নেভিগেশন ড্রয়ার একটি স্লাইডিং মেনু এবং এটি একটি গুরুত্বপূর্ণ উপাদান। আপনি বেশিরভাগ অ্যান্ড্রয়েড অ্যাপ্লিকেশনগুলিতে নেভিগেশন ড্রয়ার দেখতে পাবেন, এটি ওয়েবসাইটগুলিতে নেভিগেশন মেনু বারের মতো।
বিস্তৃত পরিভাষায়, নেভিগেশন ড্রয়ার হল একটি ওভারলে প্যানেল, যা একটি অ্যাক্টিভিটি স্ক্রীনের প্রতিস্থাপন যা বিশেষভাবে অ্যাপ্লিকেশনের সমস্ত বিকল্প এবং লিঙ্কগুলি দেখানোর জন্য নিবেদিত ছিল।
এই অ্যান্ড্রয়েড নেভিগেশন ড্রয়ার টিউটোরিয়ালে আমরা অ্যান্ড্রয়েড সাপোর্ট লাইব্রেরিতে উপস্থিত ড্রয়ার লেআউট API ব্যবহার করে নেভিগেশন ড্রয়ার বাস্তবায়ন করব। আমরা 3টি খণ্ড দৃশ্য দেখাব যা ড্রয়ার আইটেমগুলি থেকে খোলা যেতে পারে।
আমাকে কয়েকটা স্টেপ ফলো করে অ্যান্ড্রয়েড স্টুডিও তে অ্যাড করতে পারেন দয়া করে স্টেপ গুলো ফলো করুন।
01 Step (Add build.gradle And dependencies ) Library
implementation 'com.google.android.material:material:1.5.0'
02 Step Create Icons ( drawable ) \app\src\main\res\drawable\icon.xml
প্রয়োজনমতো আইকন তৈরী করে ফোল্ডারে জমা রাখুন…
03 Step ( Create a Folder & XML (menu) And \app\src\main\res\menu\drawer_view.xml)
একটা মেনু ফোল্ডার তৈরি করুন এবং ভিউমেনু তৈরী করুন। নিচে দেওয়া কোড গুলো দেখে দেখে টাইপ করুন অথবা কপি পেস্ট করুন।
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_first_fragment" android:icon="@drawable/ic_android_black_24dp" android:title="First" /> <item android:id="@+id/nav_second_fragment" android:icon="@drawable/ic_android_black_24dp" android:title="Second" /> <item android:id="@+id/nav_third_fragment" android:icon="@drawable/ic_android_black_24dp" android:title="Third" /> </group> <item android:title="Sub items"> <menu> <group android:checkableBehavior="single"> <item android:icon="@drawable/ic_android_black_24dp" android:title="Sub item 1" /> <item android:icon="@drawable/ic_android_black_24dp" android:title="Sub item 2" /> </group> </menu> </item></menu>
04 Step Create a Layout (\app\src\main\res\layout\nav_header.xml)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="192dp" android:background="?attr/colorPrimaryDark" android:padding="16dp" android:theme="@style/ThemeOverlay.AppCompat.Dark" android:orientation="vertical" android:gravity="bottom"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingBottom="10dp" android:src="@mipmap/ic_launcher"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/app_name" android:textColor="@android:color/white" android:textAppearance="@style/TextAppearance.AppCompat.Body1"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/email" android:textColor="@android:color/white" android:textAppearance="@style/TextAppearance.AppCompat.Body1"/></LinearLayout>
05 Step Create a Layout (\app\src\main\res\layout\toolbar.xml)
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:fitsSystemWindows="true" android:minHeight="?attr/actionBarSize" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:background="?attr/colorPrimaryDark"></androidx.appcompat.widget.Toolbar>
06 Step Main Activity Layout (\app\src\main\res\layout\activity_main.xml)
<!-- This DrawerLayout has two children at the root --><androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- This LinearLayout represents the contents of the screen --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- The ActionBar displayed at the top --> <include layout="@layout/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" /> <!-- The main content view where fragments are loaded --> <FrameLayout android:id="@+id/flContent" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <!-- Note that `android:layout_gravity` needs to be set to 'start' --> <com.google.android.material.navigation.NavigationView android:id="@+id/nvView" app:headerLayout="@layout/nav_header" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:background="@android:color/white" app:menu="@menu/drawer_view" /></androidx.drawerlayout.widget.DrawerLayout>
07 Step Main Activity (\app\src\main\java\com\app\myapp\MainActivity.java)
Public Class MainActivity
private DrawerLayout mDrawer;private Toolbar toolbar;private NavigationView nvDrawer;
// Find our drawer view nvDrawer = (NavigationView) findViewById(R.id.nvView); // Setup drawer view setupDrawerContent(nvDrawer); // Set a Toolbar to replace the ActionBar. toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); // This will display an Up icon (<-), we will replace it with hamburger later getSupportActionBar().setDisplayHomeAsUpEnabled(true); toolbar.setNavigationIcon(R.drawable.ic_baseline_menu_24); // Find Drawer Layout View mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout); } /// Item Selected Call Start @Override public boolean onOptionsItemSelected(MenuItem item) { // The action bar home/up action should open or close the drawer. switch (item.getItemId()) { case android.R.id.home: mDrawer.openDrawer(GravityCompat.START); return true; } return super.onOptionsItemSelected(item); } /// Item Selected Call End ///// Setup Drawer ContentCall Start private void setupDrawerContent(NavigationView navigationView) { navigationView.setNavigationItemSelectedListener( new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { selectDrawerItem(menuItem); return true; } }); } ///// Setup Drawer Content Call End ///// Select Menu Item Call Start public void selectDrawerItem(MenuItem menuItem) { // Create a new fragment and specify the fragment to show based on nav item clicked Fragment fragment = null; Class fragmentClass; switch(menuItem.getItemId()) { case R.id.nav_first_fragment: fragmentClass = FirstFragment.class; break; case R.id.nav_second_fragment: fragmentClass = BlankFragment.class; break; case R.id.nav_third_fragment: fragmentClass = BlankFragment.class; break; default: fragmentClass = FirstFragment.class; } try { fragment = (Fragment) fragmentClass.newInstance(); } catch (Exception e) { e.printStackTrace(); } // Insert the fragment by replacing any existing fragment FragmentManager fragmentManager = getSupportFragmentManager(); fragmentManager.beginTransaction().replace(R.id.flContent, fragment).commit(); // Highlight the selected item has been done by NavigationView menuItem.setChecked(true); // Set action bar title setTitle(menuItem.getTitle()); // Close the navigation drawer mDrawer.closeDrawers(); } ///// Select Menu Item Call End}