Android Academy · Leçon

Navigation inférieure et onglets

Implémentez une navigation entre plusieurs sections avec BottomNavigationView connecté à NavController, ainsi que des onglets défilables avec TabLayout, ViewPager2 et TabLayoutMediator.

Navigation inférieure et onglets est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 5 sur 5. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 5 leçons au total.

Schémas de navigation

Deux schémas courants pour la navigation principale des applications Android :

Navigation inférieure — pour 3 à 5 destinations principales. Toujours visible. Idéale pour des sections d’importance équivalente (par exemple Accueil, Recherche, Profil).
Onglets — pour du contenu associé au sein d’un même écran (par exemple Tous / Actifs / Terminés). Souvent utilisés avec ViewPager2 pour permettre le balayage.

Disposition de BottomNavigationView

Ajoutez BottomNavigationView et un FragmentContainerView à la disposition de votre Activity :

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

Éléments du menu de navigation inférieure

Définissez les éléments dans res/menu/bottom_nav_menu.xml. L’identifiant de chaque élément doit correspondre à l’identifiant d’une destination du graphe de navigation :

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

Connexion à NavController

Reliez BottomNavigationView à NavController dans onCreate() :

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 de la navigation inférieure

Affichez des badges de notification sur les éléments de la navigation inférieure :

// 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 affiche des onglets horizontaux, généralement utilisés avec ViewPager2 pour présenter du contenu que l’on peut faire défiler par balayage :

<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

Créez un adaptateur qui fournit un fragment pour chaque position d’onglet :

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

Reliez ViewPager2 et TabLayout avec 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

Onglets avec icônes

Ajoutez des icônes aux onglets de TabLayout :

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

Limite des pages hors écran

Par défaut, ViewPager2 ne conserve en mémoire que la page adjacente. Augmentez offscreenPageLimit si vos onglets doivent rester actifs lorsque vous changez de page :

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

Navigation inférieure ou onglets : choisir

Guide rapide pour choisir le bon schéma :

Utilisez la navigation inférieure lorsque : vous avez 3 à 5 destinations principales aux fonctions différentes (Accueil, Recherche, Notifications, Profil)
Utilisez des onglets lorsque : vous filtrez ou catégorisez un même type de contenu (tâches Toutes / Actives / Archivées)
Combinez les deux : navigation inférieure pour les sections principales, onglets à l’intérieur d’une section pour le filtrage secondaire

Vérification rapide

Quelle classe relie un TabLayout à un ViewPager2 et définit les libellés des onglets ?

Récapitulatif : navigation inférieure et onglets

Une navigation entre plusieurs sections, correctement mise en œuvre :

BottomNavigationView — 3 à 5 destinations d’importance équivalente, les identifiants du menu correspondent aux identifiants des destinations du graphe de navigation
setupWithNavController() — changement automatique d’onglet et gestion de la pile de retour
Badges avec getOrCreateBadge()
TabLayout + ViewPager2 — vues filtrables du même contenu, avec balayage
TabLayoutMediator — relie les deux composants et définit les libellés

Ensuite : les tests unitaires avec JUnit pour maintenir la fiabilité de votre code.

Questions Fréquemment Posées

La leçon « Navigation inférieure et onglets » est-elle gratuite ?

Oui — le texte complet de « Navigation inférieure et onglets » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 5 leçons au total.

Qu'est-ce que j'apprendrai dans « Navigation inférieure et onglets » ?

Implémentez une navigation entre plusieurs sections avec BottomNavigationView connecté à NavController, ainsi que des onglets défilables avec TabLayout, ViewPager2 et TabLayoutMediator. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 5 sur 5.

Combien de temps prend la leçon « Navigation inférieure et onglets » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Android Academy