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 वर्णों से अधिक नहीं)
• क्रम — निश्चित, सबसे महत्वपूर्ण से कम महत्वपूर्ण की ओर
• काउंटर — केवल उपयोगकर्ता सूचनाओं के लिए, मार्केटिंग के लिए नहीं