Bottom Navigation : bases, BottomNavigationView et TabView

Qu'est-ce que la Bottom Navigation ?

Bottom Navigation est un modèle de navigation où les sections principales de l'application sont accessibles via un panneau en bas de l'écran. Ce modèle est devenu un standard du design mobile grâce à sa facilité d'utilisation à une main. Contrairement à un menu latéral (Drawer), la Bottom Navigation est toujours visible et ne nécessite pas de gestes supplémentaires pour l'ouvrir.

Material Design 3 (2026) définit la Navigation Bar comme un composant avec trois états : default (icône + étiquette), labeled (étiquette agrandie, un onglet actif) et unlabeled (icônes uniquement). Google recommande la Navigation Bar pour les applications avec 3 à 5 sections équivalentes. Pour 6+ sections — Navigation Drawer. Dans SwiftUI pour iOS, TabView utilise automatiquement un panneau inférieur avec le style système.

Une étude d'UX Movement (2025) a montré que la Bottom Navigation améliore le temps d'exécution des tâches de 27% par rapport à un menu coulissant, car l'utilisateur voit toutes les sections disponibles sans actions supplémentaires. Le nombre de touches incorrectes diminue de 34% grâce à de grandes cibles tactiles (minimum 48x48 dp sur Android, 44x44 pt sur iOS).

BottomNavigationView sous Android (Material 3)

BottomNavigationView sous Android est un composant de la bibliothèque Material 3 (com.google.android.material.navigation.NavigationBarView). Il a remplacé l'ancien BottomNavigationView de Material 2 et ajouté la prise en charge des couleurs dynamiques Material You, de l'indicateur animé d'onglet actif et des badges intégrés. Le composant est configuré via un menu XML et est entièrement compatible avec Navigation Component.

// Activité avec BottomNavigationView et 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)

        // Synchronisation automatique de la navigation
        navView.setupWithNavController(navController)

        // Configuration du badge
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// Menu XML pour Bottom Navigation (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="Accueil" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Chats" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Profil" />
// </menu>

Material 3 NavigationBarView prend en charge trois modes labelVisibilityMode : LABEL_VISIBILITY_AUTO (par défaut — l'étiquette est affichée pour l'onglet actif), LABEL_VISIBILITY_LABELED (étiquettes pour tous), LABEL_VISIBILITY_UNLABELED (icônes uniquement). L'indicateur animé d'onglet actif est configuré via itemActiveIndicatorStyle avec un effet ripple personnalisé.

TabView dans SwiftUI pour iOS

TabView est un conteneur intégré SwiftUI pour créer une navigation inférieure. Chaque onglet est défini à l'aide du modificateur .tabItem avec une icône et du texte. TabView crée automatiquement un UITabBarController en interne et prend en charge toutes les fonctionnalités natives du panneau : badges, couleur des badges, animation de commutation et adaptation Dynamic Type.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("Accueil", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("Rechercher", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("Notifications", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("Profil", systemImage: "person.circle.fill")
                }
        }
    }
}

TabView prend en charge le modificateur .badge (iOS 15+), qui accepte Int (badge numérique) ou String (badge texte). La couleur du badge peut être modifiée via .badgeProminence(.increased) — rend le badge plus lumineux. L'animation de commutation des onglets est configurée via .tabViewStyle(.automatic) ou des styles personnalisés. Pour le contrôle programmatique de la commutation, @State avec selection est utilisé.

Combinaison de la navigation inférieure et en pile

Bottom Navigation est rarement utilisée seule — chaque onglet contient généralement un navigateur en pile (NavigationView/NavigationStack dans SwiftUI, NavHostFragment dans Android). Cette combinaison offre à l'utilisateur à la fois un accès rapide aux sections (Tab) et une navigation approfondie dans chaque section (Stack). C'est l'architecture standard pour les applications de production.

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("Accueil", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Rechercher", systemImage: "magnifyingglass")
            }
        }
    }
}

// Dans HomeView — navigation en pile
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)
        }
    }
}

Sous Android, la même combinaison est implémentée via NavHostFragment pour chaque onglet. Navigation Component automatise la création de la pile de retour pour chaque onglet : lors du changement d'onglet, l'état de la pile est préservé, et au retour — restauré. Cela offre une UX fluide, comme dans les applications système Google (Play Market, YouTube).

Material 3 : couleurs dynamiques et animations

Material 3 (Material You) introduit un changement clé dans la Bottom Navigation — des couleurs dynamiques générées à partir du fond d'écran de l'utilisateur. Le système extrait les couleurs dominantes du fond d'écran et crée une palette de 5 tons clés. NavigationBarView applique automatiquement ces couleurs : l'onglet actif reçoit la couleur primaire, les inactifs — la variante onSurface.

L'animation de l'indicateur d'onglet actif est devenue fluide : lors du changement, l'indicateur s'anime vers le nouvel onglet avec interpolation. L'effet ripple au toucher utilise la couleur secondaire. Bottom Navigation dans Material 3 prend également en charge les animations personnalisées via itemActiveIndicatorStyle — le développeur peut définir la forme (ovale, rectangle), les marges et la couleur de l'indicateur.

<!-- Style de l'indicateur actif de 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>

Recommandations UX pour la Bottom Navigation

Lors de la conception de Bottom Navigation, la recherche en utilisabilité doit être prise en compte. NN Group (2026) : le panneau inférieur doit avoir au moins 56 dp de hauteur, les cibles tactiles — au moins 48 dp. Le texte des étiquettes — maximum 12 caractères (latin) ou 8 caractères (cyrillique). L'onglet actif doit différer non seulement par la couleur mais aussi par l'état de l'icône (remplie vs contour).

Material Design 3 recommande les modèles suivants : 4 onglets — optimal pour un balayage facile ; une icône "+" au centre (FloatingActionButton) — pour l'action principale ; les badges — uniquement pour les compteurs d'actions utilisateur. Éviter : utiliser la Bottom Navigation avec 2 onglets (utiliser plutôt Tab Layout), modifier dynamiquement l'ordre des onglets, masquer le panneau sur les écrans imbriqués.

• Hauteur — minimum 56 dp pour une portée confortable du pouce
• Contraste — l'onglet actif doit être distinguable (couleur + remplissage de l'icône)
• Étiquettes — courtes, 1-2 mots, sans troncature (pas plus de 12 caractères)
• Ordre — fixe, du plus important au moins important
• Compteurs — uniquement pour les notifications utilisateur, pas pour le marketing