Toolbar Android

Dans ce tutoriel, nous allons découvrir comment utiliser une Toolbar dans une application Android.

Qu’estce qu’une toolbar

La toolbar successeur de la l’Action Bar(App bar) est introduit dans Android Lollipop: Api 21 et peut être placé n’import ou dans une vue.La toolbar fournit plus de possibilité de personnalisation,plus de simplicité et flexibilité par rapport à l’ ActionBar et s’intègre bien par rapport aux design pattern du material design.

L’ ActionBar fait traditionnellement partie du décor d’une fenêtre opaque de l’activité contrôlée par le framework Android. Alors que’une toolbar peut être placé n’importe ou dans une hiérarchie de vue.Ce qui donne à la toolbar plus de possibilité que l’ ActionBar .

La toolbar prend en charge un ensemble de fonctionnalité plus ciblé que l’action bar

Du début à la fin, une toolbar peut contenir une combinaison d’éléments facultatifs tels que : un bouton de navigation ,une image de logo de marque,un titre et un sous titre, une ou plusieurs vues personnalisées ou une ActionMenuView.

Comme nous l’avons dit précédemment la toolbar à été introduit dans Android Lollipop ,donc vous pouvez normalement intégrer une Toolbar dans une application qui cibles l’api 21 et plus mais si vous souhaitez utiliser la Toolbar dans les ancienne version d’android, vous devez utiliser la toolbar disponible dans AndroidX(la nouvelle librairie de support d’android).

La toolbar est implémenter dans la classe androidx.appcompat.widget.Toolbar  dans la librairie de support

Ajouter AndroidX

Si vous développez avec la version 3.2 et supérieur d’Android studio et que vous créez un nouveau projet , android studio ajoute automatiquement androidX. Vous pouvez le vérifier en allant dans le fichier build.gradle (Module:app).Vous devez voir dans le section dependencies,la dépendance suivante

 implementation 'androidx.appcompat:appcompat:1.1.0'

Si vous travaillez encore avec l’ancienne librairie de support d’Anroid et que vous souhaitez migrer vers androidX, lisez ce tutoriel.

Dans la suite de ce tutoriel, nous allons supposer que vous avez déja créer un nouveau projet pour découvrir comment intégrer la toolbar dans une application android.

Définir le thème de votre application

Par défaut lorsque vous créer un nouveau projet ,le thème de votre application fournit une barre d’Action. Pour utiliser la toolbar comme barre d’Action, vous devez déactiver l’action et la remplacé par une toolbar. Pour cela vous devez remplacer le thème définit par défaut par android studio par un thème qui ne fournit pas ou déactive la barre d’action.Changez le thème de votre application comme suit.

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ...
        ...
        ...
 </style>

Ajouter la toolbar dans la vue

Pour ajouter la toolbar dans la vue, ajoutez le code suivant.Dans cette exemple la toolbar est ajouté à l’entête dans la vue comme une barre d’Action.

 <androidx.appcompat.widget.Toolbar
      android:id="@+id/my_toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      android:elevation="4dp"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Définir la toolbar comme Barre d’Action

Pour utiliser la toolbar comme barre d’Action de l’activité , vous devez vous assurer que votre activité hérité de la classe AppCompatActivity

class MainActivity : AppCompatActivity() {

   
}

public class MainActivity extends AppCompatActivity {

   
}

Ensuite dans la méthode onCreate de l’activité, vous devez appeler la méthode setSupportActionBar en passant en paramètre la référence de la toolbar. Voir l’exemple

 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val toolbar:Toolbar=findViewById(R.id.my_toolbar)
        setSupportActionBar(toolbar)
    }

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

Félicitation, vous venez d’ajouter la toolbar comme barre d’Action de l’activité.A présent nous allons explorer quelques possibilités que nous offre la toolbar et ajouter plusieurs éléments pour la rendre plus complète.

Utiliser les méthode fournit par l’action bar

Maintenant que nous vous avez défini la toolbar comme bar d’Action, vous avez accès un certains nombre de méthodes de l’action bar de la librairie de support d’android. Parmis ces méthodes vous avez par exemples des méthodes pour afficher ou cacher la bar de l’application.

Pour utiliser les méthodes de la barre d’Action, vous devez appeler la méthode getSupportActionBar()  de l’activité.Cette méthode retourne l’action barre de la librairie de support(AndroidX).Une fois que vous avez la référence de l’action bar, vous pouvez par exemple appeler la méthode  ActionBar.hide() comme suit..

  val actionBar=supportActionBar
        actionBar?.hide()
        actionBar?.show()

        ActionBar actionBar=getSupportActionBar();
        actionBar.hide();
        actionBar.show();

Ajouter et gérer les actions

La barre de l’application vous permet d’ajouter des boutons pour l’utilisateur. Cette fonctionnalité vous permet d’ajouter les actions les plus importantes pour le contexte actuel de l’activité.Par exemple vous pouvez ajouter un bouton pour permettre à l’utilisateur de rafraîchir le contenue dans le contexte actuel.

Vous devez savoir que l’espace dans la barre de l’application est limité.Si l’application déclare plus d’action qu’elle ne peut en contenir dans la barre d’application, la barre d’application renvoie les actions supplémentaire dans un menu flottantes.

L’application peut aussi spécifier qu’une action doit être toujours affiché dans le menu déroulant.Au lieu d’être affiché dans la barre d’application.

Ajouter des boutons d’actions

Tous les boutons d’actions et autres éléments disponible dans le menu flottant sont définis dans une ressource de menu xml. Pour ajouter des actions à l’action bar, créer dans votre projet un nouveau ficher xml dans le répertoire res/menu.

Puis ajoutez des éléments <item> correspondant à chaque item que vous souhaitez ajouter dans l’action bar.Voir le code exemple suivant

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorite"
        android:icon="@drawable/ic_favorite"
        android:title="@string/action_favorite"
        app:showAsAction="ifRoom"/>

 
    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        app:showAsAction="never"/>
</menu>

l’attribut app:showAsAct spécifie si l’action s’affiche comme un bouton dans l’action bar.Si vous définissez la valeur de l’attribut app:showAsAction= » » à ifRoom, l’action s’affichera comme bouton dans l’action bar s’il y a suffisamment d’espace pour le contenir sinon il s’affichera dans le menu flottante de l’action bar.

Si vous définissez la valeur de cet attribut à app:showAsAction= » «  à never, l’action s’affichera toujours dans le menu flottant de l’action bar

Créer les actions de la barre d’action

.Vous pouvez créer les actions de la barre d’action en définissant le menu de l’activité comme suit.

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

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       
        getMenuInflater().inflate(R.menu.main_menu,menu);
        return true;
    }

Répondre aux actions

Lorsque l’utilisateur sélectionne un item de l’action bar, le système appelle la méthode de rappel onOptionsItemSelected() de l’activité et passe en paramètre un objet MenuItem pour indiquer quel item a été sélectionné.

Pour gérer le clic des items cliqués vous devez appeler la méthode  MenuItem.getItemId() dans la méthode onOptionsItemSelected() pour déterminer quel item a été cliqué.L’Id que vous récupérez correspond à la valeur que vous avez définir dans l’attribut android:id pour chaque item de menu.

Pour pouvez gérer les clics comme suit

  override fun onOptionsItemSelected(item: MenuItem): Boolean {
         when(item.itemId){
          R.id.action_favorite->{ 
           //Vous exécutez votre code ici   
            true  
          }
          R.id.action_settings->{
           //Vous exécutez votre code ici
            true  
          }  
             
         }

        return super.onOptionsItemSelected(item)
    }

 @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.action_favorite:
                //Vous exécutez votre code ici
                return true;
            case R.id.action_settings:
                //Vous exécutez votre code ici
                return true;
        }
        
        return super.onOptionsItemSelected(item);
    }

Ajouter l’action haut de retour dans l’action bar

Votre application doit permettre aux utilisateurs de se retourner facilement vers la fenêtre principale de l’application. Une façon simple de le faire est de fournir un bouton Haut de retour sur la barre d’application pour toutes les activités sauf la principale. Lorsque l’utilisateur clique sur le bouton Haut, l’application retourne vers la fenêtre précédente.

Déclarer l’activité parente.

Pour prendre en charge la fonctionnalité de retour haut dan une activité,vous devez déclarer l’activité parente.Vous pouvez le faire dans le fichier manifest en configurant l’attribut android:parentActivityName .

L’attribut android:parentActivityName a été introduit à partir d’android 4.1(Api niveau 16).Pour supporter les appareils avec les anciennes version d’android, définissez une paire nom-valeur de <meta-data> ou le nom est « android.support.PARENT_ACTIVITY » et la valeur est le nom de l’activité parente

Par exemple, supposons que votre application a une activité principale nommée MainActivity et une activité secondaire enfante nommée DetailActivity. Le code suivante déclare les deux activités et déclare la relation parent enfant.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.testetoolbar">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".DetailActivity"
            android:label="@string/detail_activity"
            android:parentActivityName=".MainActivity"
            >
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value=".MainActivity" />
        </activity>
    </application>

</manifest>

Activé le bouton de retour haut

Pour activer le bouton de retour haut pour une activité qui a une activité parente, vous devez appeler la méthode setDisplayHomeAsUpEnabled() de l’action bar de la librairie de supprt lorsque l’activité est créée.

Dans l’exemple suivant , on définit la toolbar comme action bar puis on active le bouton haut de retour de la barre de l’application.

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val toolbar:Toolbar=findViewById(R.id.my_toolbar)
        setSupportActionBar(toolbar)
        val actionBar=supportActionBar
        actionBar?.setDisplayHomeAsUpEnabled(true)
    }

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar=findViewById(R.id.my_toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar=getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);


    }

Note:Vous n’avez pas besoin de gérer le clic du bouton de retour dans la méthode onOptionsItemSelected() de l’activité. Quand vous déclarez cette méthode, elle doit appeler la méthode onOptionsItemSelected() de la super classe avec la méthode super.onOptionsItemSelected(item) pour permettre à la méthode onOptionsItemSelected() de la super classe de répondre au clic du bouton de retour en navigant vers l’activité parent spécifiée dans le manifeste.

Ajouter une vue comme action dans la barre d’action

Pour ajouter une vue comme action, créer un  <item> dans le fichier ressource de menu de la toolbar comme suit

<item android:id="@+id/action_search"
        android:title="@string/action_search"
        android:icon="@drawable/ic_search"
       />

Ensuite ajoutez un des deux attributs suivant

• actionViewClass :pour définir la classe du widget qui définit l’action.
• actionLayout :Une ressource layout décrivant la vue de l’action.

Définissez l’attribut showAsAction à « ifRoom | collapseActionView » ou à « never| collapseActionView ». le flag collapseActionView indique comment afficher le widget lorsque l’utilisateur n’interagit pas avec lui:

Si le widget se trouve dans la barre d’application, l’application doit afficher le widget sous forme d’icône défini avec l’attribut android:icon . Si le widget est dans le menu flottant, l’application doit afficher le widget en tant qu’élément de menu. Lorsque l’utilisateur interagit avec la vue d’action, celle-ci se développe et s’affiche normalement pour remplir la barre

Par exemple pour ajoutez un widget SearchView  dans la barre d’application, vous devez ajouter un item de menu comme suit

<item android:id="@+id/action_search"
        android:title="@string/action_search"
        android:icon="@drawable/ic_search"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

Si vous devez configurer l’action, faites le dans la fonction de rappel  onCreateOptionsMenu() . Vous pouvez obtenir la référence de la vue de l’action en appelant la méthode getActionView() .Par exemple ,le code suivant obtient la référence du widget SearchView définit précédemment.

  override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.main_menu,menu)
        val searchItem=menu?.findItem(R.id.action_search)
        val searchView=searchItem?.actionView
        
        return true
    }

   @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.main_menu,menu);
        MenuItem searchItem = menu.findItem(R.id.action_search);
        SearchView searchView =
                (SearchView) searchItem.getActionView();
        return true;
    }

Répondre à l’expansion de la vue de l’action

Lorsque l’utilisateur clic sur sur l’icon, l’implémentation par défaut de la fonction onOptionsItemSelected() dans la super classe étant la vue.Si votre classe activité redéfini la méthode onOptionsItemSelected() , elle doit appeler super.onOptionsItemSelected() pour permettre à la super classe de continuer par étendre la vue de l’action.

Si vous souhaitez effectuer un traitement lorsque la vue de l’action est développée ou réduite, vous pouvez définir une classe qui implémente MenuItem.OnActionExpandListener et passé un membre de cette classe à la méthode setOnActionExpandListener(). de la vue.

L’exemple suivant montre comment définir une classe qui implémente la classe MenuItem.OnActionExpandListener .

   override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.main_menu,menu)
        val expandListener: MenuItem.OnActionExpandListener=object:MenuItem.OnActionExpandListener{

            override fun onMenuItemActionExpand(p0: MenuItem?): Boolean {
                //exécuter votre code
             return true
            }

            override fun onMenuItemActionCollapse(p0: MenuItem?): Boolean {
                //exécuter votre code
              return true
            }
        }

        val searchItem=menu?.findItem(R.id.action_search)
        searchItem?.setOnActionExpandListener(expandListener)
        val searchView=searchItem?.actionView

        return true
    }

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.main_menu,menu);

        MenuItem.OnActionExpandListener expandListener=new MenuItem.OnActionExpandListener() {
            @Override
            public boolean onMenuItemActionExpand(MenuItem menuItem) {
                //exécuter votre code
                return true;
            }

            @Override
            public boolean onMenuItemActionCollapse(MenuItem menuItem) {
                //exécuter votre code
                return true;
            }
        };
        MenuItem searchItem = menu.findItem(R.id.action_search);
       searchItem.setOnActionExpandListener(expandListener);
        SearchView searchView =
                (SearchView) searchItem.getActionView();
        return true;
    }

Ajouter un fournisseur d’action(action provider)

Pour ajouter une vue comme action, créez un  <item> dans le fichier ressource de menu de la toolbar comme suit

<item android:id="@+id/action_share"
        android:title="@string/action_share"
        app:showAsAction="ifRoom"
        />

Puis ajouter l’attribut actionProviderClass et définissez le sur le nom de la classe du fournisseur d’action.

Le code suivant déclare un ShareActionProvider, qui est widget déclaré dans androidX qui permet à votre application de partager des données avec d’autres application

<item android:id="@+id/action_share"
        android:title="@string/action_share"
        app:showAsAction="ifRoom"
        app:actionProviderClass="androidx.appcompat.widget.ShareActionProvider"/>

Vous n’avez pas besoin de spécifier une icône, car le widget ShareActionProvider prend soin de son apparence et de son comportement. Cependant, vous devez spécifier un titre avec l’attribut android: title, au cas où l’action se retrouverait dans le menu flottant.

L’étape suivante consiste à définir l’intention(Intent) qui contient l’information que votre activité souhaite partager. Vous devez créer l’intention dans la méthode onCreateOptionsMenu() . redéfinie par votre activité.

Vous pouvez configurer l’intention comme suit:

Etape 1: Vous devez obtenir la référence du ShareActionProvider en appelant la méthode getActionProvider() et en passant le MenuItem de l’action de partage.Voir le code suivant

 val shareItem=menu?.findItem(R.id.action_share)
        val myShareActionProvider=MenuItemCompat.getActionProvider(shareItem) as ShareActionProvider

 MenuItem shareItem = menu.findItem(R.id.action_share);
        ShareActionProvider myShareActionProvider =
                (ShareActionProvider) MenuItemCompat.getActionProvider(shareItem);

Etape 2:Créer une intention avec comme action Intent.ACTION_SEND,  puis ajoutez le contenu qui doit être partagé par votre activité.Par exemple , l’exemple suivant partage une image

   val myShareIntent =Intent(Intent.ACTION_SEND)
        myShareIntent.setType("image/*")
        myShareIntent.putExtra(Intent.EXTRA_STREAM,myImageUri)

  Intent myShareIntent = new Intent(Intent.ACTION_SEND);
        myShareIntent.setType("image/*");
        myShareIntent.putExtra(Intent.EXTRA_STREAM, myImageUri);

Etape 3 :Appelez ensuite la méthode setShareIntent() pour attacher cette intention au fournisseur d’action.

  myShareActionProvider.setShareIntent(myShareIntent)

myShareActionProvider.setShareIntent(myShareIntent);

Etape 4:Quand le contenu change,modifiez l’intention et créez un autre et appelez de nouveau la méthode setShareIntent() .Voir l’exemple suivant

  myShareIntent.putExtra(Intent.EXTRA_STREAM,myNewImageUri)
  myShareActionProvider.setShareIntent(myShareIntent)

  myShareIntent.putExtra(Intent.EXTRA_STREAM, myNewImageUri);
  myShareActionProvider.setShareIntent(myShareIntent);

Autres ressources

https://developer.android.com/reference/androidx/appcompat/widget/ShareActionProvider.html

https://developer.android.com/training/appbar/action-views

Conclusion

Nous somme à la fin de ce tutoriel sur comment utiliser la toolbar. J’espère que ce tutoriel vous aidera à utiliser la toolbar dans votre application.Dans un prochain tutoriel, nous verrons comment animer la toolbar. A bientôt pour un nouveau tutoriel.