Toolbar: essentie, werkbalk in Android-applicaties

Auteur: IT Sectr Gepubliceerd: 2026-02-23 Leestijd: 12 min

Toolbar (werkbalk) — Android-component dat ActionBar heeft vervangen, toont de titel van het scherm, navigatie-elementen en acties. Toolbar maakt deel uit van de Material Design Library en is volledig aanpasbaar: van standaardtitel tot aangepaste weergaven en geanimeerde pictogrammen. Lees meer over het component in de specificatie van Material Design 3.

Belangrijkste punten

  • Toolbar — aanpasbare Android-werkbalk, opvolger van ActionBar uit Material Design
  • ActionBar — systeembalk die bestond vóór Android 5.0, vervangen door Toolbar
  • Material 3 — Top App Bar met drie varianten: Center, Small, Medium, Large
  • Menu — XML-menu met action items, geïntegreerd in Toolbar via onCreateOptionsMenu
  • Aanpassing — titel, logo, navigatiepictogram, aangepaste weergaven en animaties

Wat is Toolbar?

Toolbar — Android-component uit de Material Design-bibliotheek (androidx.appcompat.widget.Toolbar), die een flexibele werkbalk biedt voor het applicatiescherm. Toolbar heeft de verouderde ActionBar vervangen en geeft ontwikkelaars volledige controle over het uiterlijk en gedrag. Het kan overal in de layout worden geplaatst, aangepaste kinderweergaven hebben, worden geanimeerd en aangepast aan verschillende schermformaten.

Material Design 3 (2026) definieert Top App Bar — de evolutie van Toolbar — met vier varianten: Small (compact, 48 dp), Center-aligned (gecentreerde titel), Medium (vergrote titel, 112 dp) en Large (grote titel, 168 dp). Elke variant heeft zijn eigen gedrag bij scrollen: Small blijft vast, Medium en Large krimpen naar Small bij het omhoog scrollen van inhoud.

Toolbar toont drie belangrijke zones: navigatiepictogram (links, meestal "hamburger" of "Terug"-pijl), schermtitel (midden of links) en action items (rechts — actiepictogrammen, overflow-menu). Toolbar kan logo, subtitle, aangepaste Views (search view, switch) en geanimeerde CollapsingToolbarLayout in combinatie met CoordinatorLayout bevatten.

ActionBar: geschiedenis en evolutie

ActionBar — Android-systeembalk die verscheen in Android 3.0 (API 11) als vervanging van de verouderde Title Bar. ActionBar was strak gekoppeld aan Activity, had een vaste positie bovenaan het scherm en beperkte aanpassingsmogelijkheden. Met de release van Android 5.0 (Lollipop, 2014) en de AppCompat-bibliotheek introduceerde Google Toolbar als flexibele vervanging.

Belangrijkste nadelen van ActionBar die Toolbar heeft opgelost: vaste positie (alleen bovenaan), onmogelijkheid van animatie, problemen met aangepaste weergaven, problemen met CoordinatorLayout en CollapsingToolbarLayout. Google verklaarde ActionBar officieel verouderd (deprecated) in 2015 en beveelt Toolbar aan voor alle nieuwe projecten. Vanaf Android 12 (2021) is ActionBar standaard uitgeschakeld in nieuwe Material 3-thema's.

KenmerkActionBarToolbar
PositieVaste bovenkantOveral in layout
AanpassingBeperkt (kleur, achtergrond)Volledig (weergaven, stijlen, animaties)
CollapsingNiet ondersteundCollapsingToolbarLayout
AnimatieAlleen systeemAlles (ObjectAnimator, Transition)
Material 3Niet ondersteundSmall / Medium / Large App Bar

Toolbar instellen in Android

Voor het gebruik van Toolbar moet u: (1) een thema zonder ActionBar instellen (Theme.Material3.NoActionBar of Theme.AppCompat.NoActionBar), (2) Toolbar toevoegen in XML layout, (3) deze instellen als ActionBar via setSupportActionBar. Hierna krijgt Toolbar alle functies van ActionBar: Menu-verwerking, navigatiepictogram, titel uit AndroidManifest.

xml
<!-- activity_main.xml met Toolbar -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        app:titleTextColor="@android:color/white"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar = findViewById<Toolbar>(R.id.toolbar)
        setSupportActionBar(toolbar)

        // Navigatiepictogram configureren
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Aangepaste titel
        supportActionBar?.title = "Startpagina"
        supportActionBar?.subtitle = "Hallo, gebruiker!"
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.toolbar_menu, menu)
        return true
    }
}

Menu integreren in Toolbar

Toolbar integreert met het Android Menu-systeem via de callbacks onCreateOptionsMenu en onOptionsItemSelected. Menu definieert action items — actiepictogrammen die rechts in de Toolbar worden weergegeven. Als action items niet passen, worden ze automatisch verplaatst naar het overflow-menu (drie puntjes). De ontwikkelaar beheert dit via het attribuut app:showAsAction: always, ifRoom, never.

xml
<!-- res/menu/toolbar_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="Zoeken"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Meldingen"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="Instellingen"
        app:showAsAction="never" />
</menu>
kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            Toast.makeText(this, "Zoeken", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_notifications -> {
            openNotifications()
            true
        }
        R.id.action_settings -> {
            openSettings()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Material 3: Center en Large Top App Bar

Material 3 introduceert vier varianten van Top App Bar: Small (compact, 48 dp), Center-aligned (gecentreerde titel), Medium (112 dp met vergrote titel) en Large (168 dp met grote titel). Medium en Large App Bar ondersteunen collapsible-gedrag — bij het omhoog scrollen van inhoud krimpen ze soepel naar Small. De animatie wordt beheerd door CoordinatorLayout en AppBarLayout.

Center-aligned Top App Bar — de nieuwe variant van Material 3, waarbij de titel in het midden van het paneel wordt geplaatst. Deze stijl wordt vaak gebruikt in Google-apps (Play Market, YouTube) en wordt aanbevolen voor schermen met een minimaal aantal action items. Small Top App Bar — klassieke Toolbar, compatibel met oudere Android-versies. Medium en Large zijn geschikt voor schermen waar de titel het belangrijkste element is (profiel, startpagina).

xml
<!-- Material 3 Large Top App Bar met CollapsingToolbarLayout -->
<CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="168dp"
            app:contentScrim="?attr/colorPrimary"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="Scherminhoud..." />
    </NestedScrollView>
</CoordinatorLayout>

Geavanceerde aanpassing van Toolbar

Toolbar ondersteunt volledige aanpassing: wijzigen van hoogte, animatie van tonen/verbergen, aangepaste kinder Views, logo, navigatiepictogram, PopupMenu en integratie met CoordinatorLayout. Voor verbergingsanimatie bij scrollen wordt AppBarLayout gebruikt met vlaggen scroll, enterAlways, snap. Voor het parallax-effect van de afbeelding onder Toolbar — CollapsingToolbarLayout met parallax-modus.

Logo en subtitle worden ingesteld via de methoden setLogo en setSubtitle. Het navigatiepictogram wordt geconfigureerd via setNavigationIcon en setNavigationOnClickListener. Aangepaste Views worden toegevoegd via addView rechtstreeks in Toolbar. Voor SearchView wordt MenuItem met actionViewClass gebruikt. Voor het donkere thema worden kleuren automatisch toegepast uit Material 3-attributen.

kotlin
// Geavanceerde aanpassing van Toolbar
with (toolbar) {
    // Logo en titel
    setLogo(R.drawable.ic_logo)
    setTitle("Mijn app")
    setSubtitle("Versie 2.0")

    // Navigatiepictogram met handler
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Aangepaste weergave — Switch voor thema
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

    // Aangepaste PopupMenu
    setOnMenuItemClickListener { item ->
        Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
        true
    }
}

Veelgestelde vragen

Wat is het verschil tussen Toolbar en ActionBar?

ActionBar — systeembalk Android 3.0–4.4 met beperkte aanpassing. Toolbar — flexibel Material Design-component dat overal in de layout kan worden geplaatst, geanimeerd en gevuld met aangepaste weergaven. Toolbar vervangt ActionBar volledig via setSupportActionBar.

Hoe verberg ik Toolbar bij scrollen?

Gebruik CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Stel de scroll-vlag in voor Toolbar in layout_scrollBehavior. Bij omlaag scrollen wordt Toolbar verborgen, bij omhoog scrollen verschijnt het met animatie. In Material 3 krimpt Medium/Large Top App Bar naar Small.

Hoeveel action items kunnen in Toolbar worden geplaatst?

De beperking is de fysieke breedte van het scherm. 2–4 action items (pictogrammen) worden aanbevolen. De rest wordt verplaatst naar het overflow-menu (drie puntjes). Configuratie via app:showAsAction: always (altijd tonen), ifRoom (als er ruimte is), never (in overflow).

Hoe voeg ik SearchView toe aan Toolbar?

SearchView wordt toegevoegd als action view in Menu. In XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView wordt automatisch ingeklapt tot het zoekpictogram en wordt uitgevouwen bij klik. Ondersteunt spraakgestuurd zoeken en automatisch aanvullen via SearchRecentSuggestionsProvider.

Wat is CollapsingToolbarLayout?

CollapsingToolbarLayout — container voor Toolbar die geanimeerd inkrimpt bij het scrollen van inhoud. Gebruikt met CoordinatorLayout en AppBarLayout. Ondersteunt modi: pin (vast), parallax (parallax-effect). Ideaal voor schermen met een afbeelding in de header (profiel, detailpagina).

Samenvatting

  • Toolbar — flexibele Android-werkbalk die ActionBar heeft vervangen en volledig is geïntegreerd met Material Design
  • Material 3 Top App Bar — vier varianten: Small, Center-aligned, Medium, Large met verschillend gedrag bij scrollen
  • ActionBar — verouderde systeembalk, beperkt in aanpassing en animatie
  • Menu en action items — integratie via XML-menu met vlaggen always/ifRoom/never voor zichtbaarheidsbeheer
  • CollapsingToolbarLayout — geanimeerd inkrimpen van Toolbar bij scrollen voor schermen met afbeelding in header
  • Aanpassing — logo, subtitle, aangepaste View, SearchView, PopupMenu en Material 3-kleuren
  • SearchView — ingebouwde action view voor zoeken met spraakinvoer en automatisch aanvullen

We ontwikkelen een mobiele applicatie turnkey

IT Sectr creëert sinds 2017 iOS- en Android-applicaties voor startups en bedrijven. We adviseren u en stellen de beste oplossing voor.

Bespreek het project

Lees ook