Toolbar: essens, verktygsfält i Android-applikationer

Författare: IT Sectr Publicerad: 2026-02-23 Lästid: 12 min

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 — anpassningsbart Android-verktygsfält, efterträdare till ActionBar från Material Design
  • ActionBar — systemfält som fanns före Android 5.0, ersatt av Toolbar
  • Material 3 — Top App Bar med tre varianter: Center, Small, Medium, Large
  • Menu — XML-meny med action items, integrerad i Toolbar via onCreateOptionsMenu
  • Anpassning — titel, logotyp, navigeringsikon, anpassade vyer och animationer

Vad är Toolbar?

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: historia och evolution

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.

FunktionActionBarToolbar
PositionFast toppVar som helst i layout
AnpassningBegränsad (färg, bakgrund)Full (vyer, stilar, animationer)
CollapsingStöds inteCollapsingToolbarLayout
AnimationEndast systemValfri (ObjectAnimator, Transition)
Material 3Stöds inteSmall / Medium / Large App Bar

Konfigurera Toolbar i Android

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.

xml
<!-- 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>
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)

        // 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
    }
}

Integrera Menu i Toolbar

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.

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="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>
kotlin
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: Center och Large Top App Bar

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).

xml
<!-- 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>

Avancerad anpassning av Toolbar

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.

kotlin
// 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

Vad är skillnaden mellan Toolbar och ActionBar?

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.

Hur döljer man Toolbar vid scrolling?

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.

Hur många action items kan placeras i Toolbar?

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).

Hur lägger man till SearchView i Toolbar?

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.

Vad är CollapsingToolbarLayout?

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

  • Toolbar — flexibelt Android-verktygsfält som ersatte ActionBar och är helt integrerat med Material Design
  • Material 3 Top App Bar — fyra varianter: Small, Center-aligned, Medium, Large med olika beteende vid scrolling
  • ActionBar — föråldrat systemfält, begränsat i anpassning och animation
  • Menu och action items — integration via XML-meny med flaggor always/ifRoom/never för synlighetshantering
  • CollapsingToolbarLayout — animerad krympning av Toolbar vid scrolling för skärmar med bild i sidhuvudet
  • Anpassning — logotyp, subtitle, anpassad View, SearchView, PopupMenu och Material 3-färger
  • SearchView — inbyggd action view för sökning med röstinmatning och autokomplettering

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.

Diskutera projektet

Läs också