Bottom Navigation: основе, BottomNavigationView и TabView

Шта је Bottom Navigation?

Bottom Navigation — образац навигације при којем су главне секције апликације доступне кроз панел у доњем делу екрана. Овај образац је постао стандард мобилног дизајна захваљујући удобности коришћења једном руком. За разлику од бочног менија (Drawer), Bottom Navigation је увек видљива и не захтева додатне гестове за отварање.

Material Design 3 (2026) дефинише Navigation Bar као компоненту са три стања: default (икона + натпис), labeled (увећан натпис, активна једна картица) и unlabeled (само иконе). Google препоручује Navigation Bar за апликације са 3–5 равноправних секција. За 6+ секција — Navigation Drawer. У iOS SwiftUI, TabView аутоматски користи доњи панел са системским стилом.

Истраживање UX Movement (2025) је показало: Bottom Navigation побољшава време извршавања задатака за 27% у поређењу са извлачећим менијем, јер корисник види све доступне секције без додатних радњи. Број погрешних додира се смањује за 34% захваљујући великим циљевима додира (минимум 48x48 dp на Android, 44x44 pt на iOS).

BottomNavigationView у Android (Material 3)

BottomNavigationView у Android-у — компонента из Material 3 Library (com.google.android.material.navigation.NavigationBarView). Заменила је застарели BottomNavigationView из Material 2 и додала подршку за динамичке боје Material You, анимирани индикатор активне картице и уграђене беџеве. Компонента се конфигурише кроз XML мени и потпуно је компатибилна са Navigation Component.

// Активност са BottomNavigationView и 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)

        // Аутоматска синхронизација навигације
        navView.setupWithNavController(navController)

        // Подешавање беџа
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// XML мени за 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="Почетна" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Ћаскања" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Профил" />
// </menu>

Material 3 NavigationBarView подржава три режима labelVisibilityMode: LABEL_VISIBILITY_AUTO (подразумевано — натпис се приказује за активну картицу), LABEL_VISIBILITY_LABELED (натписи код свих), LABEL_VISIBILITY_UNLABELED (само иконе). Анимирани индикатор активне картице се конфигурише кроз itemActiveIndicatorStyle са прилагођеним ripple ефектом.

TabView у SwiftUI за iOS

TabView — уграђени контејнер SwiftUI за креирање доње навигације. Свака картица се дефинише модификатором .tabItem са иконом и текстом. TabView аутоматски креира UITabBarController испод хаубе и подржава све функције изворног панела: беџеве, боју беџева, анимацију пребацивања и прилагођавање Dynamic Type-у.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("Почетна", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("Претрага", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("Обавештења", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("Профил", systemImage: "person.circle.fill")
                }
        }
    }
}

TabView подржава модификатор .badge (iOS 15+), који прихвата Int (бројчани беџ) или String (текстуални). Боја беџа се може променити кроз .badgeProminence(.increased) — чини беџ светлијим. Анимација пребацивања картица се конфигурише кроз .tabViewStyle(.automatic) или прилагођене стилове. За контролу програмског пребацивања користи се @State са selection.

Комбинација доње и стек навигације

Bottom Navigation се ретко користи самостално — свака картица обично садржи стек навигатор (NavigationView/NavigationStack у SwiftUI, NavHostFragment у Android-у). Таква комбинација даје кориснику и брз приступ секцијама (Tab) и дубинску навигацију унутар сваке секције (Stack). Ово је стандардна архитектура за production апликације.

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("Почетна", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Претрага", systemImage: "magnifyingglass")
            }
        }
    }
}

// Унутар HomeView — стек навигација
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)
        }
    }
}

У Android-у иста комбинација се имплементира кроз NavHostFragment за сваку картицу. Navigation Component аутоматизује креирање back stack-а за сваку картицу: при пребацивању картица стање стека се чува, при повратку — обнавља. Ово пружа беспрекорно UX, као у системским апликацијама Google-а (Play Market, YouTube).

Material 3: динамичке боје и анимације

Material 3 (Material You) уноси кључну промену у Bottom Navigation — динамичке боје генерисане из позадине корисника. Систем издваја доминантне боје из wallpaper-а и креира палету од 5 кључних тонова. NavigationBarView аутоматски примењује ове боје: активна картица добија primary боју, неактивне — onSurface variant.

Анимација индикатора активне картице је постала глатка: при пребацивању индикатор се анимирано помера ка новој картици са интерполацијом. Ripple ефекат на додир користи secondary боју. Bottom Navigation у Material 3 такође подржава прилагођене анимације кроз itemActiveIndicatorStyle — програмер може подесити облик (овал, правоугаоник), маргине и боју индикатора.

<!-- Стил активног индикатора 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>

UX препоруке за доњу навигацију

При пројектовању Bottom Navigation треба узети у обзир истраживања употребљивости. NN Group (2026): доњи панел треба да има висину минимално 56 dp, циљеви додира — најмање 48 dp. Текст ознака — максимално 12 знакова (латиница) или 8 знакова (ћирилица). Активна картица треба да се разликује не само по боји, већ и по стању иконе (filled vs outlined).

Material Design 3 препоручује следеће обрасце: 4 картице — оптимално за мирно скенирање; знак „+“ у центру (FloatingActionButton) — за главну радњу; беџеви — само за бројаче корисничких акција. Не треба: користити Bottom Navigation са 2 картице (боље Tab Layout), мењати редослед картица динамички, сакривати панел на угнежђеним екранима.

• Висина — минимум 56 dp за удобан додир палцем
• Контраст — активна картица мора бити препознатљива (боја + попуњеност иконе)
• Натписи — кратки, 1-2 речи, без скраћивања (не више од 12 знакова)
• Редослед — фиксан, од најважнијег ка мање важном
• Бројачи — само за корисничка обавештења, не за маркетинг