• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 04/05/2018

Comprenez comment personnaliser votre application

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Introduction

Dans ce cours dédié à la personnalisation d'applications sur Android, nous allons étudier ensemble et progressivement les différentes manières d'améliorer l'apparence de nos applications en nous concentrant principalement sur l'interface utilisateur (UI) ainsi que l'expérience utilisateur (UX).

La personnalisation sur Android

Si vous avez déjà fait un peu de web, vous connaissez sûrement la notion de feuilles de style CSS (pour Cascading Style Sheets). A travers elles, nous pouvons créer un ensemble de règles qui nous permettront de définir à quoi ressembleront nos pages web :

  • Nous pouvons spécifier une apparence spéciale aux balises de texte comme par exemple <h1>, <h2>, etc... ou encore la balise <p>.

  • Nous pouvons créer des apparences susceptibles d'être utilisées plusieurs fois par différents éléments HTML grâce aux sélecteurs class et id.

Sur Android, nous allons retrouver quasiment les mêmes concepts à travers les thèmes et les styles ! :)  

Les styles sont un ensemble de valeurs appliquées à des propriétés. Par exemple, nous appliquerons la couleur verte (valeur) à un arrière-plan (propriété). Un style pourra être appliqué directement sur des composants graphiques (TextView, Button, etc...) ou être utilisé à travers des thèmes fournissant, quant à eux, une apparence globale à toutes sortes de composants graphiques ou éléments de notre interface utilisateur.

Android étant assez bien conçu, vous ne serez pas obligés de créer un thème ou des styles pour votre application : cette dernière bénéficiera automatiquement d'un thème prêt-à-l'emploi par défaut... :D D'ailleurs, ce thème par défaut a beaucoup évolué au fil des versions d'Android, affectant bien sûr l'apparence des principaux composants graphiques d'Android.

Les premières versions d'Android possédaient le thème par défaut nommé...  Theme. C'est en quelque sorte le père de tous les thèmes ! Tous les futurs thèmes ont hérité de lui.

Aperçu du thème
Aperçu du thème "Theme"

L'interface utilisateur appliquant le thème  Theme  avait une apparence particulière :

  • En haut de l'écran, on retrouvait une fine "barre de titre" grise, ancêtre de notre actuelle Toolbar, affichant le nom de notre application.

  • Une couleur orange était appliquée à tout champ focus par l'utilisateur.

  • Un style... hum hum... particulier était également défini par défaut pour les boutons de notre application.

Puis, Android 3.0 (API 11) arriva, apportant avec lui le fameux thème Theme.Holo  appelé également "Thème Holographique" qui changea grandement l'apparence de notre interface utilisateur.

Aperçu du thème
Aperçu du thème "Theme.Holo"

Ce nouveau thème plus travaillé ajoutait plus de profondeurs à l'apparence d'une application Android :

  • En haut de l'écran, la barre de titre "Action Bar" est maintenant plus large et contient l'icône de l'application.

  • Une couleur bleue était appliquée à tout champ focus par l'utilisateur.

  • Une couleur de fond par défaut est ajouté automatiquement à chaque écran.

Récemment, avec l'arrivée d'Android 5.0, le thème  Theme.Material  fut rendu disponible afin d'aider les développeurs à construire plus facilement des interfaces utilisateurs implémentant les concepts du Material Design.

Aperçu du thème
Aperçu du thème "Theme.Material"

Ce dernier thème apporte les changements suivants :

  • La barre de titre (Toolbar) ne contient désormais plus l'icône de notre application.

  • Une couleur bleue/verte est appliquée à tout champ focus par l'utilisateur.

  • Les différents principaux composants graphiques suivent maintenant les recommandations du Material Design.

On retrouve d'ailleurs plus généralement ce thème sous l'appellation  Theme.AppCompat, qui nous permet de gérer le Material Design sur des versions d'Android inférieures à la version Lollipop (API 21).

Présentation de l'application "Wonder"

Wonder est la mini-application que nous améliorerons tout au long de ce cours. Son objectif est d'afficher les dernières tendances "Design" récupérées depuis l'API du site internet Behance.

Comme vous pouvez le voir, l'application Wonder est déjà pré-développée, mais son interface utilisateur laisse sérieusement à désirer... Pour une application "Design", c'est le comble ! :p

D'ailleurs, téléchargez maintenant cette mini-application Wonder. Voici quelques explications sur les principaux fichiers présents :

  • Fichiers de ressources : Les fichiers de ressources  colors.xml , strings.xml  etstyles.xml sont déjà présents mais quasiment vierges.

  • Fichiers de layout : Les fichiers layouts des principaux écrans (Main et Detail) sont présents et déjà configurés. N'hésitez pas à les consulter pour vous en imprégner. Ils seront en revanche améliorés tout au long de ce cours.

  • Fichiers de ressources : Différentes images ont également été importées afin de nous faire gagner du temps sur les différents chapitres de ce cours.

  • Classes contrôleurs : Les classes d'activités ainsi que de fragments ont déjà été créées et contiennent toute la logique métier de notre application. Vous remarquerez également que nous y avons implémenté l'Architecture Components vu dans un précédent cours.

  • Librairies externes : Les libraires Glide, Butterknife, Architecture Components, Retrofit, Gson ainsi que RxJava ont également été installées via Gradle.

J'ai également choisi d'organiser la structure du projet en fonctionnalités, plutôt qu'en MVC. Cela ne change cependant pas le fait que notre architecture restera en MVC... ;)

Le but de ce cours est de se concentrer sur la manière dont nous personnalisons une application Android, et non sur la partie métier purement technique que vous devez à présent maîtriser. C'est d'ailleurs pour cette raison que nous ne partons pas d'une application totalement vierge... :soleil:

Et c'est tout ! Lancez l'application Wonder. Le résultat devrait être le suivant :

Aperçu de la mini-application Wonder
Aperçu de la mini-application Wonder

Encore une fois, n'hésitez pas à vous imprégner du code de base déjà réalisé, afin de le comprendre un minimum. Vous allez voir, tout a déjà été vu dans les précédents cours...  :)

Exemple de certificat de réussite
Exemple de certificat de réussite