J’ai eu l’idée de ce post après avoir répondu à une question de Stackoverflow. Lorsque l’on créé une application Android, il est presque obligatoire d’avoir une ActionBar afin de procurer une bonne expérience de navigation à l’utilisateur.

 

Mais c’est quoi une ActionBar ?

Une ActionBar est propre à chaque Activité de votre application. C’est la partie tout en haut de l’écran, celle où se trouve le titre de votre page et votre menu :

Vous pouvez changer de fragment autant que vous voulez, cette ActionBar restera la même tant que vous êtes dans la même activité. Bien entendu, vous pourrez la configurer à tout moment pour changer son menu, son icône, son texte, sa couleur, ou même (et surtout) les actions effectuées suivant le bouton cliqué par l’utilisateur.

 

Comment ajouter une ActionBar à mon application mobile ?

Rien de plus simple ! Elle est déjà ajoutée en fait 🙂 Nous allons simplement voir comment configurer votre propre ActionBar pas à pas.

Si ce n’est pas déjà le cas, téléchargez et installez le package Nuget Xamarin Android Support Design. Cela permet de faciliter la retrocompatibilité de vos applications mobiles avec les anciennes versions d’Android. Copiez ensuite le code ci-dessous dans vos fichiers MainActivity.cs et MainActivity.axml. Je vous fais grâce du fichier Strings.xml. Si son contenu vous intéresse, tout est disponible sur mon Github !

Ce code n’a rien d’extra-ordinaire : il configure uniquement le Titre de l’objet SupportActionBar de l’activité. C’est tout ! C’est facile non ?

 

Avant de compiler pour admirer votre travail, vous devez tout de même spécifier que votre Activité doit utiliser un thème correspondant à AppCompat (eh oui, votre activité est une AppCompatActivity). Rajoutez cette information dans votre manifest, dans le tag Application (android:theme=….) :

 

Vous pouvez maintenant compiler et déployer sur votre téléphone :

 

Comment ajouter un menu en haut à droite de mon ActionBar ?

Le but principale d’une ActionBar est de faciliter la navigation de votre utilisateur. Lui dire dans quelle page il se trouve grâce au Titre, c’est bien ! Mais lui permettre de faire des actions communes en 1 clic, c’est vraiment beaucoup mieux !! Par exemple, pour pourrez permettre à votre utilisateur de partager du contenu sur les réseaux sociaux en 1 clic. Intéressant n’est-ce pas ?!

Commençons par créer un dossier « menu » dans le dossier « Resources » de votre projet Android :

Puis, copiez le code ci-dessous dans le fichier top_menus.xml que vous aurez créé dans le dossier précédemment ajouté. Ce dernier déclare deux options pour votre menus. Il y aura 1 icône pour partager du contenu sur les réseaux sociaux, et 1 icône « More » (en forme de 3 points), dans lequel une option supplémentaire « more option… » sera affichée.

 

Maintenant que le fichier XML de votre menu est prêt, il faut indiquer à votre activité qu’elle doit l’utiliser. Cela se passe dans la méthode OnCreateOptionsMenu().

Ensuite, Il faut indiquer quelles actions l’activité doit effectuer lorsque l’utilisateur clique sur l’une de vos entrées du menu. Cela se passe dans la méthode OnOptionsItemSelected().

Rajoutez ces deux méthodes à votre activité, et le tour est joué ! N’oubliez pas le mot clef override 🙂

Avec ce code, lorsque l’utilisateur clique sur l’icône de partage sur les réseaux sociaux, il obtient la liste des applications avec laquelle il peut partager du contenu. Et lorsqu’il clique sur l’entrée « more option… », le titre de l’ActionBar est modifié.

                                                            

 

Comment personnaliser la couleur de mon ActionBar ?

Pour personnaliser la couleur de votre ActionBar, il faut utiliser un thème. Imaginons que nous voulons une barre bleue et des écritures / icônes blanches. Nous allons étendre le thème par défaut et changer uniquement les valeurs qui nous intéressent. Le thème par défaut que nous utilisons est Theme.AppCompat.Light. Comme nous voulons une couleur de texte et d’icône blanche, nous utiliserons le thème Theme.AppCompat.Light.DarkActionBar. Voici un aperçut récupéré depuis la doc développeur pour vous montrer la différence entre ces deux thèmes :

 

Pour étendre et personnaliser un thème, il faut créer un fichier « styles.xml » dans le répertoire « values » du dossier « Resources » de votre projet Android. Copiez le code ci-dessous afin de paramétrer les couleurs de votre choix. Je vous épargne le fichier colors.xml mais s’il vous intéresse, tout est disponible sur mon Github !

 

Maintenant, comme tout à l’heure, il faut spécifier dans le manifest que notre activité va utiliser le thème ActionBarSampleTheme :

Il manque un dernier détail. Il faut encore modifier les icônes personnalisées du menu en haut à droite. Nous avions une image noire pour le partage sur les réseaux sociaux. Il faut maintenant une image blanche. Il faut simplement ajouter l’image dans le dossier « drawable » du répertoire « Resources » (et modifier le fichier top_menus.xml si le nom de votre image est différent de l’ancienne).

Voila le résultat :

 

Pourquoi modifier le thème plutôt que la propriété de l’ActionBar ?

Précédemment, nous avons vu comment modifier le thème de l’application afin de changer la couleur de l’ActionBar. Il est pourtant possible de modifier la couleur de votre ActionBar en utilisant une méthode appelée SetBackgroundDrawable() associé à un objet de type ColorDrawable. A mon sens, ce n’est pas une bonne pratique de modifier la couleur d’un élément graphique de manière isolé.

En effet, le bon côté avec les modifications de style que nous avons fait, est que tout le reste de l’application sera impacté. C’est très efficace pour garder une image de marque identique et cohérente tout au long de l’expérience utilisateur. Pas d’oubli ni d’erreur possible, les couleurs sont spécifiées 1 fois, et réutilisées automatiquement partout dans l’application.

 

Comment ajouter un menu sandwich à mon ActionBar ?

Ajouter une icône pour ouvrir le menu

Nous savons maintenant que le principe d’une ActionBar est de faciliter la navigation de notre utilisateur afin d’améliorer son expérience. Mais jusqu’ici, il nous manque un élément important pour faciliter la navigation ! Un menu complet ! Nous allons voir comment ajouter un icône « menu sandwich » à notre ActionBar et comment afficher un menu sur la partie gauche de l’écran.

Pour commencer, il faut ajouter le code ci-dessous dans la méthode OnCreate de notre Activité. Il faut également ajouter une icône de menu dans votre dossier Resources/drawable nommé ic_menu_white_24dp.png.

Rien d’autre à faire ! Vous pouvez compiler et admirer le résultat… Une superbe icône de menu apparaît à gauche de votre ActionBar :

 

Pour détecter un clique de l’utilisateur sur ce bouton, il faut compléter la méthode OnOptionsItemSelected() de notre activité :

 

Afficher un menu sur le côté gauche de l’écran

C’est bien, on a réussi à afficher notre icône permettant à l’utilisateur d’accéder au menu complet de l’application. Il faut maintenant savoir comment afficher ce menu ! Pour cela, nous allons utiliser une NavigationView intégrée dans un DrawerLayout. Pas de panique, nous allons voir comment faire cela pas à pas. Pour commencer, il faut modifier le fichier AXML de notre activité :

Notre LinearLayout a été remplacé par un DrawerLayout. Nous y avons ajouté un élément NavigationView, comme si nous ajoutions n’importe quelle vue à un layout habituellement.

Vous remarquerez peut-être que le code XML ci-dessus affecte un menu à l’élément visuel NavigationView. Comme nous avions fait au début de ce tutoriel pour le menu de droite de notre ActionBar, il faut créer un fichier XML dans le dossier Resources/menu, nommé left_menus.xml :

N’oubliez pas de compléter votre fichier Strings.xml avec les valeurs de vos entrées de menu, et d’ajouter des images pour les icônes associés. Si vous ne voulez pas trop réfléchir, toutes les sources de ce tutoriel sont disponibles sur mon Github 🙂

Maintenant que nous avons fait toutes les configurations pour afficher notre menu, il faut compléter le code de notre Activité. Car c’est l’Activité qui va contrôler l’affichage de notre menu en fonction des cliques de l’utilisateur. Voici ci-dessous le code à rajouter dans votre fichier MainActivity.cs :

Et voici le résultat, le menu s’affiche de la gauche vers la droite soit en cliquant sur l’icône menu sandwich, soit en glissant le doigt du bord gauche de l’écran vers la droite :

 

Personnaliser l’affichage du menu avec les informations de l’utilisateur

Nous arrivons presque au bout de ce tutoriel. Il manque tout de même une petite chose à notre menu, vous ne trouvez pas ? Il manque « un header », c’est à dire une partie qui s’affiche au dessus des items du menu et qui permet d’afficher ce que l’on veut. Ce header est très utile pour valoriser l’image de marque de votre application tout en affichant des informations supplémentaires. Habituellement, ces informations concernent l’utilisateur connecté : la photo et le login par exemple. Vous le savez, il ne faut pas perturber les habitudes de nos chers utilisateurs ! 🙂 Alors voyons comment afficher ces informations.

Le header d’une NavigationView est en fait une vue classique, créée avec un fichier AXML. Une fois la vue créée, il suffit de spécifier à notre NavigationView que son header doit être égal à cette vue.

Dans un premier temps, créons notre vue. Je souhaite afficher une image de fond, ainsi que la photo de l’utilisateur actuel, son pseudo, et sa description. Ajoutez un fichier mainActivity_navigationView_header.axml dans le dossier Resources/layout de votre projet :

Si vous souhaitez reprendre les images que j’ai utilisées, tout est disponible sur mon Github 🙂

Maintenant que notre vue est créée, il faut paramétrer les textes et images en fonction de l’utilisateur actuel, puis spécifier à notre NavigationView que son header doit utiliser cette vue. Pour faire cela, il faut compléter le fichier MainActivity.cs :

Voila ! Rien d’autre à faire, vous pouvez compiler, déployer, et admirer le résultat de votre dur labeur :

 

Ajouter des badges de notification aux items de la NavigationView

Parfois vous souhaitez notifier votre utilisateur qu’il a de nouveaux messages à lire, ou plus généralement qu’une chose importante nécessite son intention. Pour cela, Android propose divers outils tels que les notifications push. Vous pouvez également notifier l’utilisateur directement via le menu, c’est très efficace. Lorsqu’un utilisateur voit un badge rouge avec un chiffre à l’intérieur, il comprend immédiatement qu’une chose nouvelle nécessite son intention. Nous allons voir comment mettre cela en oeuvre avec notre menu.

Commencez par compléter votre fichier left_menus.xml en rajoutant l’information app:actionViewClass à chaque item de votre menu :

C’est cette TextView qui va vous servir à afficher vos badges de notification.

 

Dans votre fichier MainAcitivity.cs, rajoutez maintenant le code permettant de styliser et afficher (ou pas) votre badge de notification. Pour ma part, j’affiche un carré rouge aux bords arrondis avec un numéro blanc à l’intérieur. Pour l’exemple, le badge de notification sera affiché ou caché à chaque clique effectué sur une entrée du menu, de manière dynamique. A vous de définir votre logique métier, en vous basant sur des requêtes API et/ou sur une base de données SQLite bien entendu 🙂

Et voici le contenu du fichier XML left_menus_itemBadge.xml, à rajouter dans le dossier Resources/drawable. Ce fichier sert à définir le carré rouge aux bords arrondis pour le background de notre TextView. Je ne copie pas mon fichier de couleurs, les sources complètes sont disponibles sur mon Github 🙂

Et le résultat :

 

 

J’espère que ces petits tips vous aurons aidé dans le développement de vos applications ! N’hésitez pas à commenter, poser des questions, proposer d’autres solutions, et surtout à montrer votre résultat 🙂