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 — 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 — 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ă | ActionBar | Toolbar |
|---|---|---|
| Poziție | Sus fix | Oriunde în layout |
| Personalizare | Limitată (culoare, fundal) | Completă (vizualizări, stiluri, animații) |
| Collapsing | Neacceptat | CollapsingToolbarLayout |
| Animație | Doar sistemică | Orice (ObjectAnimator, Transition) |
| Material 3 | Neacceptat | Small / Medium / Large App Bar |
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.
<!-- 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>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
}
}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.
<!-- 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>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 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ă).
<!-- 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>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.
// 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
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.
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.
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).
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.
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
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.
Citiți și