Interface utilisateur avancée

Introduction

Dans un contexte professionnel, l’interface d’une application Android est un élément qu’il ne faut pas négliger : dans un premier temps, c’est bien le design de l’application qui va donner aux utilisateurs du Play Store une première impression et leur permettre de préjuger de la qualité de votre application.

De fait, la conception de l’interface graphique est une charge de travail conséquente : outre les contraintes liées aux multiples tailles d’écrans et aux différentes versions du système Android, les normes ergonomiques ainsi que les contraintes imposées par les équipes d’infographistes (en général responsables de l’intégralité du design de l’application) apportent leur lot de difficultés pour le développeur.

Nous allons voir dans ce chapitre quelques astuces pour réaliser des mises en page complexes, puis nous verrons comment mettre en place les éléments de navigation suggérés par Google. Nous terminerons enfin ce chapitre en exposant comment, en utilisant des éléments graphiques créés en XML et les images redimensionnables, limiter les déclinaisons graphiques pour les pictogrammes, boutons et fonds d’écran.

Mise en page complexe

Pour commencer ce chapitre, nous allons passer en revue quelques notions qui simplifient la mise en page des écrans.

En effet, il peut être un peu frustrant, pour le développeur se retrouvant en situation de concevoir une application professionnelle, de s’apercevoir que, s’il maîtrise globalement bien toutes les notions de programmation, il n’arrive pas à réaliser simplement le design attendu par le client ou, plus directement, par l’équipe qui a conçu son design.

Bien évidemment, il n’existe pas de règle absolue en matière de conception d’écran : chaque développeur acquiert sa propre technique, basée sur sa propre expérience et ses propres aspirations. Certains préfèrent concevoir un écran spécifique pour chaque résolution, d’autres travaillent principalement par manipulation de vues au travers du code Java. Nous avons fait le choix de privilégier la conception de vues uniques, qui s’appliquent pour toutes les configurations d’écrans, et entièrement définies en XML (le fameux fichier de layout d’une activité).

1. Choix du layout

Le premier point à déterminer, lorsque l’on conçoit un écran, est la nature du layout sur lequel sera basé le design. Typiquement, la question se pose d’utiliser un linearLayout, un relativeLayout ou son lointain cousin, le constraintLayout. Si le premier a pour avantage une réelle simplicité de mise en œuvre, il ne permet que rarement la conception d’interfaces qui vont correctement s’adapter à chaque taille d’écran.

Le layout relatif, lui, est plus long à mettre en place : le positionnement relatif de chaque élément de l’écran demande plus de travail que le fait de simplement énumérer une liste de contrôles dans un ordre défini.

L’expérience montre que l’on n’a que très rarement un écran qui affiche une liste de contrôles, tous positionnés les uns en dessous des autres. Pour cette raison, une interface complexe est, dans la grande majorité des cas, synonyme de relativeLayout, et ce, pour deux raisons essentielles : la possibilité de...

Utiliser le Navigation Drawer

Apparu progressivement avec la version 4 d’Android, le Navigation Drawer s’est imposé comme un élément incontournable de l’interface des applications Android. Ce composant, littéralement "le tiroir de navigation", est en fait un panneau contenant des accès aux différents écrans d’une application - nous le nommerons panneau de navigation dans la suite de la section. Ce panneau vient se positionner par-dessus l’écran principal, sans le recouvrir en totalité, lorsque l’utilisateur opère un mouvement de balayage de l’écran (de gauche à droite) ou lorsqu’il clique sur l’icône située en haut à gauche de la barre d’action.

Le rôle du panneau de navigation est de présenter à l’utilisateur l’ensemble des écrans d’une application accessibles sans contexte particulier, lorsque celle-ci en comporte plusieurs : en effet, si une application possède deux ou trois écrans de premier niveau, le recours aux onglets est plus efficace.

Panneau de navigation dans l’application Inbox (Google)

La notion d’écran sans contexte est essentielle pour correctement intégrer ce composant dans une application : le panneau de navigation étant en général accessible depuis tous les écrans de l’application, son contenu ne peut, et ne doit, être dépendant du contenu de l’écran affiché, ou de quelque élément sélectionné par l’utilisateur. Pour rappel, les éléments de navigation contextuels doivent être affichés dans la barre d’action rapide, ou dans le menu contextuel accessible depuis cette barre.

1. Mettre en place le panneau de navigation

Le composant permettant l’affichage d’un panneau de navigation n’est pas natif à la plateforme Android, il est intégré dans la bibliothèque android-support-v4 : il faut donc, avant tout, intégrer cette bibliothèque au projet, en déclarant les dépendances suivantes dans le fichier build.gradle du module principal.

dependencies { 
   implementation 'com.android.support:appcompat-v7:27.1.1' 
   implementation 'com.android.support:design:27.1.1' ...

Créer des images redimensionnables

Régulièrement, le développeur d’application Android est confronté au problème des visuels redimensionnables, que ce soit pour les fonds d’écrans, les pictogrammes ou les arrière-plans de widgets (boutons et zones de texte, principalement). La problématique est toujours la même : concilier efficacité - ne pas multiplier inutilement les déclinaisons de graphiques, et esthétisme - ne pas afficher des visuels anamorphosés.

La plateforme Android propose deux solutions pour produire des images qui s’adaptent automatiquement aux dimensions des contrôles auxquels elles sont rattachées. Nous allons, dans cette section, passer en revue ces deux techniques, l’une orientée graphisme et l’autre plus spécifiquement adressée aux développeurs.

1. Les images 9-patch

a. Présentation

Les images nine-patch (le plus souvent notées 9-patch) sont des visuels au format PNG qui contiennent, en plus, des informations sur les zones qui peuvent être étirées par le système. Ces images portent pour extension de fichier le suffixe ".9.png".

Le principe de fonctionnement des images 9-patch est le suivant : sont définies dans l’image les zones horizontales et verticales qui peuvent être étirées pour s’adapter aux dimensions souhaitées, ainsi que les zones qui peuvent être remplies - dans le cas d’un bouton ou d’une zone de texte, par exemple.

La définition des différentes zones se fait en intégrant un espace supplémentaire de 1 pixel de chaque côté de l’image source, et en indiquant dans cet espace, par un pixel noir, que la zone est agrandissable ou peut être remplie. Les marges de 1 pixel à gauche et en haut de l’image permettent de définir les zones étirables, les marges à droite et en bas indiquant les zones qui peuvent être remplies (par du texte ou d’autres visuels).

Le schéma ci-dessous présente ces zones, pour un projet d’arrière-plan de zone de texte :

Comme on le voit sur le schéma, nous avons définis une zone extensible, que ce soit à gauche ou en haut, qui n’intègre pas les arrondis du bord...