TopAppBar: wat is het, configuratie en gebruik in Jetpack Compose

Wat is TopAppBar in Jetpack Compose?

TopAppBar is een composable-functie uit de Material Design-bibliotheek voor Jetpack Compose die het bovenste paneel van de app (App Bar) implementeert. De component toont de titel van het huidige scherm, een navigatieknop links en extra acties rechts.

In tegenstelling tot het klassieke View-systeem is de Compose-versie van TopAppBar volledig declaratief: het paneel wordt opnieuw getekend bij statuswijzigingen en wordt niet beheerd via findViewById. TopAppBar maakt gebruik van het slot API-concept, waarbij title, navigationIcon en actions worden doorgegeven als composable-lambdas. Dit maakt het mogelijk elk element van het paneel aan te passen zonder overerving.

Volgens Google Material Design (2025) is TopAppBar in Compose verkrijgbaar in drie types: CenterAlignedTopAppBar (gecentreerde titel), SmallTopAppBar (standaard) en MediumTopAppBar (uitgebreid). Elk type bepaalt de hoogte van het paneel, de lettergrootte van de titel en het gedrag bij scrollen. De gecentreerde variant wordt vaker gebruikt op hoofdschermen, en MediumTopAppBar voor pagina's met inhoud waar de titel geleidelijk kleiner wordt tijdens het scrollen.

Voor een correcte werking van TopAppBar moeten systeemmarges in acht worden genomen: Insets van WindowInsetsCompat. Volgens de aanbeveling van Android Developers (2025) voorkomt het aanroepen van Modifier.statusBarsPadding() of windowInsetsPadding(WindowInsets.systemBars) dat het paneel over de statusbalk valt.

TopAppBar-parameters: titel en modifiers configureren

De component TopAppBar accepteert een reeks verplichte en optionele parameters. De belangrijkste is title, waaraan een composable-blok met de titeltekst wordt doorgegeven. Omdat title een @Composable-lambda is, kan niet alleen tekst worden ingevoegd, maar ook een pictogram met tekst, een zoekbalk of een voortgangsbalk.

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

De parameter Modifier maakt het mogelijk om marges, afmetingen en uitlijning van het hele paneel in te stellen. Via Modifier.heightIn kunnen de minimale en maximale hoogte worden beperkt. De parameter colors accepteert een TopAppBarColors-object voor het overschrijven van de achtergrond-, titel- en pictogramkleuren.

Standaard gebruikt TopAppBar het kleurenschema van het huidige MaterialTheme. Als een aangepast palet nodig is, gebruik dan TopAppBarDefaults.smallTopAppBarColors(). In Material3 past de achtergrondkleur zich automatisch aan surfaceColor in lichte en donkere thema's, waardoor handmatige configuratie overbodig is.

Navigatieknop in TopAppBar

NavigationIcon is een composable-blok in het linkerdeel van TopAppBar waarmee navigatie wordt geĺmplementeerd. Typische scenario's: het openen van de Navigation Drawer (Menu-pictogram), terugkeren naar het vorige scherm (ArrowBack-pictogram) of het sluiten van het huidige scherm (Close-pictogram).

De keuze van het pictogram hangt af van de positie van het scherm in de navigatiestack. Als het scherm root is, wordt het Menu-pictogram weergegeven om de Drawer te openen. Als het scherm genest is, wordt het ArrowBack-pictogram weergegeven om terug te keren. In Compose wordt deze logica geĺmplementeerd via NavController: de huidige back stack-entry bepaalt welk pictogram wordt weergegeven.

Volgens de aanbeveling van Material Design (2025) is de breedte van het navigatiegebied 48 dp — het standaard doelwit voor aanraakinteractie. Het pictogram moet klikbaar zijn met visuele feedback (ripple). In Compose wordt dit gegarandeerd door verpakking in een IconButton met een onClick-callback die de navigatie start.

Bij gebruik van Scaffold kan de navigatieknop de DrawerState dupliceren die aan Scaffold wordt doorgegeven, niet rechtstreeks aan TopAppBar. In dit geval verwijst navigationIcon naar de Drawer-status via rememberDrawerState.

Acties en vervolgkeuzemenu toevoegen

De parameter actions in TopAppBar accepteert een composable-blok met de context RowScope, waardoor meerdere pictogrammen of knoppen rechts van de titel kunnen worden geplaatst. Elke actie moet een klikbaar iconografisch element zijn: zoeken, meldingen, instellingen, favorieten.

Voor overvolle acties wordt een vervolgkeuzemenu gebruikt via DropdownMenu. Als het aantal acties meer dan drie is, worden de extra acties in OverflowMenu met het MoreVert-pictogram geplaatst. Bij indrukken wordt de lijst met verborgen acties geopend. DropdownMenu wordt automatisch ten opzichte van het pictogram gepositioneerd.

@Composable
fun TopBarWithOverflow() {
    var menuExpanded by remember { mutableStateOf(false) }
    TopAppBar(
        title = { Text("Profiel") },
        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("Instellingen") }, onClick = { /* navigate */ })
                    DropdownMenuItem(text = { Text("Over") }, onClick = { /* navigate */ })
                }
            }
        }
    )
}

Het is belangrijk om voor elk pictogram contentDescription in te stellen — dit is een toegankelijkheidsvereiste. Zonder beschrijving zal TalkBack de knop niet uitspreken. Gebruik voor zuiver decoratieve elementen contentDescription = null.

TopAppBar in Material3: Dynamic Color en aanpassing

Material3 (M3) is de huidige versie van Material Design, aanbevolen door Google voor nieuwe projecten. TopAppBar in M3 wordt geĺmplementeerd via TopAppBar, CenterAlignedTopAppBar en MediumTopAppBar. Het belangrijkste verschil met Material2 is de ingebouwde ondersteuning voor dynamic color, adaptieve hoogte en scroll behavior.

Dynamic Color selecteert automatisch de kleuren van het paneel op basis van de achtergrond van het apparaat (Android 12+). TopAppBar in M3 gebruikt surfaceColor voor de achtergrond en primary voor de titel. Als dynamic color niet beschikbaar is, wordt het fallback-palet van MaterialTheme gebruikt. Volgens Google Material Design (2025) gebruikt 63% van de Android 12+-gebruikers dynamic color in apps.

MediumTopAppBar is een uitgebreide variant met een grote titel (32 sp), die tijdens scrollen geleidelijk kleiner wordt naar 20 sp en verandert in SmallTopAppBar. Dit effect wordt gerealiseerd via TopAppBarDefaults.mediumTopAppBarColors() en de parameter scrollBehavior. De overgangsanimatie wordt gecontroleerd door TopAppBarState, dat het inklappen van de titel volgt.

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

Voor Material3 TopAppBar moet @OptIn(ExperimentalMaterial3Api::class) worden gebruikt — de annotatie geeft aan dat de API in toekomstige versies kan veranderen. In 2025 blijft TopAppBar in M3 experimental, maar Google beveelt het aan voor productie met de juiste verificatie.

ScrollBehavior: paneel verbergen bij scrollen

ScrollBehavior is het mechanisme dat de zichtbaarheid van TopAppBar regelt bij verticaal scrollen van inhoud. In Jetpack Compose maakt scrollBehavior het mogelijk het paneel te verbergen of te verkleinen om ruimte vrij te maken, wat vooral handig is op schermen met grote inhoudslijsten.

Material3 biedt drie strategieën: enterAlways (het paneel verschijnt bij omhoog scrollen en verbergt bij omlaag scrollen), exitUntilCollapsed (het paneel verbergt pas na volledig inklappen van de titel) en aangepast via implementatie van de TopAppBarScrollBehavior-interface. De eerste variant is geschikt voor inhoudsfeeds, de tweede voor schermen met MediumTopAppBar.

ScrollBehavior vereist coördinatie met LazyColumn of LazyRow via rememberLazyListState(). De scrollstatus wordt doorgegeven aan TopAppBar via de parameter scrollBehavior. De component abonneert zich automatisch op scrolgebeurtenissen en animeert de zichtbaarheid van het paneel. Volgens Android Developers (2025) is enterAlwaysScrollBehavior de populairste strategie, gebruikt in 75% van de apps met scrollbare TopAppBar.

Aangepast ScrollBehavior configureren

Om aangepast gedrag te creëren, erft u van TopAppBarScrollBehavior en overschrijft u de methoden onScroll en onDrag. Aangepast gedrag is handig wanneer standaard scenario's niet voldoen aan de ontwerpvereisten — bijvoorbeeld het paneel mag pas verbergen na het overschrijden van een bepaalde scroll-drempel.

Standaard voegt scrollBehavior geen marges toe voor inhoud — paddingTop moet handmatig worden ingesteld via contentPadding in Scaffold of via Modifier.padding in LazyColumn. In MediumTopAppBar worden marges automatisch berekend via TopAppBarState.collapsedFraction.

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

ScrollBehavior is alleen beschikbaar in Material3. In Material2 heeft TopAppBar geen ingebouwde ondersteuning voor verbergen bij scrollen — voor soortgelijk gedrag is handmatige implementatie via NestedScrollConnection vereist.