Bottom Navigation: mga batayan, BottomNavigationView at TabView

Ano ang Bottom Navigation?

Bottom Navigation — pattern ng nabigasyon kung saan ang mga pangunahing seksyon ng app ay naa-access sa pamamagitan ng panel sa ibabang bahagi ng screen. Ang pattern na ito ay naging pamantayan ng mobile na disenyo dahil sa kaginhawaan ng paggamit ng isang kamay. Hindi tulad ng side menu (Drawer), ang Bottom Navigation ay palaging nakikita at hindi nangangailangan ng karagdagang mga kilos para buksan.

Material Design 3 (2026) ay tumutukoy sa Navigation Bar bilang isang komponent na may tatlong estado: default (icon + label), labeled (pinalaking label, isang aktibong tab) at unlabeled (mga icon lamang). Inirerekomenda ng Google ang Navigation Bar para sa mga app na may 3–5 pantay na seksyon. Para sa 6+ na seksyon — Navigation Drawer. Sa iOS SwiftUI, ang TabView ay awtomatikong gumagamit ng ibabang panel na may istilo ng sistema.

Ipinakita ng pananaliksik ng UX Movement (2025): Pinapabuti ng Bottom Navigation ang oras ng pagkumpleto ng gawain nang 27% kumpara sa sliding menu, dahil nakikita ng user ang lahat ng magagamit na seksyon nang walang karagdagang aksyon. Ang bilang ng mga maling pagpindot ay bumababa nang 34% dahil sa malalaking target ng pagpindot (minimum na 48x48 dp sa Android, 44x44 pt sa iOS).

BottomNavigationView sa Android (Material 3)

BottomNavigationView sa Android — komponent mula sa Material 3 Library (com.google.android.material.navigation.NavigationBarView). Pinalitan nito ang lumang BottomNavigationView mula sa Material 2 at nagdagdag ng suporta para sa mga dynamic na kulay ng Material You, animated na indikator ng aktibong tab, at mga built-in na badge. Ang komponent ay kino-configure sa pamamagitan ng XML menu at ganap na katugma sa Navigation Component.

// Aktibidad na may BottomNavigationView at 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)

        // Awtomatikong sinkronisasyon ng nabigasyon
        navView.setupWithNavController(navController)

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

// XML menu para sa 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="Profile" />
// </menu>

Material 3 NavigationBarView ay sumusuporta sa tatlong mode ng labelVisibilityMode: LABEL_VISIBILITY_AUTO (default — label ay ipinapakita para sa aktibong tab), LABEL_VISIBILITY_LABELED (mga label sa lahat), LABEL_VISIBILITY_UNLABELED (mga icon lamang). Ang animated na indikator ng aktibong tab ay kino-configure sa pamamagitan ng itemActiveIndicatorStyle na may custom na ripple effect.

TabView sa SwiftUI para sa iOS

TabView — built-in na lalagyan ng SwiftUI para sa paggawa ng ibabang nabigasyon. Ang bawat tab ay tinutukoy ng .tabItem modifier na may icon at teksto. Awtomatikong gumagawa ang TabView ng UITabBarController sa ilalim ng hood at sumusuporta sa lahat ng function ng native na panel: mga badge, kulay ng badge, animasyon ng paglipat at adaptasyon sa Dynamic Type.

import SwiftUI

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

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

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

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

TabView ay sumusuporta sa .badge modifier (iOS 15+), na tumatanggap ng Int (numerikong badge) o String (tekstwal). Ang kulay ng badge ay maaaring baguhin sa pamamagitan ng .badgeProminence(.increased) — ginagawang mas maliwanag ang badge. Ang animasyon ng paglipat ng mga tab ay kino-configure sa pamamagitan ng .tabViewStyle(.automatic) o custom na mga istilo. Para sa kontrol ng programatikong paglipat ginagamit ang @State na may selection.

Kombinasyon ng ibabang at stack na nabigasyon

Bottom Navigation ay bihirang ginagamit nang mag-isa — bawat tab ay karaniwang naglalaman ng stack navigator (NavigationView/NavigationStack sa SwiftUI, NavHostFragment sa Android). Ang ganitong kombinasyon ay nagbibigay sa user ng parehong mabilis na access sa mga seksyon (Tab) at malalim na nabigasyon sa loob ng bawat seksyon (Stack). Ito ang pamantayang arkitektura para sa mga production app.

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

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

// Sa loob ng HomeView — stack na nabigasyon
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)
        }
    }
}

Sa Android ang parehong kombinasyon ay ipinatutupad sa pamamagitan ng NavHostFragment para sa bawat tab. Awtomatiko ng Navigation Component ang paggawa ng back stack para sa bawat tab: kapag lumilipat ng tab ang estado ng stack ay nai-save, kapag bumalik — naibabalik. Ito ay nagbibigay ng tuluy-tuloy na UX, tulad ng sa mga system app ng Google (Play Market, YouTube).

Material 3: mga dynamic na kulay at animasyon

Material 3 (Material You) ay nagdadala ng pangunahing pagbabago sa Bottom Navigation — mga dynamic na kulay na nabuo mula sa wallpaper ng user. Kinukuha ng sistema ang mga dominanteng kulay mula sa wallpaper at lumilikha ng palette ng 5 pangunahing tono. Awtomatikong inilalapat ng NavigationBarView ang mga kulay na ito: ang aktibong tab ay tumatanggap ng primary na kulay, ang mga hindi aktibo — onSurface variant.

Ang animasyon ng indikator ng aktibong tab ay naging makinis: kapag lumilipat, ang indikator ay gumagalaw nang may animasyon patungo sa bagong tab na may interpolation. Ang ripple effect sa pagpindot ay gumagamit ng secondary na kulay. Bottom Navigation sa Material 3 ay sumusuporta rin sa custom na mga animasyon sa pamamagitan ng itemActiveIndicatorStyle — maaaring itakda ng developer ang hugis (oval, parihaba), mga margin at kulay ng indikator.

<!-- Istilo ng aktibong indikator ng 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>

Mga rekomendasyon sa UX para sa ibabang nabigasyon

Kapag nagdidisenyo ng Bottom Navigation dapat isaalang-alang ang mga pananaliksik sa kakayahang magamit. NN Group (2026): ang ibabang panel ay dapat may taas na minimum na 56 dp, mga target ng pagpindot — hindi bababa sa 48 dp. Teksto ng mga label — maximum na 12 karakter (Latin) o 8 karakter (Cyrillic). Ang aktibong tab ay dapat na magkaiba hindi lamang sa kulay, kundi pati na rin sa estado ng icon (filled vs outlined).

Inirerekomenda ng Material Design 3 ang mga sumusunod na pattern: 4 na tab — pinakamainam para sa tahimik na pag-scan; simbolong „+“ sa gitna (FloatingActionButton) — para sa pangunahing aksyon; mga badge — para lamang sa mga counter ng aksyon ng user. Hindi dapat: gumamit ng Bottom Navigation na may 2 tab (mas mabuti Tab Layout), baguhin ang pagkakasunod-sunod ng mga tab nang pabago-bago, itago ang panel sa mga nested na screen.

• Taas — minimum na 56 dp para sa komportableng pagpindot ng hinlalaki
• Kontrast — ang aktibong tab ay dapat na makilala (kulay + pagpuno ng icon)
• Mga label — maikli, 1-2 salita, walang pagputol (hindi hihigit sa 12 karakter)
• Pagkakasunod-sunod — nakapirmi, mula sa pinakamahalaga hanggang sa hindi gaanong mahalaga
• Mga counter — para lamang sa mga notipikasyon ng user, hindi para sa marketing