Toolbar (barra degli strumenti) è un componente Android che ha sostituito ActionBar, visualizzando il titolo dello schermo, elementi di navigazione e azioni. Toolbar fa parte di Material Design Library ed è completamente personalizzabile: da un titolo standard a viste personalizzate e icone animate. Maggiori informazioni sul componente nella specifica di Material Design 3.
Punti chiave
Toolbar è un componente Android della libreria Material Design (androidx.appcompat.widget.Toolbar) che fornisce una barra degli strumenti flessibile per lo schermo dell'app. Toolbar ha sostituito la obsoleta ActionBar, dando agli sviluppatori il controllo completo su aspetto e comportamento. Può essere posizionata ovunque nel layout, avere viste figlie personalizzate, essere animata e adattarsi a diverse dimensioni dello schermo.
Material Design 3 (2026) definisce la Top App Bar — l'evoluzione di Toolbar — con quattro varianti: Small (compatta, 48 dp), Center-aligned (titolo centrato), Medium (titolo ingrandito, 112 dp) e Large (titolo grande, 168 dp). Ogni variante ha il proprio comportamento di scorrimento: Small rimane fissa, Medium e Large si comprimono in Small scorrendo il contenuto verso l'alto.
Toolbar mostra tre zone chiave: l'icona di navigazione (sinistra, di solito un menu hamburger o freccia Indietro), il titolo dello schermo (centro o sinistra) e gli action items (destra — icone di azione, menu overflow). Toolbar può contenere un logo, sottotitolo, viste personalizzate (search view, switch) e il CollapsingToolbarLayout animato in combinazione con CoordinatorLayout.
ActionBar è una barra di sistema Android apparsa in Android 3.0 (API 11) come sostituto della obsoleta Title Bar. ActionBar era strettamente legata ad Activity, aveva una posizione fissa nella parte superiore dello schermo e opzioni di personalizzazione limitate. Con il rilascio di Android 5.0 (Lollipop, 2014) e della libreria AppCompat, Google ha introdotto Toolbar come alternativa flessibile.
I principali difetti di ActionBar che Toolbar ha risolto: posizione fissa (solo in alto), impossibilità di animazione, difficoltà con viste personalizzate, problemi con CoordinatorLayout e CollapsingToolbarLayout. Google ha dichiarato ufficialmente ActionBar obsoleto (deprecated) nel 2015 e raccomanda Toolbar per tutti i nuovi progetti. A partire da Android 12 (2021), ActionBar è disabilitato per impostazione predefinita nei nuovi temi Material 3.
| Caratteristica | ActionBar | Toolbar |
|---|---|---|
| Posizione | Fissa in alto | Ovunque nel layout |
| Personalizzazione | Limitata (colore, sfondo) | Completa (viste, stili, animazioni) |
| Compressione | Non supportata | CollapsingToolbarLayout |
| Animazione | Solo di sistema | Qualsiasi (ObjectAnimator, Transition) |
| Material 3 | Non supportato | Small / Medium / Large App Bar |
Per utilizzare Toolbar è necessario: (1) impostare un tema senza ActionBar (Theme.Material3.NoActionBar o Theme.AppCompat.NoActionBar), (2) aggiungere Toolbar al layout XML, (3) impostarlo come ActionBar tramite setSupportActionBar. Dopodiché, Toolbar ottiene tutte le funzionalità di ActionBar: gestione del Menu, icona di navigazione, titolo da AndroidManifest.
<!-- activity_main.xml con 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)
// Configurazione icona di navigazione
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)
// Titolo personalizzato
supportActionBar?.title = "Home"
supportActionBar?.subtitle = "Ciao, utente!"
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
menuInflater.inflate(R.menu.toolbar_menu, menu)
return true
}
}Toolbar si integra con il sistema Menu di Android tramite i callback onCreateOptionsMenu e onOptionsItemSelected. Il Menu definisce gli action items — icone di azione visualizzate a destra in Toolbar. Se gli action items non entrano, si spostano automaticamente nel menu overflow (tre punti). Lo sviluppatore controlla questo tramite l'attributo 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="Cerca"
app:showAsAction="ifRoom"
app:actionViewClass="androidx.appcompat.widget.SearchView" />
<item
android:id="@+id/action_notifications"
android:icon="@drawable/ic_notifications"
android:title="Notifiche"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_settings"
android:title="Impostazioni"
app:showAsAction="never" />
</menu>override fun onOptionsItemSelected(item: MenuItem): Boolean {
return when (item.itemId) {
R.id.action_search -> {
Toast.makeText(this, "Cerca", Toast.LENGTH_SHORT).show()
true
}
R.id.action_notifications -> {
openNotifications()
true
}
R.id.action_settings -> {
openSettings()
true
}
else -> super.onOptionsItemSelected(item)
}
}Material 3 introduce quattro varianti di Top App Bar: Small (compatta, 48 dp), Center-aligned (titolo centrato), Medium (112 dp con titolo ingrandito) e Large (168 dp con titolo grande). Medium e Large App Bar supportano il comportamento comprimibile — scorrendo il contenuto verso l'alto, si comprimono dolcemente in Small. L'animazione è controllata tramite CoordinatorLayout e AppBarLayout.
Center-aligned Top App Bar è una nuova variante di Material 3 in cui il titolo è posizionato al centro della barra. Questo stile è spesso utilizzato nelle app Google (Play Store, YouTube) ed è raccomandato per schermi con un numero minimo di action items. Small Top App Bar è la Toolbar classica, compatibile con le vecchie versioni di Android. Medium e Large sono adatti per schermi dove il titolo è un elemento chiave (profilo, pagina principale).
<!-- Material 3 Large Top App Bar con 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="Contenuto dello schermo..." />
</NestedScrollView>
</CoordinatorLayout>Toolbar supporta la personalizzazione completa: modifica dell'altezza, animazioni di comparsa/scomparsa, viste figlie personalizzate, logo, icona di navigazione, PopupMenu e integrazione con CoordinatorLayout. Per l'animazione di scomparsa durante lo scorrimento, si usa AppBarLayout con i flag scroll, enterAlways, snap. Per l'effetto parallasse dell'immagine sotto Toolbar — CollapsingToolbarLayout con mode parallax.
Il logo e il sottotitolo vengono impostati tramite i metodi setLogo e setSubtitle. L'icona di navigazione viene configurata tramite setNavigationIcon e setNavigationOnClickListener. Le viste personalizzate vengono aggiunte tramite addView direttamente in Toolbar. Per SearchView, si usa MenuItem con actionViewClass. Per il tema scuro, i colori degli attributi Material 3 vengono applicati automaticamente.
// Personalizzazione avanzata di Toolbar
with (toolbar) {
// Logo e titolo
setLogo(R.drawable.ic_logo)
setTitle("La mia app")
setSubtitle("Versione 2.0")
// Icona di navigazione con gestore
setNavigationIcon(R.drawable.ic_drawer)
setNavigationOnClickListener {
drawerLayout.open()
}
// Vista personalizzata — Switch per tema
val themeSwitch = Switch(this@MainActivity).apply {\n thumbDrawable = ContextCompat.getDrawable(
this@MainActivity, R.drawable.ic_theme
)
}
addView(themeSwitch)
// PopupMenu personalizzato
setOnMenuItemClickListener { item ->
Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
true
}
}Domande frequenti
ActionBar è una barra di sistema di Android 3.0–4.4 con personalizzazione limitata. Toolbar è un componente flessibile di Material Design che può essere posizionato ovunque nel layout, animato e riempito con viste personalizzate. Toolbar sostituisce completamente ActionBar tramite setSupportActionBar.
Usa CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Imposta il flag scroll per Toolbar in layout_scrollBehavior. Scorrendo verso il basso, Toolbar si nasconde; scorrendo verso l'alto, appare con animazione. In Material 3, Medium/Large Top App Bar si comprime in Small.
Il limite è la larghezza fisica dello schermo. Si raccomandano 2–4 action items (icone). Il resto si sposta nel menu overflow (tre punti). Configurazione tramite app:showAsAction: always (mostra sempre), ifRoom (se c'è spazio), never (in overflow).
SearchView viene aggiunto come action view nel Menu. Nel menu XML: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView si comprime automaticamente in un'icona di ricerca e si espande al tocco. Supporta la ricerca vocale e l'autocompletamento tramite SearchRecentSuggestionsProvider.
CollapsingToolbarLayout è un contenitore per Toolbar che si comprime con animazione durante lo scorrimento del contenuto. Si usa con CoordinatorLayout e AppBarLayout. Supporta le modalità: pin (fissa), parallax (effetto parallasse). Ideale per schermi con immagine di intestazione (profilo, pagina di dettaglio).
Riepilogo
Svilupperemo un'applicazione mobile chiavi in mano
IT Sectr crea applicazioni iOS e Android per startup e aziende dal 2017. Ti consulteremo e ti proporremo la soluzione migliore.
Leggi anche