Bottom Navigation: bazele, BottomNavigationView și TabView

Ce este Bottom Navigation?

Bottom Navigation — un model de navigare în care secțiunile principale ale aplicației sunt accesibile printr-un panou în partea de jos a ecranului. Acest model a devenit standardul designului mobil datorită confortului de utilizare cu o singură mână. Spre deosebire de meniul lateral (Drawer), Bottom Navigation este întotdeauna vizibilă și nu necesită gesturi suplimentare pentru deschidere.

Material Design 3 (2026) definește Navigation Bar ca un component cu trei stări: default (pictogramă + etichetă), labeled (etichetă mărită, o filă activă) și unlabeled (doar pictograme). Google recomandă Navigation Bar pentru aplicații cu 3–5 secțiuni echivalente. Pentru 6+ secțiuni — Navigation Drawer. În iOS SwiftUI, TabView utilizează automat panoul inferior cu stilul de sistem.

Cercetarea UX Movement (2025) a arătat: Bottom Navigation îmbunătățește timpul de execuție a sarcinilor cu 27% comparativ cu meniul glisant, deoarece utilizatorul vede toate secțiunile disponibile fără acțiuni suplimentare. Numărul de atingeri greșite se reduce cu 34% datorită țintelor tactile mari (minimum 48x48 dp în Android, 44x44 pt în iOS).

BottomNavigationView în Android (Material 3)

BottomNavigationView în Android — componentul din Material 3 Library (com.google.android.material.navigation.NavigationBarView). Acesta a înlocuit vechiul BottomNavigationView din Material 2 și a adăugat suport pentru culorile dinamice Material You, indicatorul animat al filei active și insignele încorporate. Componentul se configurează prin meniul XML și este pe deplin compatibil cu Navigation Component.

// Activitate cu BottomNavigationView și 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)

        // Sincronizarea automată a navigării
        navView.setupWithNavController(navController)

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

// Meniul XML pentru 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="Acasă" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Chaturi" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Profil" />
// </menu>

Material 3 NavigationBarView suportă trei moduri labelVisibilityMode: LABEL_VISIBILITY_AUTO (implicit — eticheta se afișează pentru fila activă), LABEL_VISIBILITY_LABELED (etichete la toate), LABEL_VISIBILITY_UNLABELED (doar pictograme). Indicatorul animat al filei active se configurează prin itemActiveIndicatorStyle cu efect ripple personalizat.

TabView în SwiftUI pentru iOS

TabView — containerul încorporat SwiftUI pentru crearea navigării inferioare. Fiecare filă este definită prin modificatorul .tabItem cu pictogramă și text. TabView creează automat UITabBarController sub capotă și suportă toate funcțiile panoului nativ: insigne, culoarea insignelor, animația comutării și adaptarea la Dynamic Type.

import SwiftUI

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

            SearchView()
                .tabItem {
                    Label("Căutare", systemImage: "magnifyingglass")
                }

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

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

TabView suportă modificatorul .badge (iOS 15+), care acceptă Int (insignă numerică) sau String (textuală). Culoarea insignei poate fi modificată prin .badgeProminence(.increased) — face insigna mai luminoasă. Animația comutării filelor se configurează prin .tabViewStyle(.automatic) sau stiluri personalizate. Pentru controlul comutării programatice se utilizează @State cu selection.

Combinarea navigării inferioare și în stivă

Bottom Navigation este rar folosită singură — fiecare filă conține de obicei un navigator în stivă (NavigationView/NavigationStack în SwiftUI, NavHostFragment în Android). Această combinație oferă utilizatorului atât acces rapid la secțiuni (Tab), cât și navigare aprofundată în interiorul fiecărei secțiuni (Stack). Este arhitectura standard pentru aplicațiile de producție.

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

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Căutare", systemImage: "magnifyingglass")
            }
        }
    }
}

// În HomeView — navigare în stivă
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)
        }
    }
}

În Android aceeași combinație se implementează prin NavHostFragment pentru fiecare filă. Navigation Component automatizează crearea back stack pentru fiecare filă: la comutarea filelor starea stivei se salvează, la revenire — se restaurează. Aceasta oferă o experiență de utilizare fără întreruperi, ca în aplicațiile de sistem Google (Play Market, YouTube).

Material 3: culori dinamice și animații

Material 3 (Material You) aduce o schimbare cheie în Bottom Navigation — culorile dinamice generate din tapetul utilizatorului. Sistemul extrage culorile dominante din wallpaper și creează o paletă din 5 tonuri cheie. NavigationBarView aplică automat aceste culori: fila activă primește culoarea primary, cele inactive — onSurface variant.

Animația indicatorului filei active a devenit lină: la comutare, indicatorul se deplasează animat către noua filă cu interpolare. Efectul ripple la atingere utilizează culoarea secondary. Bottom Navigation în Material 3 suportă și animații personalizate prin itemActiveIndicatorStyle — dezvoltatorul poate seta forma (oval, dreptunghi), marginile și culoarea indicatorului.

<!-- Stilul indicatorului activ 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>

Recomandări UX pentru navigarea inferioară

La proiectarea Bottom Navigation trebuie luate în considerare cercetările de utilizabilitate. NN Group (2026): panoul inferior trebuie să aibă înălțimea minimă de 56 dp, țintele tactile — cel puțin 48 dp. Textul etichetelor — maxim 12 caractere (latină) sau 8 caractere (chirilică). Fila activă trebuie să difere nu doar prin culoare, ci și prin starea pictogramei (filled vs outlined).

Material Design 3 recomandă următoarele modele: 4 file — optim pentru scanare calmă; simbolul „+” în centru (FloatingActionButton) — pentru acțiunea principală; insigne — doar pentru contoarele acțiunilor utilizatorului. Nu se recomandă: utilizarea Bottom Navigation cu 2 file (mai bine Tab Layout), schimbarea ordinii filelor dinamic, ascunderea panoului pe ecranele imbricate.

• Înălțimea — minim 56 dp pentru atingerea confortabilă cu degetul mare
• Contrastul — fila activă trebuie să fie diferențiată (culoare + umplerea pictogramei)
• Etichetele — scurte, 1-2 cuvinte, fără tăiere (nu mai mult de 12 caractere)
• Ordinea — fixă, de la cel mai important la cel mai puțin important
• Contoarele — doar pentru notificările utilizatorului, nu pentru marketing