📋 Screens, Lists और Navigation · Lesson 26
Bottom Navigation View
Bottom navigation कब use करें
उन 3–5 top-level screens के लिए bottom navigation bar use करें जिनके बीच user बार-बार जाता है। Student Diary में Notes · Subjects · Progress हैं।
Step 1: Menu
Item ids nav_graph.xml की destination ids से मेल खानी चाहिए।
XML – res/menu/bottom_nav_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- item ids = destination ids in nav_graph.xml, so setupWithNavController() can link them -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/notesFragment" android:icon="@drawable/ic_note" android:title="@string/menu_notes" />
<item android:id="@+id/subjectsFragment" android:icon="@drawable/ic_subject" android:title="@string/menu_subjects" />
<item android:id="@+id/statsFragment" android:icon="@drawable/ic_stats" android:title="@string/menu_stats" />
</menu>Step 2: Layout
XML
<!-- activity_main.xml (Student Diary, part) -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/bottom_nav_menu" />
</LinearLayout>Step 3: NavController से जोड़ें
Kotlin
// MainActivity.onCreate (Student Diary)
val navHost = supportFragmentManager.findFragmentById(R.id.nav_host) as NavHostFragment
navController = navHost.navController
binding.bottomNav.setupWithNavController(navController) // tap item → navigate to same id
// top-level destinations: no ← arrow on these
appBarConfiguration = AppBarConfiguration(
setOf(R.id.notesFragment, R.id.subjectsFragment, R.id.statsFragment /* … */),
binding.drawerLayout
)
setupActionBarWithNavController(navController, appBarConfiguration)Detail screens पर छिपाएँ
Kotlin
val bottomScreens = setOf(R.id.notesFragment, R.id.subjectsFragment, R.id.statsFragment)
navController.addOnDestinationChangedListener { _, destination, _ ->
binding.bottomNav.isVisible = destination.id in bottomScreens
if (destination.id == R.id.notesFragment) binding.fab.show() else binding.fab.hide()
}Badges
Kotlin
// show "3" on the Notes tab (e.g. pending notes)
viewModel.countAll.observe(this) { total ->
val badge = binding.bottomNav.getOrCreateBadge(R.id.notesFragment)
badge.isVisible = total > 0
badge.number = total
}
// remove it
binding.bottomNav.removeBadge(R.id.notesFragment)Reselect और manual handling
Kotlin
// Tapping the current tab again → scroll the list to the top
binding.bottomNav.setOnItemReselectedListener { item ->
if (item.itemId == R.id.notesFragment) scrollNotesToTop()
}
// Without the Navigation Component (manual fragments)
binding.bottomNav.setOnItemSelectedListener { item ->
val fragment = when (item.itemId) {
R.id.notesFragment -> NotesFragment()
R.id.subjectsFragment -> SubjectsFragment()
else -> StatsFragment()
}
supportFragmentManager.commit { replace(R.id.container, fragment) }
true
}आम गलतियाँ
- Menu ids graph ids से अलग → tap पर कुछ नहीं होता।
- 5 से ज़्यादा items → labels छिप जाते हैं और भीड़ लगती है।
setupWithNavControllerके बादsetOnItemSelectedListenercall करना → navigation listener बदल जाता है; destination listener use करें।
सारांश
- 3–5 items वाला menu जिनकी ids destination ids जैसी हों।
bottomNav.setupWithNavController(navController)+ top-level screens के लिए AppBarConfiguration।- Destination-changed listener से छिपाएँ;
getOrCreateBadgeसे badges।
✅ Practice
Navigation Component के साथ 4-tab app (Home, Search, Saved, Profile) बनाइए। Saved items की संख्या का badge दिखाइए और details screen पर bar छिपाइए।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
Bottom navigation में कितने items हो सकते हैं?
तीन से पाँच। ज़्यादा destinations के लिए navigation drawer या tabs use करें।
क्या हर tab अपना back stack रखता है?
हाँ। Navigation 2.4 से setupWithNavController हर bottom navigation item का back stack अपने आप save और restore करता है।
BottomNavigationView या NavigationBarView?
BottomNavigationView, NavigationBarView को extend करता है। XML में BottomNavigationView use करें; setupWithNavController जैसे extension functions दोनों accept करते हैं।
