Toolbar: la barra degli strumenti nelle applicazioni Android

Autore: IT Sectr Pubblicato: 2026-02-23 Tempo di lettura: 12 min

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 è una barra degli strumenti Android personalizzabile, successore di ActionBar di Material Design
  • ActionBar è la barra di sistema che esisteva prima di Android 5.0, sostituita da Toolbar
  • Material 3 — Top App Bar con quattro varianti: Small, Center-aligned, Medium, Large
  • Menu — menu XML con action items, integrato in Toolbar tramite onCreateOptionsMenu
  • Personalizzazione — titolo, logo, icona di navigazione, viste personalizzate e animazioni

Cos'è Toolbar?

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: storia ed evoluzione

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.

CaratteristicaActionBarToolbar
PosizioneFissa in altoOvunque nel layout
PersonalizzazioneLimitata (colore, sfondo)Completa (viste, stili, animazioni)
CompressioneNon supportataCollapsingToolbarLayout
AnimazioneSolo di sistemaQualsiasi (ObjectAnimator, Transition)
Material 3Non supportatoSmall / Medium / Large App Bar

Configurare Toolbar in Android

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.

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

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

Integrare Menu in Toolbar

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.

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

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

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

Personalizzazione avanzata di Toolbar

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.

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

Qual è la differenza tra Toolbar e ActionBar?

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.

Come nascondere Toolbar durante lo scorrimento?

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.

Quanti action items si possono posizionare in Toolbar?

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

Come aggiungere SearchView a Toolbar?

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.

Cos'è CollapsingToolbarLayout?

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

  • Toolbar è una barra degli strumenti Android flessibile che ha sostituito ActionBar ed è completamente integrata con Material Design
  • Material 3 Top App Bar — quattro varianti: Small, Center-aligned, Medium, Large con diverso comportamento di scorrimento
  • ActionBar è una barra di sistema obsoleta, limitata in personalizzazione e animazione
  • Menu e action items — integrazione tramite menu XML con flag always/ifRoom/never per il controllo della visibilità
  • CollapsingToolbarLayout — compressione animata di Toolbar durante lo scorrimento per schermi con immagine di intestazione
  • Personalizzazione — logo, sottotitolo, viste personalizzate, SearchView, PopupMenu e colori Material 3
  • SearchView — action view integrata per la ricerca con input vocale e autocompletamento

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.

Discuti il progetto

Leggi anche