Toolbar : la barre d'outils dans les applications Android

Auteur : IT Sectr Publié le : 2026-02-23 Temps de lecture : 12 min

Toolbar (barre d'outils) est un composant Android qui a remplacé ActionBar, affichant le titre de l'écran, les éléments de navigation et les actions. Toolbar fait partie de Material Design Library et est entièrement personnalisable : d'un titre standard à des vues personnalisées et des icônes animées. En savoir plus sur le composant dans la spécification Material Design 3.

Points clés

  • Toolbar est une barre d'outils Android personnalisable, successeur d'ActionBar de Material Design
  • ActionBar est la barre système qui existait avant Android 5.0, remplacée par Toolbar
  • Material 3 — Top App Bar avec quatre variantes : Small, Center-aligned, Medium, Large
  • Menu — menu XML avec action items, intégré dans Toolbar via onCreateOptionsMenu
  • Personnalisation — titre, logo, icône de navigation, vues personnalisées et animations

Qu'est-ce que Toolbar ?

Toolbar est un composant Android de la bibliothèque Material Design (androidx.appcompat.widget.Toolbar) qui fournit une barre d'outils flexible pour l'écran de l'application. Toolbar a remplacé l'ancienne ActionBar, offrant aux développeurs un contrôle total sur l'apparence et le comportement. Elle peut être placée n'importe où dans le layout, avoir des vues enfants personnalisées, être animée et s'adapter à différentes tailles d'écran.

Material Design 3 (2026) définit la Top App Bar — l'évolution de Toolbar — avec quatre variantes : Small (compacte, 48 dp), Center-aligned (titre centré), Medium (titre agrandi, 112 dp) et Large (grand titre, 168 dp). Chaque variante a son propre comportement de défilement : Small reste fixe, Medium et Large se replient en Small lors du défilement vers le haut.

Toolbar affiche trois zones clés : l'icône de navigation (à gauche, généralement un menu hamburger ou une flèche Retour), le titre de l'écran (au centre ou à gauche) et les action items (à droite — icônes d'action, menu overflow). Toolbar peut contenir un logo, un sous-titre, des vues personnalisées (search view, switch) et le CollapsingToolbarLayout animé en combinaison avec CoordinatorLayout.

ActionBar : histoire et évolution

ActionBar est une barre système Android apparue dans Android 3.0 (API 11) en remplacement de l'ancienne Title Bar. ActionBar était étroitement liée à Activity, avait une position fixe en haut de l'écran et des options de personnalisation limitées. Avec la sortie d'Android 5.0 (Lollipop, 2014) et de la bibliothèque AppCompat, Google a introduit Toolbar comme une alternative flexible.

Les principaux inconvénients d'ActionBar que Toolbar a résolus : position fixe (uniquement en haut), impossibilité d'animation, difficulté avec les vues personnalisées, problèmes avec CoordinatorLayout et CollapsingToolbarLayout. Google a officiellement déclaré ActionBar obsolète (deprecated) en 2015 et recommande Toolbar pour tous les nouveaux projets. À partir d'Android 12 (2021), ActionBar est désactivé par défaut dans les nouveaux thèmes Material 3.

CaractéristiqueActionBarToolbar
PositionFixe en hautN'importe où dans le layout
PersonnalisationLimitée (couleur, fond)Complète (vues, styles, animations)
RepliNon supportéCollapsingToolbarLayout
AnimationSystème uniquementQuelconque (ObjectAnimator, Transition)
Material 3Non supportéSmall / Medium / Large App Bar

Configurer Toolbar dans Android

Pour utiliser Toolbar, il faut : (1) définir un thème sans ActionBar (Theme.Material3.NoActionBar ou Theme.AppCompat.NoActionBar), (2) ajouter Toolbar au layout XML, (3) la définir comme ActionBar via setSupportActionBar. Ensuite, Toolbar obtient toutes les fonctionnalités d'ActionBar : gestion du Menu, icône de navigation, titre depuis AndroidManifest.

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

        // Configuration de l'icône de navigation
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Titre personnalisé
        supportActionBar?.title = "Accueil"
        supportActionBar?.subtitle = "Bonjour, utilisateur !"
    }

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

Intégrer le Menu dans Toolbar

Toolbar s'intègre au système de Menu Android via les callbacks onCreateOptionsMenu et onOptionsItemSelected. Le Menu définit les action items — des icônes d'action affichées à droite dans Toolbar. Si les action items ne tiennent pas, ils se déplacent automatiquement dans le menu overflow (trois points). Le développeur contrôle cela via l'attribut 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="Rechercher"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

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

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

Material 3 : Center et Large Top App Bar

Material 3 introduit quatre variantes de Top App Bar : Small (compacte, 48 dp), Center-aligned (titre centré), Medium (112 dp avec titre agrandi) et Large (168 dp avec grand titre). Medium et Large App Bar supportent le comportement repliable — lors du défilement vers le haut, elles se replient doucement en Small. L'animation est contrôlée via CoordinatorLayout et AppBarLayout.

Center-aligned Top App Bar est une nouvelle variante de Material 3 où le titre est positionné au centre de la barre. Ce style est souvent utilisé dans les applications Google (Play Store, YouTube) et est recommandé pour les écrans avec un nombre minimal d'action items. Small Top App Bar est la Toolbar classique, compatible avec les anciennes versions d'Android. Medium et Large conviennent aux écrans où le titre est un élément clé (profil, page d'accueil).

xml
<!-- Material 3 Large Top App Bar avec 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="Contenu de l'écran..." />
    </NestedScrollView>
</CoordinatorLayout>

Personnalisation avancée de Toolbar

Toolbar supporte la personnalisation complète : changement de hauteur, animations d'apparition/disparition, vues enfants personnalisées, logo, icône de navigation, PopupMenu et intégration avec CoordinatorLayout. Pour l'animation de disparition au défilement, on utilise AppBarLayout avec les indicateurs scroll, enterAlways, snap. Pour l'effet de parallaxe d'image sous la Toolbar — CollapsingToolbarLayout avec mode parallax.

Le logo et le sous-titre sont définis via les méthodes setLogo et setSubtitle. L'icône de navigation est configurée via setNavigationIcon et setNavigationOnClickListener. Les vues personnalisées sont ajoutées via addView directement dans la Toolbar. Pour SearchView, on utilise MenuItem avec actionViewClass. Pour le thème sombre, les couleurs des attributs Material 3 sont appliquées automatiquement.

kotlin
// Personnalisation avancée de Toolbar
with (toolbar) {
    // Logo et titre
    setLogo(R.drawable.ic_logo)
    setTitle("Mon application")
    setSubtitle("Version 2.0")

    // Icône de navigation avec gestionnaire
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Vue personnalisée — Switch pour le thème
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

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

Foire aux questions

Quelle est la différence entre Toolbar et ActionBar ?

ActionBar est une barre système d'Android 3.0–4.4 avec une personnalisation limitée. Toolbar est un composant flexible de Material Design qui peut être placé n'importe où dans le layout, animé et rempli de vues personnalisées. Toolbar remplace complètement ActionBar via setSupportActionBar.

Comment masquer Toolbar lors du défilement ?

Utilisez CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Configurez l'indicateur scroll pour Toolbar dans layout_scrollBehavior. En défilant vers le bas, Toolbar se masque ; en défilant vers le haut, elle apparaît avec une animation. Dans Material 3, Medium/Large Top App Bar se replie en Small.

Combien d'action items peut-on placer dans Toolbar ?

La limitation est la largeur physique de l'écran. 2 à 4 action items (icônes) sont recommandés. Les autres se déplacent dans le menu overflow (trois points). Configuration via app:showAsAction : always (toujours afficher), ifRoom (si la place le permet), never (dans overflow).

Comment ajouter SearchView à Toolbar ?

SearchView est ajoutée comme action view dans le Menu. Dans le menu XML : app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView se replie automatiquement en icône de recherche et se développe au toucher. Supporte la recherche vocale et l'autocomplétion via SearchRecentSuggestionsProvider.

Qu'est-ce que CollapsingToolbarLayout ?

CollapsingToolbarLayout est un conteneur pour Toolbar qui se replie avec animation lors du défilement du contenu. Utilisé avec CoordinatorLayout et AppBarLayout. Supporte les modes : pin (fixe), parallax (effet de parallaxe). Idéal pour les écrans avec une image d'en-tête (profil, page de détail).

Résumé

  • Toolbar est une barre d'outils Android flexible qui a remplacé ActionBar et est entièrement intégrée à Material Design
  • Material 3 Top App Bar — quatre variantes : Small, Center-aligned, Medium, Large avec différents comportements de défilement
  • ActionBar est une barre système obsolète, limitée en personnalisation et animation
  • Menu et action items — intégration via menu XML avec indicateurs always/ifRoom/never pour le contrôle de la visibilité
  • CollapsingToolbarLayout — repli animé de Toolbar au défilement pour les écrans avec image d'en-tête
  • Personnalisation — logo, sous-titre, vues personnalisées, SearchView, PopupMenu et couleurs Material 3
  • SearchView — action view intégrée pour la recherche avec saisie vocale et autocomplétion

Nous développerons une application mobile clé en main

IT Sectr crée des applications iOS et Android pour les startups et les entreprises depuis 2017. Nous vous conseillerons et vous proposerons la meilleure solution.

Discuter du projet

Lisez aussi