TopAppBar: vad är det, konfiguration och användning i Jetpack Compose

Vad är TopAppBar i Jetpack Compose?

TopAppBar är en composable-funktion från Material Design-biblioteket för Jetpack Compose som implementerar appens övre panel (App Bar). Komponenten visar titeln på den aktuella skärmen, en navigeringsknapp till vänster och ytterligare åtgärder till höger.

Till skillnad från det klassiska View-systemet är Compose-versionen av TopAppBar helt deklarativ: panelen ritas om när tillståndet ändras och hanteras inte via findViewById. TopAppBar använder konceptet slot API, där title, navigationIcon och actions skickas som composable-lambdor. Detta gör det möjligt att anpassa valfritt element i panelen utan arv.

Enligt Google Material Design (2025) finns TopAppBar i Compose i tre typer: CenterAlignedTopAppBar (centrerad titel), SmallTopAppBar (standard) och MediumTopAppBar (utökad). Varje typ bestämmer panelens höjd, teckenstorlek på titeln och beteende vid rullning. Den centrerade varianten används oftare på huvudskärmar och MediumTopAppBar för sidor med innehåll där titeln gradvis minskas vid rullning.

För korrekt funktion av TopAppBar måste systemmarginaler beaktas: Insets från WindowInsetsCompat. Enligt rekommendationen från Android Developers (2025) förhindrar anrop av Modifier.statusBarsPadding() eller windowInsetsPadding(WindowInsets.systemBars) att panelen täcker statusfältet.

TopAppBar-parametrar: konfiguration av titel och modifierare

Komponenten TopAppBar accepterar en rad obligatoriska och valfria parametrar. Den främsta är title, där ett composable-block med titeltexten skickas. Eftersom title är en @Composable-lambda kan inte bara text, utan även en ikon med text, sökfält eller förloppsindikator infogas.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppTopBar() {
    TopAppBar(
        title = { Text("Huvud") },
        navigationIcon = {
            IconButton(onClick = { /* open drawer */ }) {
                Icon(
                    Icons.Filled.Menu,
                    contentDescription = "Menu"
                )
            }
        },
        actions = {
            IconButton(onClick = { /* search */ }) {
                Icon(Icons.Filled.Search, contentDescription = "Search")
            }
        }
    )
}

Parametern Modifier gör det möjligt att ställa in marginaler, storlek och justering för hela panelen. Via Modifier.heightIn kan man begränsa minimi- och maxhöjd. Parametern colors accepterar ett TopAppBarColors-objekt för att ändra bakgrunds-, titel- och ikonfärger.

Som standard använder TopAppBar färgschemat från den aktuella MaterialTheme. Om en anpassad palett behövs, använd TopAppBarDefaults.smallTopAppBarColors(). I Material3 anpassas bakgrundsfärgen automatiskt till surfaceColor i ljust och mörkt läge, vilket eliminerar behovet av manuell konfiguration.

Navigeringsknapp i TopAppBar

NavigationIcon är ett composable-block i den vänstra delen av TopAppBar genom vilket navigering implementeras. Typiska scenarier: öppna Navigation Drawer (Menu-ikon), återgå till föregående skärm (ArrowBack-ikon) eller stänga den aktuella skärmen (Close-ikon).

Valet av ikon beror på skärmens position i navigeringsstacken. Om skärmen är rot — visas Menu-ikonen för att öppna Drawer. Om skärmen är nästlad — visas ArrowBack-ikonen för att återgå. I Compose implementeras denna logik via NavController: den aktuella back stack-posten avgör vilken ikon som visas.

Enligt rekommendationen från Material Design (2025) är bredden på navigeringsområdet 48 dp — standardmålet för pekinteraktion. Ikonen måste vara klickbar med visuell återkoppling (ripple). I Compose säkerställs detta genom att linda in i IconButton med en onClick-callback som startar navigeringen.

När du använder Scaffold kan navigeringsknappen duplicera DrawerState som skickas till Scaffold, inte direkt till TopAppBar. I detta fall refererar navigationIcon till Drawer-statusen via rememberDrawerState.

Lägga till åtgärder och rullgardinsmeny

Parametern actions i TopAppBar accepterar ett composable-block med RowScope-kontext, vilket gör det möjligt att placera flera ikoner eller knappar till höger om titeln. Varje åtgärd måste vara ett klickbart ikonografiskt element: sökning, notiser, inställningar, favoriter.

För överflödiga åtgärder används en rullgardinsmeny via DropdownMenu. Om antalet åtgärder överstiger tre placeras de överskottande i OverflowMenu med MoreVert-ikonen. Vid tryck öppnas listan med dolda åtgärder. DropdownMenu positioneras automatiskt i förhållande till ikonen.

@Composable
fun TopBarWithOverflow() {
    var menuExpanded by remember { mutableStateOf(false) }
    TopAppBar(
        title = { Text("Profil") },
        actions = {
            IconButton(onClick = { /* share */ }) {
                Icon(Icons.Filled.Share, contentDescription = "Share")
            }
            Box {
                IconButton(onClick = { menuExpanded = true }) {
                    Icon(Icons.Filled.MoreVert, contentDescription = "More")
                }
                DropdownMenu(
                    expanded = menuExpanded,
                    onDismissRequest = { menuExpanded = false }
                ) {
                    DropdownMenuItem(text = { Text("Inställningar") }, onClick = { /* navigate */ })
                    DropdownMenuItem(text = { Text("Om") }, onClick = { /* navigate */ })
                }
            }
        }
    )
}

Det är viktigt att ställa in contentDescription för varje ikon — detta är ett tillgänglighetskrav. Utan beskrivning kommer TalkBack inte att läsa upp knappen. För rent dekorativa element, använd contentDescription = null.

TopAppBar i Material3: Dynamic Color och anpassning

Material3 (M3) är den aktuella versionen av Material Design, rekommenderad av Google för nya projekt. TopAppBar i M3 implementeras via TopAppBar, CenterAlignedTopAppBar och MediumTopAppBar. Den viktigaste skillnaden från Material2 är det inbyggda stödet för dynamic color, adaptiv höjd och scroll behavior.

Dynamic Color väljer automatiskt panelens färger baserat på enhetens bakgrundsbild (Android 12+). TopAppBar i M3 använder surfaceColor för bakgrund och primary för titel. Om dynamic color inte är tillgänglig tillämpas reservpaletten från MaterialTheme. Enligt Google Material Design (2025) använder 63% av Android 12+-användare dynamic color i appar.

MediumTopAppBar är en utökad variant med stor titel (32 sp), som vid rullning gradvis minskas till 20 sp och omvandlas till SmallTopAppBar. Denna effekt uppnås via TopAppBarDefaults.mediumTopAppBarColors() och parametern scrollBehavior. Övergångsanimationen styrs av TopAppBarState som övervakar titelns hopfällning.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MediumTopBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        topBar = {
            MediumTopAppBar(
                title = { Text("Bibliotek") },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Icon(Icons.Filled.Menu, contentDescription = "Menu")
                    }
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) { padding ->
        LazyColumn(contentPadding = padding) { /* content */ }
    }
}

För Material3 TopAppBar måste @OptIn(ExperimentalMaterial3Api::class) användas — annoteringen indikerar att API:et kan ändras i framtida versioner. Från och med 2025 är TopAppBar i M3 fortfarande experimental, men Google rekommenderar det för produktion med lämplig verifiering.

ScrollBehavior: dölja panelen vid rullning

ScrollBehavior är mekanismen som hanterar synligheten av TopAppBar vid vertikal rullning av innehåll. I Jetpack Compose gör scrollBehavior det möjligt att dölja eller minska panelen för att frigöra utrymme, vilket är särskilt användbart på skärmar med stora innehållslistor.

Material3 erbjuder tre strategier: enterAlways (panelen visas vid rullning uppåt och döljs vid rullning nedåt), exitUntilCollapsed (panelen döljs först efter fullständig hopfällning av titeln) och anpassad via implementering av TopAppBarScrollBehavior-gränssnittet. Den första varianten passar för innehållsflöden, den andra för skärmar med MediumTopAppBar.

ScrollBehavior kräver samordning med LazyColumn eller LazyRow via rememberLazyListState(). Rullningsstatus skickas till TopAppBar via parametern scrollBehavior. Komponenten prenumererar automatiskt på rullningshändelser och animerar panelens synlighet. Enligt Android Developers (2025) är enterAlwaysScrollBehavior den mest populära strategin, som används i 75% av appar med rullningsbar TopAppBar.

Konfigurera anpassad ScrollBehavior

För att skapa anpassat beteende, ärv från TopAppBarScrollBehavior och åsidosätt metoderna onScroll och onDrag. Anpassat beteende är användbart när standardscenarier inte täcker designkraven — till exempel panelen bör döljas först efter att en viss rullningströskel har överskridits.

Som standard lägger scrollBehavior inte till marginaler för innehåll — paddingTop måste ställas in manuellt via contentPadding i Scaffold eller via Modifier.padding i LazyColumn. I MediumTopAppBar beräknas marginalerna automatiskt via TopAppBarState.collapsedFraction.

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
    topBar = {
        MediumTopAppBar(
            title = { Text("Innehåll") },
            scrollBehavior = scrollBehavior
        )
    }
) { padding ->
    LazyColumn(contentPadding = padding) { /* items */ }
}

ScrollBehavior är endast tillgängligt i Material3. I Material2 har TopAppBar inget inbyggt stöd för att döljas vid rullning — för liknande beteende krävs manuell implementering via NestedScrollConnection.