Bottom Navigation: grunder, BottomNavigationView och TabView

Vad är Bottom Navigation?

Bottom Navigation — navigationsmönster där appens huvudsektioner är tillgängliga via en panel längst ner på skärmen. Detta mönster har blivit standard inom mobildesign tack vare bekvämligheten med enhandsanvändning. Till skillnad från sidomenyn (Drawer) är Bottom Navigation alltid synlig och kräver inga extra gester för att öppnas.

Material Design 3 (2026) definierar Navigation Bar som en komponent med tre tillstånd: default (ikon + etikett), labeled (förstorad etikett, en aktiv flik) och unlabeled (endast ikoner). Google rekommenderar Navigation Bar för appar med 3–5 likvärdiga sektioner. För 6+ sektioner — Navigation Drawer. I iOS SwiftUI använder TabView automatiskt bottenpanelen med systemstil.

UX Movement (2025) forskning visade: Bottom Navigation förbättrar uppgiftsutförandetiden med 27% jämfört med en utdragbar meny, eftersom användaren ser alla tillgängliga sektioner utan extra åtgärder. Antalet felaktiga tryck minskar med 34% tack vare stora tryckmål (minst 48x48 dp på Android, 44x44 pt på iOS).

BottomNavigationView i Android (Material 3)

BottomNavigationView i Android — komponent från Material 3 Library (com.google.android.material.navigation.NavigationBarView). Den ersatte den föråldrade BottomNavigationView från Material 2 och lade till stöd för dynamiska Material You-färger, animerad indikator för aktiv flik och inbyggda märken. Komponenten konfigureras via XML-meny och är fullt kompatibel med Navigation Component.

// Aktivitet med BottomNavigationView och 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)

        // Automatisk navigationssynkronisering
        navView.setupWithNavController(navController)

        // Märkeskonfiguration
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// XML-meny för 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="Hem" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Chattar" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Profil" />
// </menu>

Material 3 NavigationBarView stöder tre lägen för labelVisibilityMode: LABEL_VISIBILITY_AUTO (standard — etikett visas för aktiv flik), LABEL_VISIBILITY_LABELED (etiketter på alla), LABEL_VISIBILITY_UNLABELED (endast ikoner). Den animerade indikatorn för aktiv flik konfigureras via itemActiveIndicatorStyle med anpassad ripple-effekt.

TabView i SwiftUI för iOS

TabView — inbyggd SwiftUI-container för att skapa bottennavigering. Varje flik definieras av .tabItem-modifieraren med ikon och text. TabView skapar automatiskt en UITabBarController under huven och stöder alla funktioner i den ursprungliga panelen: märken, märkesfärg, växlingsanimation och anpassning till Dynamic Type.

import SwiftUI

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

            SearchView()
                .tabItem {
                    Label("Sök", systemImage: "magnifyingglass")
                }

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

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

TabView stöder .badge-modifieraren (iOS 15+), som accepterar Int (numeriskt märke) eller String (textmärke). Märkets färg kan ändras via .badgeProminence(.increased) — gör märket ljusare. Växlingsanimationen för flikar konfigureras via .tabViewStyle(.automatic) eller anpassade stilar. För programmerad växlingskontroll används @State med selection.

Kombination av botten- och stacknavigering

Bottom Navigation används sällan ensam — varje flik innehåller vanligtvis en stacknavigator (NavigationView/NavigationStack i SwiftUI, NavHostFragment i Android). Denna kombination ger användaren både snabb åtkomst till sektioner (Tab) och djupnavigering inom varje sektion (Stack). Detta är standardarkitekturen för produktionsappar.

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

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Sök", systemImage: "magnifyingglass")
            }
        }
    }
}

// Inuti HomeView — stacknavigering
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)
        }
    }
}

I Android implementeras samma kombination via NavHostFragment för varje flik. Navigation Component automatiserar skapandet av back stack för varje flik: vid växling av flikar sparas stackens tillstånd, vid återgång — återställs. Detta ger en sömlös UX, som i Googles systemappar (Play Market, YouTube).

Material 3: dynamiska färger och animationer

Material 3 (Material You) medför en viktig förändring i Bottom Navigation — dynamiska färger genererade från användarens bakgrundsbild. Systemet extraherar dominerande färger från wallpaper och skapar en palett med 5 viktiga toner. NavigationBarView tillämpar automatiskt dessa färger: den aktiva fliken får primary-färg, de inaktiva — onSurface variant.

Animationen av den aktiva flikindikatorn har blivit smidig: vid växling flyttas indikatorn animerat till den nya fliken med interpolation. Ripple-effekten vid beröring använder secondary-färg. Bottom Navigation i Material 3 stöder också anpassade animationer via itemActiveIndicatorStyle — utvecklaren kan ställa in indikatorns form (oval, rektangel), marginaler och färg.

<!-- Stil för aktiv indikator 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-rekommendationer för bottennavigering

Vid utformning av Bottom Navigation bör användbarhetsstudier beaktas. NN Group (2026): bottenpanelen bör ha en höjd på minst 56 dp, tryckmål — minst 48 dp. Etiketttext — max 12 tecken (latinska) eller 8 tecken (kyrilliska). Den aktiva fliken bör skilja sig inte bara i färg utan även i ikonstatus (filled vs outlined).

Material Design 3 rekommenderar följande mönster: 4 flikar — optimalt för lugn skanning; „+“-symbol i mitten (FloatingActionButton) — för den primära åtgärden; märken — endast för räknare av användaråtgärder. Bör inte: använda Bottom Navigation med 2 flikar (bättre Tab Layout), ändra flikordningen dynamiskt, dölja panelen på kapslade skärmar.

• Höjd — minst 56 dp för bekväm beröring med tummen
• Kontrast — aktiv flik måste vara urskiljbar (färg + ikonfyllning)
• Etiketter — korta, 1-2 ord, utan trunkering (högst 12 tecken)
• Ordning — fast, från viktigast till mindre viktig
• Räknare — endast för användarnotifieringar, inte för marknadsföring