Bottom Navigation: basi, BottomNavigationView e TabView

Cos'è Bottom Navigation?

Bottom Navigation è un pattern di navigazione in cui le sezioni principali dell'app sono accessibili tramite un pannello nella parte inferiore dello schermo. Questo pattern è diventato uno standard del design mobile grazie alla sua facilità d'uso con una mano. A differenza di un menu laterale (Drawer), Bottom Navigation è sempre visibile e non richiede gesti aggiuntivi per aprirlo.

Material Design 3 (2026) definisce la Navigation Bar come un componente con tre stati: default (icona + etichetta), labeled (etichetta ingrandita, una scheda attiva) e unlabeled (solo icone). Google raccomanda Navigation Bar per app con 3–5 sezioni equivalenti. Per 6+ sezioni — Navigation Drawer. In iOS SwiftUI, TabView utilizza automaticamente un pannello inferiore con stile di sistema.

Uno studio di UX Movement (2025) ha mostrato che Bottom Navigation migliora il tempo di completamento delle attività del 27% rispetto a un menu scorrevole, poiché l'utente vede tutte le sezioni disponibili senza azioni aggiuntive. Il numero di tocchi errati diminuisce del 34% grazie a grandi bersagli tattili (minimo 48x48 dp su Android, 44x44 pt su iOS).

BottomNavigationView in Android (Material 3)

BottomNavigationView in Android è un componente della libreria Material 3 (com.google.android.material.navigation.NavigationBarView). Ha sostituito il vecchio BottomNavigationView di Material 2 e ha aggiunto il supporto per i colori dinamici di Material You, l'indicatore animato della scheda attiva e i badge integrati. Il componente è configurato tramite un menu XML ed è completamente compatibile con Navigation Component.

// Attività con BottomNavigationView e 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)

        // Sincronizzazione automatica della navigazione
        navView.setupWithNavController(navController)

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

// Menu XML per 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="Home" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Chat" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Profilo" />
// </menu>

Material 3 NavigationBarView supporta tre modalità labelVisibilityMode: LABEL_VISIBILITY_AUTO (predefinito — l'etichetta viene mostrata per la scheda attiva), LABEL_VISIBILITY_LABELED (etichette per tutti), LABEL_VISIBILITY_UNLABELED (solo icone). L'indicatore animato della scheda attiva è configurato tramite itemActiveIndicatorStyle con un effetto ripple personalizzato.

TabView in SwiftUI per iOS

TabView è un contenitore integrato SwiftUI per creare navigazione inferiore. Ogni scheda è definita usando il modificatore .tabItem con un'icona e testo. TabView crea automaticamente un UITabBarController internamente e supporta tutte le funzionalità native del pannello: badge, colore del badge, animazione di commutazione e adattamento Dynamic Type.

import SwiftUI

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

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

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

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

TabView supporta il modificatore .badge (iOS 15+), che accetta Int (badge numerico) o String (badge testuale). Il colore del badge può essere modificato tramite .badgeProminence(.increased) — rende il badge più luminoso. L'animazione di commutazione delle schede è configurata tramite .tabViewStyle(.automatic) o stili personalizzati. Per il controllo programmatico della commutazione, viene utilizzato @State con selection.

Combinazione di navigazione inferiore e a pila

Bottom Navigation è raramente usata da sola — ogni scheda di solito contiene un navigatore a pila (NavigationView/NavigationStack in SwiftUI, NavHostFragment in Android). Questa combinazione offre all'utente sia un accesso rapido alle sezioni (Tab) sia una navigazione approfondita all'interno di ciascuna sezione (Stack). Questa è l'architettura standard per le app di produzione.

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

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

// Dentro HomeView — navigazione a pila
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)
        }
    }
}

In Android, la stessa combinazione è implementata tramite NavHostFragment per ogni scheda. Navigation Component automatizza la creazione della pila di ritorno per ogni scheda: quando si cambia scheda, lo stato della pila viene preservato, e quando si ritorna — ripristinato. Questo offre un'esperienza utente fluida, come nelle app di sistema Google (Play Market, YouTube).

Material 3: colori dinamici e animazioni

Material 3 (Material You) introduce un cambiamento chiave in Bottom Navigation — colori dinamici generati dallo sfondo dell'utente. Il sistema estrae i colori dominanti dallo sfondo e crea una palette di 5 toni chiave. NavigationBarView applica automaticamente questi colori: la scheda attiva riceve il colore primario, quelle inattive — la variante onSurface.

L'animazione dell'indicatore della scheda attiva è diventata fluida: durante il cambio, l'indicatore si anima verso la nuova scheda con interpolazione. L'effetto ripple al tocco utilizza il colore secondario. Bottom Navigation in Material 3 supporta anche animazioni personalizzate tramite itemActiveIndicatorStyle — lo sviluppatore può impostare la forma (ovale, rettangolo), i margini e il colore dell'indicatore.

<!-- Stile dell'indicatore attivo di 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>

Raccomandazioni UX per Bottom Navigation

Quando si progetta Bottom Navigation, la ricerca sull'usabilità dovrebbe essere considerata. NN Group (2026): il pannello inferiore dovrebbe essere alto almeno 56 dp, i bersagli tattili — almeno 48 dp. Il testo delle etichette — massimo 12 caratteri (latino) o 8 caratteri (cirillico). La scheda attiva dovrebbe differire non solo per colore ma anche per stato dell'icona (piena vs contorno).

Material Design 3 raccomanda i seguenti pattern: 4 schede — ottimale per una facile scansione; un'icona "+" al centro (FloatingActionButton) — per l'azione principale; badge — solo per contatori di azioni utente. Evitare: usare Bottom Navigation con 2 schede (usare invece Tab Layout), cambiare dinamicamente l'ordine delle schede, nascondere il pannello su schermi annidati.

• Altezza — minimo 56 dp per una comoda portata del pollice
• Contrasto — la scheda attiva deve essere distinguibile (colore + riempimento icona)
• Etichette — corte, 1-2 parole, senza troncamento (non più di 12 caratteri)
• Ordine — fisso, dal più importante al meno importante
• Contatori — solo per notifiche utente, non per marketing