ActionBar et menu en Kotlin

Bonjour à tous ! Aujourd’hui, je vous présente un nouveau principe qui vous sera pratique pour personnaliser vos applications. Dans cet article, je vais vous introduire la notion d’ActionBar. Nous verrons comment la mettre en place et comment la personnaliser avec vos menus.

Vous pouvez aller lire mon précédent article “Le Navigation Drawer en kotlin”  qui vous explique comment ajouter un menu de navigation dans votre application à partir d’une ActionBar.

Qu’est ce qu’une ActionBar ?

Une ActionBar est une barre d’action  qui se place en haut de votre activité. Elle propose un ensemble de boutons pour interagir avec votre activité. Elle est très souvent utilisée dans les applications android. Notamment, si vous souhaitez mettre en place un menu de navigation.

La mise en place d’une ActionBar

L’exemple qui va suivre s’inspire d’une  petite application simple que j’ai créée. Je vais vous expliquer les fonctionnalités afin que vous compreniez les principes et que vous arrivez à comprendre la suite de l’article.

L’application possède un Editexte au centre de l’écran et une ActionBar comportant 3 éléments :

• Le premier élément est un bouton favori visible depuis l’ActionBar. À chaque clic dessus, son icône va changer de couleur () pour simuler l’ajout de la page aux favoris. Un petit message s’affiche en plus pour vous avertir de son succès.
• Le deuxième élément est un bouton corbeille. Il est visible depuis l’ActionBar. Ce bouton va venir effacer le contenu de l’EditTexte et afficher le message de son succès.
• Le troisième élément est un bouton qui va venir afficher le message “paramètres”. Il est accessible à partir du menu supplémentaire de l’ActionBar.

Pour comprendre un peu mieux, voici une petite démo de ce que fait l’application.

Le Prérequis

Si vous avez comme moi, créer un projet en choisissant une “empty activity” comme point de départ. Vous allez vous retrouver avec le dossier menu manquant.

Pour créer votre ActionBar il est nécessaire de créer se menu. Pour l’ajouter, il suffit de faire un clic droit sur le dossier “res” puis aller sur l’onglet “New” et enfin cliquez sur “Android Ressource Directory”.

Une nouvelle fenêtre va s’ouvrir qu’il faut ensuite configurer.  Sélectionner  “menu” pour le “Ressource type”,  puis appuyer sur “OK”.

Voilà,  le menu a été crée, il vous reste plus qu’à ajouter votre fichier xml correspondant à votre menu dans le dossier “menu” qui vient d’être créé (“Android Ressource File” ).

La création du menu

La création d’un menu reste simple, une balise <Menu> comme point départ. Ensuite vous avez le choix entre la balise “item” et la balise “group”

<?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/item_favoris"
        android:title="Favoris"
        android:icon="@android:drawable/btn_star_big_off"
        app:showAsAction="always"/>
    <item
            android:id="@+id/Effacer"
            android:title="Effacer"
            android:icon="@android:drawable/ic_menu_delete"
            app:showAsAction="always"/>
    <item
            android:id="@+id/configuration"
            android:title="paramètres"
            app:showAsAction="never"/>
</menu>

La balise <item> correspond à votre élément dans le menu ou à votre bouton sur votre ActionBar, si vous préférez. Il doit obligatoirement posséder un identifiant (android:id) si vous souhaitez interagir avec lui. Vous pouvez lui ajouter un titre, une icône et différentes autres options.  Le paramètre par exemple “app:showAsAction” définit la position de votre élément selon différents critères :

La balise <group> permet de regrouper un ensemble “item” ensemble. Les paramètres du groupe agissent sur l’ensemble des éléments. La balise <group> n’est pas souvent utilisée dans une ActionBar.

La mise en place dans l’activité

Pour associer notre ActionBar à notre activité, il faut redéfinir la méthode onCreateOptionsMenu. Une méthode à redéfinir est facilement repérable par le mot-clé “override”.

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

L’instruction “super.onCreateOptionsMenu(menu)” fait appel à la méthode portant le même nom dans la classe mère, pour initialiser notre méthode.  Dans cette classe mère, les méthodes initialisent et gèrent les différents accès au système. Notre “MainActivity”  est une couche supplémentaire à cette classe mère. Redéfinir une méthode permet donc de faire abstraction de la couche dite “parente”, d’éviter de réécrire du code qui a déjà été écrit et de nous  permettre de nous concentrer sur l’essentielle.

L’instruction “menuInflater.inflate(R.menu.mon_menu,menu)”  va venir lier notre ActionBar (fichier XML) à notre MainActivity (code Kotlin).

Le menu est associé mais il n’est présent que visuellement. Pour pouvoir interagir avec lui, il faut redéfinir la méthode “onOptionsItemSelected”.

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    super.onOptionsItemSelected(item)
    when (item?.itemId)
    {
        R.id.item_favoris ->
        {
            if (isFavori == false)
            {
                item.setIcon(R.drawable.btn_rating_star_off_pressed)
                Toast.makeText(this,"Favoris",Toast.LENGTH_LONG).show()
                isFavori = true
            }
            else
            {
                item.setIcon(R.drawable.btn_rating_star_off_normal)
                isFavori = false
            }
        }
        R.id.configuration -> { Toast.makeText(this,"Paramètres",Toast.LENGTH_LONG).show() }
        R.id.Effacer  ->
        {
            mon_editText.text.clear()
            Toast.makeText(this,"le contenu a été effacé",Toast.LENGTH_LONG).show()
        }
        else -> { Toast.makeText(this,"action inconnu",Toast.LENGTH_LONG).show() }
    }
    return true
}

À chaque clic sur un item du menu, son identifiant est envoyé en paramètre de cette méthode. Ce qui permet associée une suite d’instructions à un identifiant et donc à un élément de notre ActionBar. Dans la boucle “when”, on vient créer les différents cas en fonction des identifiants. Le cas “else”, correspond le cas par défaut si l’identifiant récupéré ne correspond à aucun des cas qu’on a inscrit. Chaque cas est défini par un identifiant suivi d’une flèche et des instructions encadrées par des accolades.

Pour aller plus loin

Il existe plusieurs paramètres pour définir une balise <item> :

Si vous êtes curieux je vous invite à aller voir la documentation en anglais ici  !

Merci d’avoir lu ! Maintenant, si vous avez aimé le contenu de l’article, si  vous connaissez une personne à qui cet article peut intéresser, n’hésitez pas à le liker et à le partager sur les réseaux sociaux. Si vous souhaitez me faire part de vos remarques, de vos problèmes, de vos suggestions de prochain article ou tout simplement de votre soutien n’hésitez pas à m’en faire part dans les commentaires, je vous en remercie.

Crédit photo : Blickpixel