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 حروف سے زیادہ نہیں)
• ترتیب — مقررہ، سب سے اہم سے کم اہم کی طرف
• کاؤنٹرز — صرف صارف کے نوٹیفیکیشنز کے لیے، مارکیٹنگ کے لیے نہیں