Remplacer une ActionBar par une Toolbar

La version 5 d’android (Lollipop) introduit une nouveauté nommé Toolbar. Ce nouveau composant devrait à long terme remplacer la barre d’action (ActionBar) d’une application.
Ce composant posséde plusieurs avantage par rapport à une action bar.

  • Il est déclaré dans le layout de votre activité : Ce qui permet de facilement personnalisé sa taille, son contenu, sa couleur, sa position
  • Une toolbar peut contenir les différents éléments suivants :

  • Un bouton de navigation (ouverture d’un menu ou retour à l’activité parente).
  • Le logo / image identifiant l’application.
  • Une ou plusieurs vues personnalisées
  • Des actions
  • Remplacer l’ActionBar par la Toolbar

    Prenons l’exemple d’un projet contenant une ActionBar. Pour remplacer cette ActionBar par une toolbar, il suffit de suivre les étapes suivantes :

    Modifier le thème de l’application

    La première étape consiste à modifier le thème de l’application afin de rajouter les deux attributs windowActionBar (indique si l’application utilise une actionbar).
    Ce qui donnera pour le fichier styles.xml :

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
           <item name="windowActionBar">false</item>
    </style>
    

    Déclarer la Toolbar dans votre vue

    L’étape suivante consiste à déclarer la Toolbar dans un fichier de votre vue. Ce qui donnera pour notre exemple

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MyActionBarActivity">
    
        <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="#58FA58"
            android:minHeight="?android:attr/actionBarSize" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_below="@id/toolbar"
            android:layout_marginTop="10dp"
            android:layout_height="wrap_content"
            android:text="@string/hello_world" />
    
    </RelativeLayout>
    

    La vue contient :

  • Un RelativeLayout : servant de conteneur à la vue
  • La Toolbar : se trouvant toujours en haut de la vue (alignParentTop) et possédant un background et un taille (minHeight)
  • Une zone de texte
  • La valeur “?android:attr/actionBarSize” signifie que la hauteur de la toolbar sera celle fixée par la version d’Android. Vous pouvez remplacer par une valeur personnalisé mais cette valeur est conseillée car s’adaptera aux recommendations Google.
    Sans oublie d’inclure la dépendance vers la bibliothèque de compatibilité v7 dans votre fichier gradle :

    compile 'com.android.support:appcompat-v7:21.0.3'
    

    Remplacer l’action bar par la toolbar dans le code de l’activité

    La dernière étape consiste à indiquer à l’activité qu’elle utilise une toolbar au lieu d’une action bar et cela à l’aide de la méthode setSupportActionBar

    Toolbar toolbar =   (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    

    Attention à bien importer la classe Toolbar issu de la bibliothèque de compatibilité v7.
    Ce qui donnera :
    device-2015-05-23-200111

    Personnaliser une Toolbar

    Pour personnaliser une toolbar, vous disposez des mêmes méthodes que celle disponible pour une barre d’action. par exemple pour afficher le bouton de navigation up, il faut utiliser la méthode setDisplayHomeAsUpEnabled

            ActionBar actionBar = getSupportActionBar();
            //Permet d'afficher le bouton de navigation up sur l'application
            actionBar.setDisplayHomeAsUpEnabled(true);
    

    Pour plus d’information sur les différentes options, vous pouvez regarder les deux tutos sur l’action barre précedant :

  • ActionBar sous Android (Partie 1)
  • ActionBar sous Android (Partie 2)
  • Vous pouvez trouver le code de l’exemple sur mon github à l’adresse suivante : https://github.com/nbenbourahla/replaceActionToolbarTutorial

    3 commentaires


    1. Génial! Très bien expliqué, merci beaucoup, ça m’a aidé à sortir de ma galère 😉

      Répondre

    2. encore une fois merci pour ce tutoriel toujours bien détaillé et très bien expliqué

      Répondre

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *