Bottom Navigation: মৌলিক বিষয়, BottomNavigationView এবং TabView

Bottom Navigation কী?

Bottom Navigation একটি নেভিগেশন প্যাটার্ন যেখানে প্রধান অ্যাপ সেকশনগুলি স্ক্রিনের নিচের অংশে একটি প্যানেলের মাধ্যমে অ্যাক্সেসযোগ্য। এই প্যাটার্নটি এক-হাতে ব্যবহারযোগ্যতার কারণে মোবাইল ডিজাইনের মানদণ্ডে পরিণত হয়েছে। সাইড মেনুর (Drawer) বিপরীতে, Bottom Navigation সর্বদা দৃশ্যমান এবং এটি খুলতে অতিরিক্ত অঙ্গভঙ্গির প্রয়োজন হয় না।

Material Design 3 (2026) Navigation Bar-কে তিনটি অবস্থা বিশিষ্ট একটি উপাদান হিসাবে সংজ্ঞায়িত করে: default (আইকন + লেবেল), labeled (বর্ধিত লেবেল, একটি সক্রিয় ট্যাব), এবং unlabeled (শুধু আইকন)। Google 3–5টি সমান সেকশন বিশিষ্ট অ্যাপের জন্য Navigation Bar সুপারিশ করে। 6+ সেকশনের জন্য — Navigation Drawer। iOS SwiftUI-তে, TabView স্বয়ংক্রিয়ভাবে সিস্টেম শৈলী সহ একটি নিচের প্যানেল ব্যবহার করে।

UX Movement (2025) এর একটি গবেষণায় দেখা গেছে যে Bottom Navigation সাইড ড্রয়ারের তুলনায় কাজ সম্পন্ন করার সময় 27% উন্নতি করে, কারণ ব্যবহারকারী অতিরিক্ত কোনো পদক্ষেপ ছাড়াই সমস্ত উপলব্ধ সেকশন দেখতে পায়। বড় টাচ টার্গেটের (Android-এ ন্যূনতম 48x48 dp, iOS-এ 44x44 pt) কারণে ভুল ট্যাপের সংখ্যা 34% কমে যায়।

Android-এ BottomNavigationView (Material 3)

Android-এ BottomNavigationView Material 3 লাইব্রেরির (com.google.android.material.navigation.NavigationBarView) একটি উপাদান। এটি Material 2-এর পুরনো BottomNavigationView-কে প্রতিস্থাপন করেছে এবং Material You ডায়নামিক রঙ, অ্যানিমেটেড সক্রিয় ট্যাব ইন্ডিকেটর এবং অন্তর্নির্মিত ব্যাজের জন্য সমর্থন যোগ করেছে। উপাদানটি XML মেনুর মাধ্যমে কনফিগার করা হয় এবং Navigation Component-এর সাথে সম্পূর্ণ সামঞ্জস্যপূর্ণ।

// BottomNavigationView এবং NavHostFragment সহ অ্যাক্টিভিটি
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navView = findViewById<NavigationBarView>(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        // স্বয়ংক্রিয় নেভিগেশন সিঙ্ক্রোনাইজেশন
        navView.setupWithNavController(navController)

        // ব্যাজ সেটআপ
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// Bottom Navigation-এর জন্য XML মেনু (res/menu/bottom_nav_menu.xml)
// <?xml version="1.0" encoding="utf-8"?>
// <menu xmlns:android="http://schemas.android.com/apk/res/android">
//   <item android:id="@+id/navigation_home"
//     android:icon="@drawable/ic_home"
//     android:title="হোম" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="চ্যাট" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="প্রোফাইল" />
// </menu>

Material 3 NavigationBarView তিনটি labelVisibilityMode মোড সমর্থন করে: LABEL_VISIBILITY_AUTO (ডিফল্ট — সক্রিয় ট্যাবের জন্য লেবেল দেখানো হয়), LABEL_VISIBILITY_LABELED (সবার জন্য লেবেল), LABEL_VISIBILITY_UNLABELED (শুধু আইকন)। অ্যানিমেটেড সক্রিয় ট্যাব ইন্ডিকেটর কাস্টম রিপল ইফেক্ট সহ itemActiveIndicatorStyle-এর মাধ্যমে কনফিগার করা হয়।

iOS-এর জন্য SwiftUI-তে TabView

TabView নিচের নেভিগেশন তৈরির জন্য SwiftUI-এর অন্তর্নির্মিত কন্টেইনার। প্রতিটি ট্যাব একটি আইকন এবং টেক্সট সহ .tabItem মডিফায়ার ব্যবহার করে সংজ্ঞায়িত করা হয়। TabView স্বয়ংক্রিয়ভাবে পটভূমিতে UITabBarController তৈরি করে এবং সমস্ত স্থানীয় প্যানেল বৈশিষ্ট্য সমর্থন করে: ব্যাজ, ব্যাজ রঙ, পরিবর্তনের অ্যানিমেশন এবং Dynamic Type অভিযোজন।

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("হোম", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("অনুসন্ধান", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("বিজ্ঞপ্তি", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("প্রোফাইল", systemImage: "person.circle.fill")
                }
        }
    }
}

TabView .badge মডিফায়ার (iOS 15+) সমর্থন করে, যা Int (সংখ্যাসূচক ব্যাজ) বা String (টেক্সট ব্যাজ) গ্রহণ করে। ব্যাজের রঙ .badgeProminence(.increased) এর মাধ্যমে পরিবর্তন করা যায় — ব্যাজকে উজ্জ্বল করে। ট্যাব পরিবর্তনের অ্যানিমেশন .tabViewStyle(.automatic) বা কাস্টম শৈলীর মাধ্যমে কনফিগার করা হয়। প্রোগ্রামেটিক পরিবর্তন নিয়ন্ত্রণের জন্য, selection সহ @State ব্যবহার করা হয়।

নিচের এবং স্ট্যাক নেভিগেশনের সংমিশ্রণ

Bottom Navigation খুব কমই একা ব্যবহার করা হয় — প্রতিটি ট্যাবে সাধারণত একটি স্ট্যাক নেভিগেটর (SwiftUI-তে NavigationView/NavigationStack, Android-এ NavHostFragment) থাকে। এই সংমিশ্রণ ব্যবহারকারীকে সেকশনে দ্রুত অ্যাক্সেস (Tab) এবং প্রতিটি সেকশনের ভিতরে গভীর নেভিগেশন (Stack) উভয়ই প্রদান করে। এটি প্রোডাকশন অ্যাপের জন্য মানক আর্কিটেকচার।

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("হোম", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("অনুসন্ধান", systemImage: "magnifyingglass")
            }
        }
    }
}

// HomeView-এর ভিতরে — স্ট্যাক নেভিগেশন
struct HomeView: View {
    var body: some View {
        List(items) { item in
            NavigationLink("\(item.title)", value: item)
        }
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

Android-এ, একই সংমিশ্রণ প্রতিটি ট্যাবের জন্য NavHostFragment-এর মাধ্যমে বাস্তবায়িত হয়। Navigation Component প্রতিটি ট্যাবের জন্য ব্যাক স্ট্যাক তৈরি স্বয়ংক্রিয় করে: ট্যাব পরিবর্তন করার সময়, স্ট্যাকের অবস্থা সংরক্ষিত থাকে, এবং ফিরে আসার সময় — পুনরুদ্ধার করা হয়। এটি Google সিস্টেম অ্যাপ (Play Market, YouTube) এর মতো একটি নিরবচ্ছিন্ন UX প্রদান করে।

Material 3: ডায়নামিক রঙ এবং অ্যানিমেশন

Material 3 (Material You) Bottom Navigation-এ একটি মূল পরিবর্তন নিয়ে আসে — ব্যবহারকারীর ওয়ালপেপার থেকে উৎপন্ন ডায়নামিক রঙ। সিস্টেম ওয়ালপেপার থেকে প্রভাবশালী রঙ বের করে এবং 5টি মূল টোনের একটি প্যালেট তৈরি করে। NavigationBarView স্বয়ংক্রিয়ভাবে এই রঙগুলি প্রয়োগ করে: সক্রিয় ট্যাব প্রাথমিক রঙ পায়, নিষ্ক্রিয় ট্যাব — onSurface ভ্যারিয়েন্ট।

সক্রিয় ট্যাব ইন্ডিকেটর অ্যানিমেশন মসৃণ হয়েছে: পরিবর্তন করার সময়, ইন্ডিকেটর ইন্টারপোলেশন সহ নতুন ট্যাবের দিকে অ্যানিমেট হয়। স্পর্শে রিপল ইফেক্ট গৌণ রঙ ব্যবহার করে। Material 3-এ Bottom Navigation itemActiveIndicatorStyle-এর মাধ্যমে কাস্টম অ্যানিমেশনও সমর্থন করে — ডেভেলপার আকার (ডিম্বাকৃতি, আয়তক্ষেত্র), মার্জিন এবং ইন্ডিকেটর রঙ সেট করতে পারে।

<!-- NavigationBarView-এর সক্রিয় ইন্ডিকেটর শৈলী -->
<style name="Widget.MyApp.NavigationBarView.ActiveIndicator"
    parent="Widget.Material3.NavigationBarView.ActiveIndicator">
    <item name="android:height">32dp</item>
    <item name="android:width">64dp</item>
    <item name="android:marginHorizontal">8dp</item>
    <item name="shapeAppearance">
        @style/ShapeAppearance.Material3.Corner.Full
    </item>
    <item name="color">@color/primary_container</item>
</style>

Bottom Navigation-এর জন্য UX সুপারিশ

Bottom Navigation ডিজাইন করার সময়, ব্যবহারযোগ্যতা গবেষণা বিবেচনা করা উচিত। NN Group (2026): নিচের প্যানেলটি কমপক্ষে 56 dp উচ্চ হওয়া উচিত, টাচ টার্গেট — কমপক্ষে 48 dp। লেবেল টেক্সট — সর্বোচ্চ 12 অক্ষর (ল্যাটিন) বা 8 অক্ষর (সিরিলিক)। সক্রিয় ট্যাব কেবল রঙেই নয়, আইকনের অবস্থাতেও (ভরা বনাম রূপরেখা) আলাদা হওয়া উচিত।

Material Design 3 নিম্নলিখিত প্যাটার্নগুলি সুপারিশ করে: 4টি ট্যাব — সহজ স্ক্যানিংয়ের জন্য সর্বোত্তম; কেন্দ্রে "+" আইকন (FloatingActionButton) — প্রধান কর্মের জন্য; ব্যাজ — শুধুমাত্র ব্যবহারকারীর কর্ম কাউন্টারের জন্য। এড়িয়ে চলুন: 2টি ট্যাবের সাথে Bottom Navigation ব্যবহার করা (পরিবর্তে Tab Layout ব্যবহার করুন), ট্যাবের ক্রম গতিশীলভাবে পরিবর্তন করা, নেস্টেড স্ক্রিনে প্যানেল লুকানো।

• উচ্চতা — আরামদায়ক থাম্ব নাগালের জন্য ন্যূনতম 56 dp
• কন্ট্রাস্ট — সক্রিয় ট্যাব শনাক্তযোগ্য হওয়া উচিত (রঙ + আইকন ভরাট)
• লেবেল — ছোট, 1-2 শব্দ, ছাঁটাই ছাড়া (12 অক্ষরের বেশি নয়)
• ক্রম — নির্দিষ্ট, সবচেয়ে গুরুত্বপূর্ণ থেকে কম গুরুত্বপূর্ণ
• কাউন্টার — শুধুমাত্র ব্যবহারকারীর বিজ্ঞপ্তির জন্য, মার্কেটিংয়ের জন্য নয়