Cette page a été traduite par l'API Cloud Translation.

Principes de base d'Android en Kotlin 10.1 : Styles et thèmes

Cet atelier de programmation fait partie du cours Principes de base d'Android en Kotlin. Vous tirerez pleinement parti de ce cours en suivant les ateliers de programmation dans l'ordre. Tous les ateliers de programmation du cours sont listés sur la page de destination des ateliers de programmation Principes de base d'Android en Kotlin.

Introduction à la conception

Cette série d'ateliers de programmation se concentre sur l'un des aspects les plus importants du développement Android : la conception d'applications. Les aspects évidents de la conception d'une application sont les vues, le texte et les boutons, ainsi que leur emplacement sur l'écran, et les couleurs et les polices qu'ils utilisent. Les conseils donnés à l'utilisateur sur les actions à effectuer ensuite sont également un aspect essentiel de la conception. Les utilisateurs doivent pouvoir identifier d'un coup d'œil ce qu'ils regardent, ce qui est important et ce qu'ils peuvent faire.

Comparez les deux écrans ci-dessous. Notez qu'en déplaçant des éléments et en attirant l'attention sur ce qui est important, vous pouvez aider l'utilisateur à comprendre ce qui se passe. Pour les écrans simples, une bonne conception signifie souvent qu'il faut afficher moins d'éléments. Pour les écrans contenant de nombreuses informations importantes, une bonne conception permet de comprendre rapidement les informations denses. Lorsque vous travaillez sur des applications Android, vous pouvez entendre parler du concept d'architecture de l'information (AI).

Un autre niveau de conception consiste à créer des parcours utilisateur cohérents, ou cas d'utilisation, qui permettent aux utilisateurs d'accomplir des tâches. Cette forme de conception est appelée conception de l'expérience utilisateur (UXD, User Experience Design), et certains concepteurs s'y spécialisent.

Si vous n'avez pas accès à un graphiste, voici quelques conseils pour vous lancer :

Définissez des cas d'utilisation. Décrivez ce que les utilisateurs doivent accomplir avec votre application et comment.
Implémentez une conception. Ne vous attachez pas à votre premier brouillon et contentez-vous de le rendre "suffisant", car vous le modifierez après avoir vu comment les utilisateurs réels interagissent avec lui.
Recueillez des commentaires. Trouvez des personnes qui peuvent tester votre application : votre famille, vos amis ou même des personnes que vous venez de rencontrer dans un Google Developer Group. Demandez-lui d'utiliser votre application pour effectuer un cas d'utilisation pendant que vous l'observez et prenez des notes détaillées.
Affiner ! Avec toutes ces informations, améliorez l'application, puis testez-la à nouveau.

Voici d'autres questions à vous poser pour concevoir une expérience d'application optimale. Dans les ateliers de programmation précédents, vous avez appris des techniques pour résoudre ces problèmes :

L'application perd-elle son état lorsque l'utilisateur fait pivoter son appareil ?
Que se passe-t-il lorsque l'utilisateur ouvre l'application ? L'utilisateur voit-il une icône de chargement ou les données sont-elles prêtes dans un cache hors connexion ?
L'application est-elle codée de manière efficace et réagit-elle toujours aux commandes tactiles de l'utilisateur ?
L'application interagit-elle avec les systèmes backend de manière à ce que l'utilisateur ne soit jamais confronté à des données étranges, incorrectes ou obsolètes ?

Lorsque vous développez des applications pour un public plus large, il est essentiel de les rendre accessibles au plus grand nombre de types d'utilisateurs possible. Exemple :

De nombreux utilisateurs interagissent avec les systèmes informatiques de différentes manières. De nombreux utilisateurs sont daltoniens. Les couleurs qui contrastent pour un utilisateur peuvent ne pas fonctionner pour un autre. De nombreux utilisateurs souffrent de déficiences visuelles, allant de la simple nécessité de porter des lunettes de lecture à la cécité.
Certains utilisateurs ne peuvent pas utiliser d'écran tactile et interagissent avec l'appareil à l'aide d'autres périphériques d'entrée, comme des boutons.

Une bonne conception est le meilleur moyen d'inciter les utilisateurs à utiliser votre application.

Ces ateliers de programmation sont trop courts pour vous apprendre tout ce qu'il faut savoir sur la conception pour Android, mais ils vous permettront de bien démarrer. Vous pourrez ensuite continuer à apprendre et à vous développer par vous-même.

Ce que vous devez déjà savoir

Vous devez maîtriser les éléments suivants :

Créer des applications avec des activités et des fragments, et naviguer entre les fragments en transmettant des données
Utiliser des vues et des groupes de vues pour organiser une interface utilisateur (UI), y compris RecyclerView
Utiliser les composants d'architecture, y compris ViewModel, avec l'architecture recommandée pour créer une application bien structurée et efficace
Liaison de données, coroutines et gestion des clics
Se connecter à Internet et mettre en cache des données localement à l'aide d'une base de données Room
Définir les propriétés de la vue
Extraire et utiliser des ressources à partir de fichiers de ressources XML

Points abordés

Principes de base du système de style d'Android
Utiliser des attributs, des styles et des thèmes pour personnaliser votre application

Objectifs de l'atelier

Améliorer la conception d'une application de démarrage avec des attributs de vue, des styles et des thèmes

L'application de démarrage GDG-finder s'appuie sur tout ce que vous avez appris jusqu'à présent dans ce cours.

L'application utilise ConstraintLayout pour organiser trois écrans. Deux des écrans ne sont que des fichiers de mise en page que vous utiliserez pour explorer les couleurs et le texte sur Android.

Le troisième écran est un outil de localisation des GDG. Les GDG (Google Developer Groups) sont des communautés de développeurs qui se concentrent sur les technologies Google, y compris Android. Les GDG du monde entier organisent des meetups, des conférences, des study jams et d'autres événements.

Lorsque vous développez cette application, vous travaillez sur la liste réelle des GDG. L'écran de recherche utilise la position de l'appareil pour trier les GDG par distance.

Si vous avez de la chance et qu'un GDG existe dans votre région, vous pouvez consulter son site Web et vous inscrire à ses événements. Les événements GDG sont un excellent moyen de rencontrer d'autres développeurs Android et d'apprendre les bonnes pratiques du secteur qui n'ont pas été abordées dans ce cours.

Les captures d'écran ci-dessous montrent comment votre application évoluera du début à la fin de cet atelier de programmation.

Android fournit un système de style riche qui vous permet de contrôler l'apparence de toutes les vues de votre application. Vous pouvez utiliser des thèmes, des styles et des attributs de vue pour affecter le style. Le diagramme ci-dessous récapitule la priorité de chaque méthode de stylisation. Le diagramme en forme de pyramide montre l'ordre dans lequel les méthodes de style sont appliquées par le système, de bas en haut. Par exemple, si vous définissez la taille du texte dans le thème, puis que vous la définissez différemment dans les attributs de la vue, les attributs de la vue remplaceront le style du thème.

Afficher les attributs

Utilisez les attributs de vue pour définir explicitement les attributs de chaque vue. (Contrairement aux styles, les attributs de vue ne sont pas réutilisables.)
Vous pouvez utiliser toutes les propriétés qui peuvent être définies via des styles ou des thèmes.

Utilisez-le pour des conceptions personnalisées ou ponctuelles telles que les marges, les marges intérieures ou les contraintes.

Styles

Utilisez un style pour créer un ensemble d'informations de style réutilisables, comme la taille de la police ou les couleurs.
Idéal pour déclarer de petits ensembles de conceptions courantes utilisées dans toute votre application.

Appliquez un style à plusieurs vues, en remplaçant le style par défaut. Par exemple, utilisez un style pour créer des en-têtes ou un ensemble de boutons dont le style est cohérent.

Style par défaut

Il s'agit du style par défaut fourni par le système Android.

Thèmes

Utilisez un thème pour définir les couleurs de l'ensemble de votre application.
Utilisez un thème pour définir la police par défaut de l'ensemble de l'application.
S'applique à toutes les vues, telles que les vues de texte ou les boutons radio.
Utilisez-le pour configurer les propriétés que vous pouvez appliquer de manière cohérente à l'ensemble de l'application.

TextAppearance

Pour la mise en forme avec des attributs de texte uniquement, tels que fontFamily.

Lorsqu'Android applique un style à une vue, il utilise une combinaison de thèmes, de styles et d'attributs que vous pouvez personnaliser. Les attributs remplacent toujours tout ce qui est spécifié dans un style ou un thème. Les styles remplacent toujours tout ce qui est spécifié dans un thème.

Les captures d'écran ci-dessous montrent l'application GDG-finder avec un thème clair (à gauche) et un thème sombre (à droite), ainsi qu'avec une police et des tailles d'en-tête personnalisées. Vous pouvez l'implémenter de plusieurs façons. Vous en apprendrez certaines dans cet atelier de programmation.

Dans cette tâche, vous allez utiliser des attributs pour styliser les en-têtes du texte dans la mise en page de l'application.

Téléchargez et exécutez l'application de démarrage GDG-finder.
Vous remarquerez que l'écran d'accueil contient beaucoup de texte mis en forme de manière uniforme, ce qui rend difficile de comprendre le contenu de la page et ce qui est important.
Ouvrez le fichier de mise en page home_fragment.xml.
Notez que la mise en page utilise ConstraintLayout pour positionner les éléments à l'intérieur d'un ScrollView.
Notez que pour chaque vue, les attributs de mise en page de contrainte et de marge sont définis dans la vue, car ces attributs ont tendance à être personnalisés pour chaque vue et écran.
Dans la vue de texte title, ajoutez un attribut textSize pour modifier la taille du texte sur 24sp.

Pour rappel, sp signifie pixels indépendants de l'échelle, qui sont mis à l'échelle en fonction de la densité de pixels et de la taille de police que l'utilisateur définit dans les paramètres de son appareil. Android détermine la taille du texte à l'écran lorsqu'il le dessine. Utilisez toujours sp pour les tailles de texte.

<TextView
       android:id="@+id/title"
...

android:textSize="24sp"

Définissez le textColor de la vue de texte title sur gris opaque en définissant une valeur aRGB de #FF555555.

<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"

Pour ouvrir l'onglet Aperçu dans Android Studio, sélectionnez Affichage > Fenêtres d'outil > Aperçu ou cliquez sur le bouton vertical Aperçu sur le bord droit de l'éditeur de mise en page. Dans l'aperçu, vérifiez que le titre est gris et plus grand qu'avant, comme indiqué ci-dessous.

Définissez le style du sous-titre pour qu'il ait la même couleur que l'en-tête, avec une police plus petite, 18sp. (L'alpha par défaut est FF, opaque. Vous pouvez omettre la valeur alpha si vous ne la modifiez pas.)

<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

Dans cet atelier de programmation, l'objectif est de styliser l'application pour qu'elle soit à la fois fantaisiste et professionnelle, mais vous pouvez la styliser comme vous le souhaitez. Essayez les attributs suivants pour l'affichage de texte subtitle. Utilisez l'onglet Aperçu pour voir comment l'apparence de votre application change. Supprimez ensuite ces attributs.

<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"

N'oubliez pas d'annuler les attributs textAllCaps, textStyle et background de la vue subtitle avant de continuer.
Exécutez votre application. Elle devrait déjà être plus agréable à regarder.

Lorsque vous utilisez des polices avec votre application, vous pouvez inclure les fichiers de police nécessaires dans votre APK. Bien que simple, cette solution n'est généralement pas recommandée, car elle ralentit le téléchargement et l'installation de votre application.

Android permet aux applications de télécharger des polices au moment de l'exécution à l'aide de l'API Downloadable Fonts. Si votre application utilise la même police qu'une autre application sur l'appareil, Android ne télécharge la police qu'une seule fois, ce qui permet d'économiser de l'espace de stockage sur l'appareil.

Dans cette tâche, vous allez utiliser des polices téléchargeables pour définir la police de chaque vue de votre application qui utilise le thème.

Étape 1 : Appliquez une police téléchargeable

Ouvrez home_fragment.xml dans l'onglet Conception.
Dans le volet Arborescence des composants, sélectionnez la vue de texte title.
Dans le volet Attributs, recherchez l'attribut fontFamily. Vous le trouverez dans la section Tous les attributs ou vous pouvez simplement le rechercher.
Cliquez sur la flèche du menu déroulant.
Faites défiler la page jusqu'à Autres polices , puis sélectionnez-la. La fenêtre Ressources s'ouvre.

Dans la fenêtre Ressources, recherchez lobster ou simplement lo.
Dans les résultats, sélectionnez Lobster Two.
À droite, sous le nom de la police, sélectionnez la case d'option Créer une police téléchargeable. puis sur OK.
Ouvrez le fichier manifeste Android.
Près du bas du fichier manifeste, recherchez la nouvelle balise <meta-data> avec les attributs name et resource définis sur "preloaded_fonts". Cette balise indique aux services Google Play que cette application souhaite utiliser les polices téléchargées. Lorsque votre application s'exécute et demande la police Lobster Two, le fournisseur de police la télécharge depuis Internet, si elle n'est pas déjà disponible sur l'appareil.

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

Dans le dossier res/values, recherchez le fichier preloaded_fonts.xml, qui définit le tableau listant toutes les polices téléchargeables pour cette application.
De même, le fichier res/fonts/lobster_two.xml contient des informations sur la police.
Ouvrez home_fragment.xml et remarquez dans le code et l'aperçu que la police Lobster Two est appliquée à title TextView, et donc au titre.

Ouvrez res/values/styles.xml et examinez le thème AppTheme par défaut qui a été créé pour le projet. Il se présente actuellement comme suit. Pour appliquer la nouvelle police Lobster Two à tout le texte, vous devez mettre à jour ce thème.
Dans la balise <style>, notez l'attribut parent. Chaque balise de style peut spécifier un parent et hériter de tous ses attributs. Le code spécifie le Theme défini par les bibliothèques Android. Le thème MaterialComponents qui spécifie tout, du fonctionnement des boutons à la façon de dessiner les barres d'outils. Le thème comporte des valeurs par défaut judicieuses. Vous pouvez donc personnaliser uniquement les parties qui vous intéressent. L'application utilise la version Light de ce thème sans barre d'action (NoActionBar), comme vous pouvez le voir sur la capture d'écran ci-dessus.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>

Dans le style AppTheme, définissez la famille de polices sur lobster_two. Vous devez définir android:fontFamily et fontFamily, car le thème parent utilise les deux. Vous pouvez cocher home_fragment.xml dans l'onglet Conception pour prévisualiser vos modifications.

<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>

Exécutez à nouveau l'application. La nouvelle police est appliquée à tout le texte. Ouvrez le panneau de navigation et accédez aux autres écrans. Vous verrez que la police y est également appliquée.

Étape 2 : Appliquez le thème au titre

Dans home_fragment.xml, recherchez l'affichage de texte title, qui comporte l'attribut de la police lobster_two. Supprimez l'attribut fontFamily et exécutez l'application. Comme le thème définit la même famille de polices, rien ne change.
Remettez un autre attribut fontFamily dans la vue de texte title :
app:fontFamily="serif-monospace"Assurez-vous qu'il se trouve dans l'espace app !

<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"

Exécutez l'application. Vous verrez que l'attribut local à la vue remplace le thème.

Supprimez l'attribut fontFamily de la vue de texte title.

Les thèmes sont idéaux pour appliquer une thématisation générale à votre application, comme une police par défaut et des couleurs principales. Les attributs sont idéaux pour styliser une vue spécifique et ajouter des informations de mise en page telles que les marges, les marges intérieures et les contraintes, qui ont tendance à être spécifiques à chaque écran.

Au milieu de la pyramide de la hiérarchie des styles se trouvent les styles. Les styles sont des "groupes" d'attributs réutilisables que vous pouvez appliquer aux vues de votre choix. Dans cette tâche, vous allez utiliser un style pour le titre et le sous-titre.

Étape 1 : Créez un style

Ouvrez res/values/styles.xml.
Dans la balise <resources>, définissez un nouveau style à l'aide de la balise <style>, comme indiqué ci-dessous.

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

Il est important de considérer les noms de style comme sémantiques lorsque vous les nommez. Sélectionnez un nom de style en fonction de l'utilisation du style, et non en fonction des propriétés qu'il affecte. Par exemple, appelez ce style Title, et non LargeFontInGrey. Ce style sera utilisé par tous les titres de votre application. Par convention, les styles TextAppearance sont appelés TextAppearance.Name. Dans ce cas, le nom est TextAppearance.Title.

Le style a un parent, tout comme un thème peut en avoir un. Cette fois-ci, au lieu d'étendre un thème, le style étend un style, TextAppearance.MaterialComponents.Headline6. Ce style est un style de texte par défaut pour le thème MaterialComponents. En l'étendant, vous modifiez le style par défaut au lieu de partir de zéro.

Dans le nouveau style, définissez deux éléments. Dans un élément, définissez textSize sur 24sp. Dans l'autre élément, définissez textColor sur le même gris foncé que précédemment.

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

Définissez un autre style pour les sous-titres. Nommez-le TextAppearance.Subtitle.
Étant donné que la seule différence par rapport à TextAppearance.Title se trouve dans la taille du texte, définissez ce style comme enfant de TextAppearance.Title.
Dans le style Subtitle, définissez la taille du texte sur 18sp. Voici le style complet :

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

Étape 2 : Appliquer le style que vous avez créé

Dans home_fragment.xml, ajoutez TextAppearance.Style Title à la vue de texte title. Supprimez les attributs textSize et textColor.

Les thèmes remplacent tous les styles TextAppearance que vous définissez. (Le diagramme pyramidal au début de l'atelier de programmation montre l'ordre dans lequel le style est appliqué.) Utilisez la propriété textAppearance pour appliquer le style en tant que TextAppearance afin que la police définie dans Theme remplace celle que vous définissez ici.

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

Ajoutez également le style TextAppearance.Subtitle à la vue de texte subtitle, puis supprimez les attributs textSize et textColor. Vous devez également appliquer ce style en tant que textAppearance afin que la police définie dans le thème remplace celle que vous avez définie ici.

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

Exécutez l'application. Votre texte est désormais stylisé de manière cohérente.

Projet Android Studio : GDGFinderStyles.

Utilisez des thèmes, des styles et des attributs sur les vues pour modifier leur apparence.
Les thèmes affectent le style de l'ensemble de votre application et sont fournis avec de nombreuses valeurs prédéfinies pour les couleurs, les polices et les tailles de police.
Un attribut s'applique à la vue dans laquelle il est défini. Utilisez des attributs si vous avez un style qui ne s'applique qu'à une seule vue, comme les marges intérieures, les marges extérieures et les contraintes.
Les styles sont des groupes d'attributs pouvant être utilisés par plusieurs vues. Par exemple, vous pouvez définir un style pour tous les en-têtes de contenu, boutons ou vues de texte.
Les thèmes et les styles héritent de leur thème ou style parent. Vous pouvez créer une hiérarchie de styles.
Les valeurs d'attribut (définies dans les vues) remplacent les styles. Les styles remplacent le style par défaut. Les styles remplacent les thèmes. Les thèmes remplacent tout style défini par la propriété textAppearance.

Définissez les styles dans le fichier de ressources styles.xml à l'aide des balises <style> et <item>.

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

L'utilisation de polices téléchargeables permet aux utilisateurs d'accéder à des polices sans augmenter la taille de votre APK. Pour ajouter une police téléchargeable à une vue :

Sélectionnez la vue dans l'onglet Conception, puis Autres polices dans le menu déroulant de l'attribut fontFamily.
Dans la boîte de dialogue Ressources, recherchez une police et sélectionnez le bouton radio Créer une police téléchargeable.
Vérifiez que le fichier manifeste Android inclut une balise de métadonnées pour les polices préchargées.

Lorsque l'application demande une police pour la première fois et que celle-ci n'est pas encore disponible, le fournisseur de police la télécharge depuis Internet.

Documentation pour les développeurs Android :

Autres ressources :

À quoi ressemble votre texte ?
Hexadécimal
Cours Udacity Developing Android Apps with Kotlin (Développement d'applications Android avec Kotlin)
Kotlin Bootcamp for Programmers (Formation Kotlin pour les programmeurs) (cours Udacity)
Ateliers de programmation Kotlin Bootcamp for Programmers

Cette section répertorie les devoirs possibles pour les élèves qui suivent cet atelier de programmation dans le cadre d'un cours animé par un enseignant. Il revient à l'enseignant d'effectuer les opérations suivantes :

Attribuer des devoirs si nécessaire
Indiquer aux élèves comment rendre leurs devoirs
Noter les devoirs

Les enseignants peuvent utiliser ces suggestions autant qu'ils le souhaitent, et ne doivent pas hésiter à attribuer d'autres devoirs aux élèves s'ils le jugent nécessaire.

Si vous suivez cet atelier de programmation par vous-même, n'hésitez pas à utiliser ces devoirs pour tester vos connaissances.

Répondre aux questions suivantes

Question 1

Quelle balise permet de définir des thèmes ?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

Question 2

Quel cas d'utilisation n'est PAS adapté pour les styles ?

▢ Définir les contraintes d'une vue.

▢ Définir la couleur d'arrière-plan des titres.

▢ Unifiez la taille de la police dans les différentes vues.

▢ Définissez la couleur du texte pour plusieurs vues.

Question 3

Quelle est la différence entre les thèmes et les styles ?

▢ Les thèmes s'appliquent à l'ensemble de l'application, tandis que vous pouvez appliquer des styles à des vues spécifiques.

▢ Les thèmes ne peuvent pas hériter d'autres thèmes, mais les styles peuvent hériter d'autres styles.

▢ Les styles ne peuvent pas hériter d'autres styles, mais les thèmes peuvent hériter d'autres thèmes.

▢ Les thèmes sont fournis par le système Android, tandis que les styles sont définis par le développeur.

Question 4

Si un TextView de votre application comporte un Theme qui définit la taille de la police sur 12sp, un style défini qui la définit sur 14sp et un attribut fontSize de 16sp, quelle est la taille de la police affichée à l'écran ?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

Passez à la leçon suivante : 10.2 : Material Design, dimensions et couleurs

Pour obtenir des liens vers d'autres ateliers de programmation de ce cours, consultez la page de destination des ateliers de programmation Principes de base d'Android en Kotlin.