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 — 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 — 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.
| Kenmerk | ActionBar | Toolbar |
|---|---|---|
| Positie | Vaste bovenkant | Overal in layout |
| Aanpassing | Beperkt (kleur, achtergrond) | Volledig (weergaven, stijlen, animaties) |
| Collapsing | Niet ondersteund | CollapsingToolbarLayout |
| Animatie | Alleen systeem | Alles (ObjectAnimator, Transition) |
| Material 3 | Niet ondersteund | Small / Medium / Large App Bar |
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.
<!-- 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>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
}
}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.
<!-- 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>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 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).
<!-- 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>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.
// 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
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.
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.
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).
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.
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
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.
Lees ook