Android Academy · Lektion

Untere Navigation und Tabs

Implementieren Sie die Navigation zwischen mehreren Bereichen mit BottomNavigationView, verbunden mit NavController, sowie wischbare Tabs mit TabLayout, ViewPager2 und TabLayoutMediator.

Untere Navigation und Tabs ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 5 von 5. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 5 Lektionen.

Navigationsmuster

Zwei gängige Muster für die Navigation auf oberster Ebene in Android-Apps:

Bottom Navigation — für 3–5 wichtige Ziele. Immer sichtbar. Am besten für Bereiche mit gleicher Bedeutung geeignet (z. B. Startseite, Suche, Profil).
Tabs — für zusammengehörige Inhalte innerhalb eines Bildschirms (z. B. Alle / Aktiv / Erledigt). Häufig zusammen mit ViewPager2 verwendet, um Wischen zu unterstützen.

Layout von BottomNavigationView

Fügen Sie BottomNavigationView und eine FragmentContainerView zum Layout Ihrer Activity hinzu:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/navHostFragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:navGraph="@navigation/nav_graph"
        app:defaultNavHost="true" />

    <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>

Menüpunkte der Bottom Navigation

Definieren Sie die Elemente in res/menu/bottom_nav_menu.xml. Die ID jedes Elements muss mit der Ziel-ID im Navigationsgraphen übereinstimmen:

<!-- res/menu/bottom_nav_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/searchFragment"
        android:icon="@drawable/ic_search"
        android:title="Search" />
    <item
        android:id="@+id/profileFragment"
        android:icon="@drawable/ic_person"
        android:title="Profile" />
</menu>

Mit NavController verbinden

Verbinden Sie BottomNavigationView in onCreate() mit dem NavController:

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

        val navHost = supportFragmentManager
            .findFragmentById(R.id.navHostFragment) as NavHostFragment
        val navController = navHost.navController

        binding.bottomNav.setupWithNavController(navController)

        // Hide bottom nav on detail screens:
        navController.addOnDestinationChangedListener { _, destination, _ ->
            binding.bottomNav.visibility = when (destination.id) {
                R.id.detailFragment -> View.GONE
                else -> View.VISIBLE
            }
        }
    }
}

Badges in der Bottom Navigation

Zeigen Sie Benachrichtigungs-Badges für Elemente der Bottom Navigation an:

// Show a numbered badge:
val badge = binding.bottomNav.getOrCreateBadge(R.id.homeFragment)
badge.number = 5
badge.isVisible = true

// Show dot badge (no number):
val dotBadge = binding.bottomNav.getOrCreateBadge(R.id.searchFragment)
dotBadge.isVisible = true

// Remove badge:
binding.bottomNav.removeBadge(R.id.homeFragment)

TabLayout

TabLayout zeigt horizontale Tabs an und wird typischerweise zusammen mit ViewPager2 für Inhalte verwendet, durch die Sie wischen können:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

ViewPager2 + FragmentStateAdapter

Erstellen Sie einen Adapter, der für jede Tab-Position ein Fragment bereitstellt:

class TasksPagerAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {

    override fun getItemCount() = 3

    override fun createFragment(position: Int): Fragment = when (position) {
        0 -> AllTasksFragment()
        1 -> ActiveTasksFragment()
        2 -> CompletedTasksFragment()
        else -> throw IllegalStateException("Unknown tab $position")
    }
}

TabLayoutMediator

Verbinden Sie ViewPager2 und TabLayout mit TabLayoutMediator:

// In Fragment.onViewCreated():
val adapter = TasksPagerAdapter(this)
binding.viewPager.adapter = adapter

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
    tab.text = when (position) {
        0 -> "All"
        1 -> "Active"
        2 -> "Done"
        else -> ""
    }
}.attach()

// Disable swipe if needed:
binding.viewPager.isUserInputEnabled = false

Tab mit Icons

Fügen Sie den Tabs eines TabLayout Icons hinzu:

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
    when (position) {
        0 -> {
            tab.text = "Home"
            tab.setIcon(R.drawable.ic_home)
        }
        1 -> {
            tab.text = "Search"
            tab.setIcon(R.drawable.ic_search)
        }
        2 -> {
            tab.text = "Profile"
            tab.setIcon(R.drawable.ic_person)
        }
    }
}.attach()

Limit für Seiten außerhalb des Bildschirms

Standardmäßig hält ViewPager2 nur die angrenzende Seite im Speicher. Erhöhen Sie offscreenPageLimit, wenn Ihre Tabs beim Wechseln aktiv bleiben sollen:

// Keep 2 pages on each side alive:
binding.viewPager.offscreenPageLimit = 2

// Note: FragmentStateAdapter saves and restores state for off-screen
// fragments even when offscreenPageLimit is 1 (default).
// Only increase this when you need views (not just state) to survive.

Bottom Navigation oder Tabs: Auswahl

Kurzanleitung zur Auswahl des passenden Musters:

Verwenden Sie Bottom Navigation, wenn es 3–5 Ziele auf oberster Ebene mit unterschiedlichen Aufgaben gibt (Startseite, Suche, Benachrichtigungen, Profil).
Verwenden Sie Tabs, wenn Sie dieselbe Art von Inhalten filtern oder kategorisieren (alle / aktive / archivierte Aufgaben).
Kombinieren Sie beides: Bottom Navigation für Bereiche auf oberster Ebene, Tabs innerhalb eines Bereichs zum weiteren Filtern.

Kurze Überprüfung

Welche Klasse verbindet ein TabLayout mit einem ViewPager2 und legt die Tab-Beschriftungen fest?

Zusammenfassung: Bottom Navigation und Tabs

Navigation in Apps mit mehreren Bereichen richtig umgesetzt:

BottomNavigationView — 3–5 gleich wichtige Ziele; Menü-IDs stimmen mit den Ziel-IDs des Navigationsgraphen überein
setupWithNavController() — automatischer Tab-Wechsel und Back Stack
Badges mit getOrCreateBadge()
TabLayout + ViewPager2 — wischbare, gefilterte Ansichten derselben Inhalte
TabLayoutMediator — verbindet beide Komponenten und legt die Beschriftungen fest

Als Nächstes: Unit-Tests mit JUnit, damit Ihr Code zuverlässig bleibt.

Häufig gestellte Fragen

Ist die Lektion „Untere Navigation und Tabs“ kostenlos?

Ja — der vollständige Text von „Untere Navigation und Tabs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 5 Lektionen.

Was lerne ich in „Untere Navigation und Tabs“?

Implementieren Sie die Navigation zwischen mehreren Bereichen mit BottomNavigationView, verbunden mit NavController, sowie wischbare Tabs mit TabLayout, ViewPager2 und TabLayoutMediator. Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 5 von 5.

Wie lange dauert die Lektion „Untere Navigation und Tabs“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Android Academy