Toolbar (verktygsfält) — Android-komponent som ersatte ActionBar, visar skärmens titel, navigeringselement och åtgärder. Toolbar ingår i Material Design Library och är helt anpassningsbar: från standardtitel till anpassade vyer och animerade ikoner. Läs mer om komponenten i specifikationen för Material Design 3.
Huvudpunkter
Toolbar — Android-komponent från Material Design-biblioteket (androidx.appcompat.widget.Toolbar), som ger ett flexibelt verktygsfält för applikationsskärmen. Toolbar ersatte den föråldrade ActionBar och ger utvecklare full kontroll över utseende och beteende. Kan placeras var som helst i layouten, ha anpassade underordnade vyer, animeras och anpassas till olika skärmstorlekar.
Material Design 3 (2026) definierar Top App Bar — evolutionen av Toolbar — med fyra varianter: Small (kompakt, 48 dp), Center-aligned (centrerad titel), Medium (förstorad titel, 112 dp) och Large (stor titel, 168 dp). Varje variant har sitt eget beteende vid scrolling: Small förblir fixerad, Medium och Large krymper till Small när innehåll rullas uppåt.
Toolbar visar tre nyckelzoner: navigeringsikon (vänster, vanligtvis "hamburgare" eller "Tillbaka"-pil), skärmtitel (mitt eller vänster) och action items (höger — åtgärdsikoner, overflow-meny). Toolbar kan innehålla logotyp, subtitle, anpassade View (search view, switch) och animerad CollapsingToolbarLayout i kombination med CoordinatorLayout.
ActionBar — Android-systemfält som dök upp i Android 3.0 (API 11) som ersättning för den föråldrade Title Bar. ActionBar var tätt knuten till Activity, hade en fast position överst på skärmen och begränsade anpassningsmöjligheter. Med lanseringen av Android 5.0 (Lollipop, 2014) och AppCompat-biblioteket introducerade Google Toolbar som flexibel ersättning.
De främsta nackdelarna med ActionBar som Toolbar löste: fast position (endast överst), omöjlighet att animera, svårigheter med anpassade vyer, problem med CoordinatorLayout och CollapsingToolbarLayout. Google förklarade officiellt ActionBar som föråldrad (deprecated) 2015 och rekommenderar Toolbar för alla nya projekt. Från och med Android 12 (2021) är ActionBar som standard inaktiverad i nya Material 3-teman.
| Funktion | ActionBar | Toolbar |
|---|---|---|
| Position | Fast topp | Var som helst i layout |
| Anpassning | Begränsad (färg, bakgrund) | Full (vyer, stilar, animationer) |
| Collapsing | Stöds inte | CollapsingToolbarLayout |
| Animation | Endast system | Valfri (ObjectAnimator, Transition) |
| Material 3 | Stöds inte | Small / Medium / Large App Bar |
För att använda Toolbar måste du: (1) ställa in ett tema utan ActionBar (Theme.Material3.NoActionBar eller Theme.AppCompat.NoActionBar), (2) lägga till Toolbar i XML-layout, (3) ställa in den som ActionBar via setSupportActionBar. Därefter får Toolbar alla funktioner från ActionBar: Menu-bearbetning, navigeringsikon, titel från AndroidManifest.
<!-- activity_main.xml med 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)
// Konfigurera navigeringsikon
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)
// Anpassad titel
supportActionBar?.title = "Hemsida"
supportActionBar?.subtitle = "Hej, användare!"
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
menuInflater.inflate(R.menu.toolbar_menu, menu)
return true
}
}Toolbar integreras med Android Menu-systemet via callbacks onCreateOptionsMenu och onOptionsItemSelected. Menu definierar action items — åtgärdsikoner som visas till höger i Toolbar. Om action items inte får plats flyttas de automatiskt till overflow-menyn (tre punkter). Utvecklaren styr detta via attributet 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="Sök"
app:showAsAction="ifRoom"
app:actionViewClass="androidx.appcompat.widget.SearchView" />
<item
android:id="@+id/action_notifications"
android:icon="@drawable/ic_notifications"
android:title="Meddelanden"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_settings"
android:title="Inställningar"
app:showAsAction="never" />
</menu>override fun onOptionsItemSelected(item: MenuItem): Boolean {
return when (item.itemId) {
R.id.action_search -> {
Toast.makeText(this, "Sök", Toast.LENGTH_SHORT).show()
true
}
R.id.action_notifications -> {
openNotifications()
true
}
R.id.action_settings -> {
openSettings()
true
}
else -> super.onOptionsItemSelected(item)
}
}Material 3 introducerar fyra varianter av Top App Bar: Small (kompakt, 48 dp), Center-aligned (centrerad titel), Medium (112 dp med förstorad titel) och Large (168 dp med stor titel). Medium och Large App Bar stöder collapsible-beteende — när innehåll rullas uppåt krymper de mjukt till Small. Animationen hanteras av CoordinatorLayout och AppBarLayout.
Center-aligned Top App Bar — ny variant av Material 3, där titeln placeras i mitten av panelen. Denna stil används ofta i Google-appar (Play Market, YouTube) och rekommenderas för skärmar med minimalt antal action items. Small Top App Bar — klassisk Toolbar, kompatibel med äldre Android-versioner. Medium och Large passar för skärmar där titeln är nyckelelementet (profil, startsida).
<!-- Material 3 Large Top App Bar med 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="Skärminnehåll..." />
</NestedScrollView>
</CoordinatorLayout>Toolbar stöder full anpassning: ändring av höjd, animationsvisning/döljning, anpassade underordnade View, logotyp, navigeringsikon, PopupMenu och integration med CoordinatorLayout. För döljningsanimation vid scrolling används AppBarLayout med flaggorna scroll, enterAlways, snap. För parallaxeffekt av bilden under Toolbar — CollapsingToolbarLayout med parallax-läge.
Logotyp och subtitle ställs in via metoderna setLogo och setSubtitle. Navigeringsikonen konfigureras via setNavigationIcon och setNavigationOnClickListener. Anpassade View läggs till via addView direkt i Toolbar. För SearchView används MenuItem med actionViewClass. För mörkt tema appliceras färger automatiskt från Material 3-attribut.
// Avancerad anpassning av Toolbar
with (toolbar) {
// Logotyp och titel
setLogo(R.drawable.ic_logo)
setTitle("Min app")
setSubtitle("Version 2.0")
// Navigeringsikon med hanterare
setNavigationIcon(R.drawable.ic_drawer)
setNavigationOnClickListener {
drawerLayout.open()
}
// Anpassad vy — Switch för tema
val themeSwitch = Switch(this@MainActivity).apply {\n thumbDrawable = ContextCompat.getDrawable(
this@MainActivity, R.drawable.ic_theme
)
}
addView(themeSwitch)
// Anpassad PopupMenu
setOnMenuItemClickListener { item ->
Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
true
}
}Vanliga frågor
ActionBar — systemfält Android 3.0–4.4 med begränsad anpassning. Toolbar — flexibel Material Design-komponent som kan placeras var som helst i layouten, animeras och fyllas med anpassade vyer. Toolbar ersätter helt ActionBar via setSupportActionBar.
Använd CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Ställ in scroll-flaggan för Toolbar i layout_scrollBehavior. Vid scrolling nedåt döljs Toolbar, vid scrolling uppåt visas den med animation. I Material 3 krymper Medium/Large Top App Bar till Small.
Begränsningen är skärmens fysiska bredd. 2–4 action items (ikoner) rekommenderas. Resten flyttas till overflow-menyn (tre punkter). Konfiguration via app:showAsAction: always (visa alltid), ifRoom (om det finns plats), never (i overflow).
SearchView läggs till som action view i Menu. I XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView fälls automatiskt ihop till sökikonen och expanderas vid klick. Stöder röstsökning och autokomplettering via SearchRecentSuggestionsProvider.
CollapsingToolbarLayout — behållare för Toolbar som animerat krymper vid scrolling av innehåll. Används med CoordinatorLayout och AppBarLayout. Stöder lägen: pin (fast), parallax (parallaxeffekt). Idealisk för skärmar med bild i sidhuvudet (profil, detaljsida).
Sammanfattning
Vi utvecklar en mobil applikation nyckelfärdigt
IT Sectr skapar iOS- och Android-applikationer för startups och företag sedan 2017. Vi ger dig råd och föreslår den bästa lösningen.
Läs också