Toolbar: esența, bara de instrumente în aplicațiile Android

Autor: IT Sectr Publicat: 2026-02-23 Timp de citire: 12 min

Toolbar (bara de instrumente) — componenta Android care a înlocuit ActionBar, afișând titlul ecranului, elementele de navigare și acțiunile. Toolbar face parte din Material Design Library și este complet personalizabil: de la titlu standard la vizualizări personalizate și pictograme animate. Citiți mai multe despre componentă în specificația Material Design 3.

Principalele puncte

  • Toolbar — bara de instrumente personalizabilă Android, succesoarea ActionBar din Material Design
  • ActionBar — bara de sistem care a existat înainte de Android 5.0, înlocuită de Toolbar
  • Material 3 — Top App Bar cu trei variante: Center, Small, Medium, Large
  • Menu — meniu XML cu action items, integrat în Toolbar prin onCreateOptionsMenu
  • Personalizare — titlu, logo, pictogramă de navigare, vizualizări personalizate și animații

Ce este Toolbar?

Toolbar — componenta Android din biblioteca Material Design (androidx.appcompat.widget.Toolbar), care oferă o bară de instrumente flexibilă pentru ecranul aplicației. Toolbar a înlocuit ActionBar învechit, oferind dezvoltatorilor control complet asupra aspectului și comportamentului. Poate fi plasat oriunde în layout, poate avea vizualizări copil personalizate, poate fi animat și adaptat la diferite dimensiuni de ecran.

Material Design 3 (2026) definește Top App Bar — evoluția Toolbar — cu patru variante: Small (compact, 48 dp), Center-aligned (titlu centrat), Medium (titlu mărit, 112 dp) și Large (titlu mare, 168 dp). Fiecare variantă are propriul comportament la derulare: Small rămâne fix, Medium și Large se compactează la Small la derularea conținutului în sus.

Toolbar afișează trei zone cheie: pictograma de navigare (stânga, de obicei „hamburger" sau săgeata „Înapoi"), titlul ecranului (centru sau stânga) și action items (dreapta — pictograme de acțiuni, meniul overflow). Toolbar poate conține logo, subtitle, View-uri personalizate (search view, switch) și CollapsingToolbarLayout animat în combinație cu CoordinatorLayout.

ActionBar: istorie și evoluție

ActionBar — bara de sistem Android care a apărut în Android 3.0 (API 11) ca înlocuitor al Title Bar învechit. ActionBar era strict legat de Activity, avea o poziție fixă în partea de sus a ecranului și posibilități limitate de personalizare. Odată cu lansarea Android 5.0 (Lollipop, 2014) și a bibliotecii AppCompat, Google a prezentat Toolbar ca înlocuitor flexibil.

Principalele neajunsuri ale ActionBar pe care Toolbar le-a rezolvat: poziție fixă (doar sus), imposibilitatea animației, dificultăți cu vizualizări personalizate, probleme cu CoordinatorLayout și CollapsingToolbarLayout. Google a declarat oficial ActionBar deprecated în 2015 și recomandă Toolbar pentru toate proiectele noi. Începând cu Android 12 (2021), ActionBar este dezactivat implicit în temele noi Material 3.

CaracteristicăActionBarToolbar
PozițieSus fixOriunde în layout
PersonalizareLimitată (culoare, fundal)Completă (vizualizări, stiluri, animații)
CollapsingNeacceptatCollapsingToolbarLayout
AnimațieDoar sistemicăOrice (ObjectAnimator, Transition)
Material 3NeacceptatSmall / Medium / Large App Bar

Configurarea Toolbar în Android

Pentru a utiliza Toolbar trebuie: (1) să setați o temă fără ActionBar (Theme.Material3.NoActionBar sau Theme.AppCompat.NoActionBar), (2) să adăugați Toolbar în XML layout, (3) să îl setați ca ActionBar prin setSupportActionBar. După aceasta, Toolbar primește toate funcțiile ActionBar: procesarea Menu, pictograma de navigare, titlul din AndroidManifest.

xml
<!-- activity_main.xml cu 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)

        // Configurarea pictogramei de navigare
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Titlu personalizat
        supportActionBar?.title = "Pagina principală"
        supportActionBar?.subtitle = "Salut, utilizatorule!"
    }

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

Integrarea Menu în Toolbar

Toolbar se integrează cu sistemul Android Menu prin callback-urile onCreateOptionsMenu și onOptionsItemSelected. Menu definește action items — pictograme de acțiuni afișate în dreapta în Toolbar. Dacă action items nu încap, acestea sunt mutate automat în meniul overflow (trei puncte). Dezvoltatorul controlează acest lucru prin atributul 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="Căutare"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

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

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

Material 3: Center și Large Top App Bar

Material 3 introduce patru variante de Top App Bar: Small (compact, 48 dp), Center-aligned (titlu centrat), Medium (112 dp cu titlu mărit) și Large (168 dp cu titlu mare). Medium și Large App Bar suportă comportament collapsible — la derularea conținutului în sus, se comprimă lin până la Small. Animația este gestionată de CoordinatorLayout și AppBarLayout.

Center-aligned Top App Bar — noua variantă Material 3, în care titlul este plasat în centrul panoului. Acest stil este adesea folosit în aplicațiile Google (Play Market, YouTube) și este recomandat pentru ecrane cu un număr minim de action items. Small Top App Bar — Toolbar clasic, compatibil cu versiunile vechi de Android. Medium și Large sunt potrivite pentru ecranele unde titlul este elementul cheie (profil, pagină principală).

xml
<!-- Material 3 Large Top App Bar cu 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="Conținutul ecranului..." />
    </NestedScrollView>
</CoordinatorLayout>

Personalizarea avansată a Toolbar

Toolbar suportă personalizare completă: modificarea înălțimii, animația apariției/ascunderii, View-uri copil personalizate, logo, pictogramă de navigare, PopupMenu și integrare cu CoordinatorLayout. Pentru animația de ascundere la derulare se folosește AppBarLayout cu flag-urile scroll, enterAlways, snap. Pentru efectul de paralaxă al imaginii sub Toolbar — CollapsingToolbarLayout cu modul parallax.

Logo și subtitle se setează prin metodele setLogo și setSubtitle. Pictograma de navigare se configurează prin setNavigationIcon și setNavigationOnClickListener. View-urile personalizate se adaugă prin addView direct în Toolbar. Pentru SearchView se folosește MenuItem cu actionViewClass. Pentru tema întunecată, culorile se aplică automat din atributele Material 3.

kotlin
// Personalizarea avansată a Toolbar
with (toolbar) {
    // Logo și titlu
    setLogo(R.drawable.ic_logo)
    setTitle("Aplicația mea")
    setSubtitle("Versiunea 2.0")

    // Pictogramă de navigare cu handler
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Vizualizare personalizată — Switch pentru temă
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

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

Întrebări frecvente

Care este diferența dintre Toolbar și ActionBar?

ActionBar — bara de sistem Android 3.0–4.4 cu personalizare limitată. Toolbar — componenta flexibilă Material Design care poate fi plasată oriunde în layout, animată și umplută cu vizualizări personalizate. Toolbar înlocuiește complet ActionBar prin setSupportActionBar.

Cum se ascunde Toolbar la derulare?

Utilizați CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Configurați flag-ul scroll pentru Toolbar în layout_scrollBehavior. La derularea în jos, Toolbar se ascunde, la derularea în sus, apare cu animație. În Material 3, Medium/Large Top App Bar se comprimă la Small.

Câte action items pot fi plasate în Toolbar?

Limitarea este lățimea fizică a ecranului. Se recomandă 2–4 action items (pictograme). Restul sunt mutate în meniul overflow (trei puncte). Configurare prin app:showAsAction: always (afișează întotdeauna), ifRoom (dacă este loc), never (în overflow).

Cum se adaugă SearchView în Toolbar?

SearchView se adaugă ca action view în Menu. În XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView se comprimă automat în pictograma de căutare și se extinde la clic. Suportă căutare vocală și autocompletare prin SearchRecentSuggestionsProvider.

Ce este CollapsingToolbarLayout?

CollapsingToolbarLayout — container pentru Toolbar care se comprimă animat la derularea conținutului. Folosit cu CoordinatorLayout și AppBarLayout. Suportă modurile: pin (fix), parallax (efect de paralaxă). Ideal pentru ecrane cu imagine în antet (profil, pagină de detalii).

Concluzii

  • Toolbar — bara de instrumente flexibilă Android care a înlocuit ActionBar și este complet integrată cu Material Design
  • Material 3 Top App Bar — patru variante: Small, Center-aligned, Medium, Large cu comportament diferit la derulare
  • ActionBar — bara de sistem învechită, limitată în personalizare și animație
  • Menu și action items — integrare prin meniu XML cu flag-uri always/ifRoom/never pentru gestionarea vizibilității
  • CollapsingToolbarLayout — comprimarea animată a Toolbar la derulare pentru ecrane cu imagine în antet
  • Personalizare — logo, subtitle, View personalizate, SearchView, PopupMenu și culori Material 3
  • SearchView — action view încorporat pentru căutare cu intrare vocală și autocompletare

Vom dezvolta o aplicație mobilă la cheie

IT Sectr creează aplicații iOS și Android pentru startup-uri și afaceri din 2017. Vă vom consilia și vă vom propune cea mai bună soluție.

Discutați proiectul

Citiți și