Free tutorials & notes in Hindi & English · Clean code examples 🧰 मुफ़्त PDF और फ़ोटो टूल्स →
📋 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 हैं।

9:41▮▮ 85%☰Student Diary⋮AllPendingDoneMaths homeworkHigh · Due 24 NovPhysics revisionMedium+📝Notes📚Subjects📊Progress9:41▮▮ 85%☰Subjects⋮🛍️Maths5 notes🛍️Physics3 notes🛍️English4 notes🛍️Hindi1 note📝Notes📚Subjects📊Progress
हर item एक top-level screen खोलता है

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>
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)
"Subjects" tapitem id subjectsFragmentNavigationUInavigate(subjectsFragment)NavHostSubjectsFragment दिखाताBottom baritem checked
setupWithNavController यह सब करता है

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 के बाद setOnItemSelectedListener call करना → 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 करते हैं।
← Android Tutorial (Kotlin)
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

अगला topicNavigation Drawer (Side Menu) आपकी प्रगति: 26 / 43 (60%) · Lesson 27 / 43 आगे बढ़ें →

यह lesson कैसा लगा?

आपकी राय से हम content और बेहतर बनाते हैं।

अपना review और सुझाव लिखें (वैकल्पिक)

Review approve होने के बाद आपका नाम और शहर इसके साथ public दिख सकते हैं। Email या phone न लिखें।

▶ CodingEasily on YouTube

Video से सीखें – आसान Hindi में

चुनी हुई video: RDBMS भाग 3 – Class XI Commerce IT

▶ Channel subscribe करें