Thématisation Material avec Jetpack Compose

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

1. Avant de commencer

Material Design est un système de conception créé par Google pour créer des expériences numériques de haute qualité pour Android, ainsi que pour d'autres plates-formes mobiles et Web. Il s'inspire du monde physique et de ses textures, y compris de la façon dont les objets reflètent la lumière et projettent des ombres. Vous y trouverez des consignes vous expliquant comment élaborer une application à l'interface lisible, attrayante et cohérente.

Dans cet atelier de programmation, vous allez apprendre à utiliser la thématisation Material, qui vous permet d'utiliser Material Design dans votre application, et découvrirez comment personnaliser les couleurs, la typographie et les formes. Vous pouvez personnaliser votre application autant que vous le souhaitez. Vous allez également apprendre à ajouter une barre d'application supérieure pour afficher le nom et l'icône de l'application.

Conditions préalables

  • Vous connaissez les bases du langage de programmation Kotlin, y compris la syntaxe, les fonctions et les variables.
  • Vous savez créer des mises en page dans Compose, y compris des lignes et des colonnes avec marge intérieure.
  • Vous savez créer des listes simples dans Compose.

Points abordés

  • Appliquer la thématisation Material à une application Compose.
  • Ajouter des polices personnalisées à votre application.
  • Ajouter une palette de couleurs personnalisée à votre application.
  • Ajouter des formes personnalisées aux éléments de votre application.
  • Ajouter une barre d'application supérieure à votre application.

Objectifs de l'atelier

  • Vous allez créer une application attrayante qui respecte les bonnes pratiques Material Design.

Ce dont vous avez besoin

  • La dernière version d'Android Studio.
  • Une connexion Internet pour télécharger le code de démarrage et les polices.

2. Regarder la vidéo du code pas à pas (facultatif)

Si vous souhaitez voir un formateur réaliser cet atelier de programmation, regardez la vidéo ci-dessous.

Nous vous recommandons d'afficher la vidéo en plein écran (à l'aide de l'icône Ce symbole qui indique le mode plein écran représente quatre coins d'un carré mis en évidence. dans l'angle inférieur droit de la vidéo) pour mieux voir Android Studio et le code.

Cette étape est facultative. Vous pouvez également ignorer la vidéo et passer immédiatement aux instructions de l'atelier de programmation.

3. Présentation de l'application

Dans cet atelier de programmation, vous allez créer Woof, une application qui affiche une liste de chiens et utilise Material Design pour créer une expérience attractive dans l'application.

Cette image montre l'application Woof avec une barre d'état personnalisée sur le thème clair.

Nous avons demandé à un graphiste de nous aider à concevoir l'application Woof, y compris pour le choix de la palette de couleurs, de la typographie et des formes. Nous savons que vous n'aurez pas tous accès à un graphiste. Dans cet atelier de programmation, nous allons vous montrer les possibilités qu'offre la thématisation Material. Dans cet atelier de programmation, vous découvrirez comment utiliser la thématisation Material pour améliorer l'apparence de vos prochaines applications.

Vous trouverez ci-dessous les spécifications relatives à la conception rédigées par le graphiste. Elles détaillent la conception visuelle de l'application, à la fois pour le thème clair et le thème sombre.

Conception de l'application :

Thème clair

Thème sombre

Cette image montre l'application Woof avec une barre d'état personnalisée sur le thème clair.

Palette de couleurs

La palette de couleurs des thèmes clair et sombre est proposée ci-dessous par le graphiste.

Clair :

Couleur

Nom

Couleur HEX

Encoche

Cette image représente la couleur Grey50.

Grey50

#F8F9FA

principale

Cette image représente la couleur Green50.

Green50

#E6F4EA

surface

Cette image représente la couleur Green100.

Green100

#CEEAD6

arrière-plan

Cette image représente la couleur Grey700.

Grey700

#5F6368

secondaire

Cette image représente la couleur Grey900.

Grey900

#202124

onSurface

Cette image représente la couleur Grey900.

Grey900

#202124

onPrimary

Sombre :

Couleur

Nom

Couleur HEX

Encoche

Cette image représente la couleur blanche.

Blanc

#FFFFFF

principale

Cette image représente la couleur Grey100.

Grey100

#F1F3F4

onSurface

Cette image représente la couleur Grey100.

Grey100

#F1F3F4

onPrimary

Cette image représente la couleur Cyan700.

Cyan700

#129EAF

surface

Cette image représente la couleur Cyan900.

Cyan900

#007B83

arrière-plan

Cette image représente la couleur Grey900.

Grey900

#202124

secondaire

Typographie

Vous trouverez ci-dessous les polices de l'application, choisies par le graphiste.

Titre

Police

Épaisseur de police

Taille

h1

Cette image représente la police Abril Fatface.

Normale

30sp

h2

Cette image représente la police Montserrat.

Gras

20sp

h3

Cette image représente la police Montserrat.

Gras

14sp

body1

Cette image représente la police Montserrat.

Normale

14sp

Fichier du thème

Le fichier Theme.kt contient toutes les informations sur le thème de l'application, lequel est défini par des couleurs, des formes et une typographie. Vous ne le modifierez qu'une seule fois au cours de cet atelier de programmation, mais il est important de le connaître. Dans ce fichier se trouve le composable WoofTheme(), qui définit les couleurs, la typographie et les formes de l'application.

@Composable
fun WoofTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
   val colors = if (darkTheme) {
       DarkColorPalette
   } else {
       LightColorPalette
   }

   MaterialTheme(
       colors = colors,
       typography = Typography,
       shapes = Shapes,
       content = content
   )
}

Dans MainActivity.kt, le WoofTheme() est ajouté pour fournir la thématisation Material.

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           WoofTheme {
               WoofApp()
           }
       }
   }
}

Examinez l'élément DefaultPreview(). Le WoofTheme() est également ajouté pour ajouter la thématisation Design dans l'onglet Preview (Aperçu).

@Preview
@Composable
fun DefaultPreview() {
   WoofTheme(darkTheme = false) {
       WoofApp()
   }
}

4. Télécharger le code de démarrage

  1. Accédez à la page du dépôt GitHub fournie pour le projet.
  2. Cliquez sur le bouton Code. Une boîte de dialogue s'ouvre.

1debcf330fd04c7b.png

  1. Dans la boîte de dialogue, cliquez sur l'onglet HTTPS, puis sur d80cda5fcac5cc83.png à côté de l'URL pour la copier. Utilisez cette URL dans Android Studio.

52117cef9280e2c3.png

  1. Ouvrez Android Studio si ce n'est pas déjà fait, puis cliquez sur Obtenir depuis VCS dans la fenêtre Bienvenue dans Android Studio.

38e3cb13f6cbf3b8.png

  1. Si Android Studio est déjà ouvert, sélectionnez Fichier > Nouveau > Projet depuis le contrôle des versions.

eb859f5f2f920118.png

  1. Dans la boîte de dialogue Obtenir à partir du contrôle des versions, assurez-vous que Git est sélectionné pour Contrôle des versions.

c1ff21b37a87da88.png

  1. Dans la zone de texte URL, saisissez le lien que vous avez copié à partir de la page du dépôt GitHub.
  2. Dans le menu Répertoire, sélectionnez le répertoire dans lequel vous souhaitez cloner le code source à partir du dépôt GitHub.

d872acd8fb88d532.png

  1. Cliquez sur Cloner.
  2. Attendez qu'Android Studio télécharge et ouvre le projet.
  3. Dans le menu de navigation d'Android Studio, cliquez sur 8de56cba7583251f.png Exécuter l'application, puis assurez-vous que l'application est compilée comme prévu.
  4. Dans le menu de navigation, cliquez sur Git > Branches….

3b3d9c44dcc1327a.png

  1. Dans la boîte de dialogue Branches Git, sous la section Branches distantes, sélectionnez le nom de la branche indiqué précédemment, puis cliquez sur Extraire.

4d189e9e70df0234.png

  1. Si vous devez changer de branche, cliquez sur Git > Branches, puis sélectionnez la branche à utiliser et cliquez sur Extraction intelligente.

596d8337aba9e937.png

Explorer le code de démarrage

  1. Ouvrez le code de démarrage dans Android Studio.
  2. Ouvrez com.example.woof > data > Dog.kt. Il contient le Dog data class qui sera utilisé pour représenter la photo, le nom, l'âge et les jeux préférés du chien. Il contient également une liste de chiens et les données que vous utiliserez dans votre application.
  3. Ouvrez res > drawable. Il contient tous les éléments image dont vous avez besoin pour ce projet, y compris l'icône de l'application, les images de chiens et les icônes.
  4. Ouvrez res > values > strings.xml. Il contient les chaînes que vous utilisez dans cette application, y compris le nom de l'appli, les noms des chiens, leur description et plus encore.
  5. Ouvrez MainActivity.kt. Ce code permet de créer une liste simple qui affiche la photo d'un chien, son nom et son âge.
  6. WoofApp() contient un élément LazyColumn qui affiche les DogItems.
  7. DogItem() contient un élément Row qui affiche une photo du chien et des informations le concernant.
  8. DogIcon() affiche une photo du chien.
  9. DogInformation() contient le nom et l'âge du chien.

Assurez-vous que votre émulateur/appareil est en thème clair.

Dans cet atelier de programmation, vous allez utiliser les thèmes clair et sombre. Toutefois, la majorité de l'atelier est en thème clair. Avant de commencer, assurez-vous que votre appareil ou votre émulateur est réglé sur le thème clair.

Pour afficher le thème clair dans votre application, sur votre émulateur ou sur votre appareil physique :

  1. Accédez à l'application Paramètres de l'appareil.
  2. Recherchez le thème sombre, puis cliquez dessus.
  3. Si le thème sombre est activé, désactivez-le.

Exécutez le code de démarrage pour découvrir votre point de départ. Il s'agit d'une liste qui affiche les différents chiens, avec leur photo, leur nom et leur âge. L'application est fonctionnelle, mais elle n'est pas parfaite. Nous allons donc y remédier.

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge.

5. Ajouter une couleur

La première chose que vous allez modifier dans l'application Woof est la palette de couleurs.

Une palette de couleurs est la combinaison de couleurs utilisée par votre application. Les différentes combinaisons de couleurs évoquent différentes humeurs, ce qui a une influence sur la façon dont les utilisateurs se servent de votre application. Puisque nous avons travaillé avec un graphiste pour cette application, il a choisi la palette de couleurs pour nous. Toutefois, le site Web de Material Design fournit des conseils sur le système de couleurs. Vous pourrez ainsi en savoir plus sur les palettes de couleurs et découvrir comment en générer une vous-même.

Lorsque vous avez ajouté une couleur dans votre application Android, vous avez utilisé Color.RED ou Color.PINK par exemple. Comment faire si vous souhaitez ajouter une couleur plus spécifique, comme le bleu céruléen ou le vert jade ?

Dans le système Android, la couleur est représentée par une valeur de couleur hexadécimale (hex). Un code couleur hexadécimal commence par le caractère dièse (#), suivi de six lettres et/ou chiffres représentant les composants rouge, vert et bleu (RVB) de cette couleur. Les deux premières lettres/chiffres font référence au rouge, les deux caractères suivants au vert et les deux derniers au bleu.

Les nombres hexadécimaux utilisés pour créer les couleurs.

Une couleur peut également inclure une valeur alpha (lettres et/ou chiffres) qui définit la transparence de la couleur (#00 correspond à une opacité de 0 %, entièrement transparent ; #FF à une opacité de 100 %, entièrement opaque). Lorsqu'elle est incluse, la valeur alpha correspond aux deux premiers caractères du code hexadécimal. Si aucune valeur alpha n'est incluse, il s'agit par défaut de #FF, qui représente une opacité de 100 % (entièrement opaque).

Vous trouverez ci-dessous des exemples de codes de couleurs hexadécimaux.

Couleur

Nom

Couleur HEX

Cette image représente la couleur noire.

Noir

#000000

Cette image représente la couleur verte.

Vert

#72D98C

Cette image représente la couleur bleue.

Bleu

#4285F4

Cette image représente la couleur blanche.

Blanc

#FFFFFF

Vous n'avez pas besoin de mémoriser tous les codes de couleurs hexadécimaux ! Des outils de sélection des couleurs sont à votre disposition. Pour cet atelier de programmation, nous vous fournissons des couleurs prédéfinies.

Vous trouverez ci-dessous la palette de couleurs que nous utilisons dans l'application. Notez qu'il n'y a pas de valeur alpha. Cela signifie que l'opacité des couleurs est de 100 %.

Clair :

Couleur

Nom

Couleur HEX

Encoche

Cette image représente la couleur Grey50.

Grey50

#F8F9FA

principale

Cette image représente la couleur Green50.

Green50

#E6F4EA

surface

Cette image représente la couleur Green100.

Green100

#CEEAD6

arrière-plan

Cette image représente la couleur Grey700.

Grey700

#5F6368

secondaire

Cette image représente la couleur Grey900.

Grey900

#202124

onSurface

Cette image représente la couleur Grey900.

Grey900

#202124

onPrimary

Vous vous demandez peut-être à quoi servent les encoches et comment elles sont attribuées.

  • La couleur principale est la couleur qui s'affiche le plus fréquemment sur les écrans et les composants de votre application.
  • La couleur secondaire permet d'accentuer votre application de plusieurs façons.
  • La couleur de surface affecte les surfaces des composants, comme les vignettes, les feuilles et les menus.
  • La couleur d'arrière-plan apparaît derrière le contenu déroulant.
  • Les éléments de couleur on apparaissent au-dessus des autres couleurs de la palette et sont principalement appliqués au texte, à l'iconographie et aux traits. Dans notre palette de couleurs, nous avons une couleur onSurface, qui apparaît au-dessus de la couleur de surface, et une couleur onPrimary, qui apparaît au-dessus de la couleur principale.

Ces encoches permettent d'harmoniser le système de conception, dans lequel les composants associés ont la même couleur.

Certains composants sont automatiquement mappés avec des encoches de couleur. Par exemple, la couleur d'arrière-plan est automatiquement mappée sur l'encoche Surface pour les composables Surface. Ainsi, vous n'avez pas besoin d'attribuer explicitement une couleur de surface au composable Surface. Il s'affichera automatiquement avec cette couleur lorsque vous définirez le thème de couleur dans votre application. Il existe plus de six encoches de couleur, mais il n'est pas nécessaire de toutes les attribuer. Toutes les couleurs qui ne sont pas spécifiées dans le thème de votre application sont définies sur les couleurs du thème de couleurs de base Material, qui applique un thème par défaut à votre application.

Trêve de théorie des couleurs : il est temps d'ajouter cette magnifique palette de couleurs à l'application !

Ajouter une palette de couleurs au thème

  1. Ouvrez le fichier Color.kt. Ce fichier permet d'ajouter des couleurs à la palette de couleurs de votre application. Nous avons déjà ajouté plusieurs couleurs à la palette de couleurs par défaut. Ajoutez les nouvelles couleurs requises pour la palette de couleurs de l'application Woof, sous les couleurs déjà ajoutées.
//Light Theme
val Grey50 = Color(0xFFF8F9FA)
val Grey900 = Color(0xFF202124)
val Grey700 = Color(0xFF5F6368)
val Green50 = Color(0xFFE6F4EA)
val Green100 = Color(0xFFCEEAD6)
  1. Ouvrez le fichier Theme.kt et remplacez LightColorPalette par le code ci-dessous, en ajoutant les couleurs à leurs encoches.
private val LightColorPalette = lightColors(
   background = Green100,
   surface = Green50,
   onSurface = Grey900,
   primary = Grey50,
   onPrimary = Grey900,
   secondary = Grey700
)

WoofTheme() vérifie si darkTheme est défini sur "true" ou non, et définit colors dans l'élément object de MaterialTheme sur la palette de couleurs claires si la valeur est "false" ou sur la palette de couleurs sombres si la valeur est "true".

@Composable
fun WoofTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
   val colors = if (darkTheme) {
       DarkColorPalette
   } else {
       LightColorPalette
   }

   MaterialTheme(
       colors = colors,
       typography = Typography,
       shapes = Shapes,
       content = content
   )
}

Ajouter des couleurs à l'application

Maintenant que les couleurs ont été ajoutées, vous pouvez les utiliser dans différents espaces de l'application. Vous utiliserez :

  • La couleur background pour l'arrière-plan de la liste.
  • La couleur surface pour l'arrière-plan de l'élément de la liste, pour bien le distinguer par rapport à l'arrière-plan de la liste.
  • La couleur onSurface pour le texte, pour une lisibilité optimale par rapport à la couleur de l'élément de la liste.

Les deux autres couleurs seront utilisées ultérieurement dans l'atelier de programmation.

  1. Ouvrez MainActivity.kt. Dans WoofApp(), ajoutez un modificateur d'arrière-plan à LazyColumn pour que l'arrière-plan de la liste devienne vert. Définissez la couleur de l'arrière-plan sur celle que vous avez définie en tant que background dans le fichier Theme.kt. Vous pouvez accéder à la couleur définie pour le background du thème de l'application via MaterialTheme.colors.background.

Cliquez sur Compiler et actualiser dans l'onglet Aperçu.

import androidx.compose.material.MaterialTheme
import androidx.compose.foundation.background

LazyColumn(modifier =
   Modifier.background(MaterialTheme.colors.background))

Beau travail ! L'arrière-plan possède désormais la couleur Green100.

Cette image montre l'application dans WoofPreview et affiche une liste de chiens, avec leur nom, leur photo et leur âge. Cette application inclut une couleur d'arrière-plan.

  1. Dans DogItem(), ajoutez une extension background() à Row et transmettez MaterialTheme.colors.surface. Ainsi, la couleur d'arrière-plan de Row sera la couleur surface spécifiée dans le thème de l'application.
import androidx.compose.ui.unit.dp

Row(
   modifier = Modifier
       .fillMaxWidth()
       .padding(8.dp)
       .background(MaterialTheme.colors.surface)
)

Dans l'onglet Aperçu, vous pouvez voir que la couleur de l'élément de la liste est différente de celle de l'arrière-plan de l'application, et que chaque élément de liste se distingue davantage de l'arrière-plan.

Cette image montre l'application dans DefaultPreview et affiche une liste de chiens, avec leur nom, leur photo et leur âge. Cette application inclut une couleur d'arrière-plan pour l'application et une couleur d'arrière-plan pour les éléments de la liste.

  1. Dans DogInformation(), ajoutez color aux composables Text du nom du chien et de l'âge du chien. Ainsi, vous modifiez la couleur de police de ces deux composables de texte. Utilisez la couleur onSurface.
Column {
   Text(
       text = stringResource(dog.name),
       color = MaterialTheme.colors.onSurface,
       modifier = Modifier.padding(top = smallPadding)
   )
   Text(
       text = stringResource(R.string.years_old, dog.age.toString()),
       color = MaterialTheme.colors.onSurface
   )
}
  1. Compilez et actualisez l'application. Le texte qui affiche le nom et l'âge du chien contraste davantage avec l'arrière-plan. Il est plus facile à lire, mais on ne peut pas en dire autant dans le thème clair.

Thème clair :

Cette image montre l'application dans WoofPreview et affiche une liste de chiens, avec leur nom, leur photo et leur âge. Cette application inclut une couleur d'arrière-plan pour l'application, une couleur d'arrière-plan pour les éléments de liste, et une couleur pour le texte.

Vous pouvez voir ci-dessous le contraste du texte avec le thème sombre, que nous allons implémenter dans la section suivante :

Thème sombre sans couleur de texte définie

Thème sombre avec couleur de texte définie

Cette image montre l'application dans WoofPreview et affiche une liste de chiens, avec leur nom, leur photo et leur âge. Cette application inclut une couleur d'arrière-plan pour l'application et une couleur d'arrière-plan pour les éléments de liste. Ici, le thème sombre est appliqué.

Cette image montre l'application dans WoofPreview et affiche une liste de chiens, avec leur nom, leur photo et leur âge. Cette application inclut une couleur d'arrière-plan pour l'application, une couleur d'arrière-plan pour les éléments de liste, et une couleur pour le texte. Ici, le thème sombre est appliqué.

Thème sombre

Sur Android, vous pouvez activer le thème sombre sur votre appareil. Un thème sombre utilise des couleurs plus sombres et plus discrètes, et présente les avantages suivants :

  • Il peut réduire considérablement la consommation d'énergie (selon la technologie d'écran de l'appareil).
  • Il améliore la visibilité pour les utilisateurs souffrant d'une déficience visuelle et ceux sensibles à la lumière vive.
  • Il permet à tous d'utiliser un appareil dans des conditions de faible luminosité.

Vous pouvez activer Forcer le mode sombre dans votre application pour que le système applique un thème sombre. Si vous forcez le thème sombre, vos utilisateurs bénéficient d'une meilleure expérience, ce qui vous permet de garder le contrôle du thème de l'application.

Lorsque vous choisissez votre propre thème sombre, notez que les couleurs d'un thème sombre doivent respecter les normes d'accessibilité en matière de contraste. Les thèmes sombres utilisent une couleur de surface sombre, et limitent les accents de couleur.

Vous trouverez ci-dessous les couleurs du thème sombre de cette application :

Sombre :

Couleur

Nom

Couleur HEX

Encoche

Cette image représente la couleur blanche.

Blanc

#FFFFFF

principale

Cette image représente la couleur Grey100.

Grey100

#F1F3F4

onSurface

Cette image représente la couleur Grey100.

Grey100

#F1F3F4

onPrimary

Cette image représente la couleur Cyan700.

Cyan700

#129EAF

surface

Cette image représente la couleur Cyan900.

Cyan900

#007B83

arrière-plan

Cette image représente la couleur Grey900.

Grey900

#202124

secondaire

Ajouter un thème sombre

  1. Dans Color.kt, ajoutez les couleurs du thème sombre. Notez que vous n'ajoutez que quatre couleurs, car Grey900 a déjà été ajoutée au thème clair.
//Dark Theme
val White = Color(0xFFFFFFFF)
val Grey100 = Color(0xFFF1F3F4)
val Cyan900 = Color(0xFF007B83)
val Cyan700 = Color(0xFF129EAF)
  1. Supprimez les couleurs fournies par défaut, car nous n'en aurons plus besoin. Vous trouverez ci-dessous les valeurs qui devraient figurer dans le fichier.
//Light Theme
val Grey50 = Color(0xFFF8F9FA)
val Grey900 = Color(0xFF202124)
val Grey700 = Color(0xFF5F6368)
val Green50 = Color(0xFFE6F4EA)
val Green100 = Color(0xFFCEEAD6)

//Dark Theme
val White = Color(0xFFFFFFFF)
val Grey100 = Color(0xFFF1F3F4)
val Cyan900 = Color(0xFF007B83)
val Cyan700 = Color(0xFF129EAF)
  1. Dans le fichier Theme.kt, remplacez la DarkColorPalette existante par les couleurs affichées ci-dessous.
private val DarkColorPalette = darkColors(
   background = Cyan900,
   surface = Cyan700,
   onSurface = White,
   primary = Grey900,
   onPrimary = White,
   secondary = Grey100
)

Afficher le thème sombre dans l'aperçu

Pour voir le thème sombre en action, vous devez ajouter un autre Preview() à MainActivity.kt. Ainsi, lorsque vous modifiez la mise en page de l'interface utilisateur dans le code, vous pouvez voir simultanément à quoi ressemblent les thèmes clair et sombre.

  1. Sous DefaultPreview(), créez une fonction appelée DarkThemePreview() et annotez-la avec @Preview et @Composable.
@Preview
@Composable
fun DarkThemePreview() {

}
  1. Dans DarkThemePreview(), ajoutez WoofTheme(). Sans WoofTheme(), vous ne verrez aucun des styles que nous avons ajoutés dans l'application. Attribuez la valeur true au paramètre darkTheme.
@Preview
@Composable
fun DarkThemePreview() {
   WoofTheme(darkTheme = true) {

   }
}
  1. Appelez WoofApp() dans WoofTheme().
@Preview
@Composable
fun DarkThemePreview() {
   WoofTheme(darkTheme = true) {
       WoofApp()
   }
}

Désormais, lorsque vous cliquez sur Build & Refresh (Compiler et actualiser) dans la section Preview et que vous faites défiler l'écran vers le bas, votre application s'affiche en mode sombre : l'arrière-plan et l'élément de la liste est plus sombre, et le texte s'affiche en blanc. Vous pouvez comparer le thème sombre et le thème clair.

Thème sombre

Thème clair

Cette image montre l'application dans WoofPreview et affiche une liste de chiens, avec leur nom, leur photo et leur âge. Cette application inclut une couleur d'arrière-plan pour l'application, une couleur d'arrière-plan pour les éléments de liste, et une couleur pour le texte. Ici, le thème sombre est appliqué.

Cette image montre l'application dans WoofPreview et affiche une liste de chiens, avec leur nom, leur photo et leur âge. Cette application inclut une couleur d'arrière-plan pour l'application, une couleur d'arrière-plan pour les éléments de liste, et une couleur pour le texte.

Afficher le thème sombre sur votre appareil ou votre émulateur

Pour afficher le thème sombre dans votre application, sur votre émulateur ou sur votre appareil physique :

  1. Accédez à l'application Paramètres de l'appareil.
  2. Recherchez le thème sombre, puis cliquez dessus.
  3. Activez l'option Thème sombre.
  4. Rouvrez l'application Woof. Elle utilise le thème sombre.

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge. Cette application inclut une couleur d'arrière-plan pour l'application, une couleur d'arrière-plan pour les éléments de liste, et une couleur pour le texte. Ici, le thème sombre est appliqué.

Cet atelier de programmation porte davantage sur le thème clair. Avant de continuer, désactivez donc le thème sombre.

  1. Accédez à l'application Paramètres de l'appareil.
  2. Sélectionnez Affichage.
  3. Désactivez l'option Thème sombre.

Comparez l'apparence de l'application au début de la section et maintenant. Les éléments de liste et le texte sont plus définis, et le jeu de couleurs est plus esthétique.

Sans couleur

Avec couleur (thème clair)

Avec couleur (thème sombre)

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge.

Cette image montre l'application dans DefaultPreview et affiche une liste de chiens, avec leur nom, leur photo et leur âge. Cette application inclut une couleur d'arrière-plan pour l'application, une couleur d'arrière-plan pour les éléments de liste, et une couleur pour le texte.

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge. Cette application inclut une couleur d'arrière-plan pour l'application, une couleur d'arrière-plan pour les éléments de liste, et une couleur pour le texte. Ici, le thème sombre est appliqué.

6. Ajouter une forme

Par défaut, toutes les formes de votre application sont rectangulaires. Toutefois, l'application d'une forme peut modifier considérablement l'apparence d'un composable. Les formes permettent de capter l'attention, d'identifier les composants, de communiquer un état et d'exprimer une image de marque.

De nombreuses formes sont définies à l'aide de RoundedCornerShape, qui décrit un rectangle avec des angles arrondis. Le nombre transmis définit l'arrondi des angles. Si vous utilisez RoundedCornerShape(percent = 0), alors le rectangle n'a pas d'angles arrondis. Si vous utilisez RoundedCornerShape(percent = 50), les angles sont entièrement arrondis. Si vous souhaitez tester des formes plus complexes, le site de Material propose un outil de personnalisation des formes.

0 pour cent

25 pour cent

50 pour cent

Cette image montre le résultat pour RoundedCornerShape(percent = 0).

Cette image montre le résultat pour RoundedCornerShape(percent = 25).

Cette image montre le résultat pour RoundedCornerShape(percent = 50).

Le fichier Shape.kt est utilisé pour définir les formes des composants dans Compose. Il existe trois types de composants : petits, moyens et grands. Dans cette section, vous allez modifier le composant Card, qui est défini sur la taille medium. Les composants sont regroupés en catégories de formes en fonction de leur taille.

Comme Image n'est pas un composant, vous allez ajouter sa forme dans MainActivity.kt.

Dans cette section, vous appliquerez une forme arrondie à l'image du chien et modifierez la forme de l'élément de la liste.

Appliquer une forme arrondie à l'image de chien

  1. Commencez par modifier l'icône représentant la photo du chien pour lui appliquer une forme arrondie. Ouvrez MainActivity.kt. Dans DogIcon(), ajoutez un attribut clip au modifier de l'Image. L'image sera découpée selon ces instructions. Transmettez le RoundedCornerShape() et indiquez 50 pour que les angles soient complètement arrondis.
import androidx.compose.ui.draw.clip
import androidx.compose.foundation.shape.RoundedCornerShape

@Composable
fun DogIcon(@DrawableRes dogIcon: Int, modifier: Modifier = Modifier) {
   Image(
       modifier = modifier
           .size(64.dp)
           .padding(8.dp)
           .clip(RoundedCornerShape(50)),

Lorsque vous regardez DefaultPreview, vous remarquerez que les icônes des chiens sont arrondies. Certaines photos sont cependant coupées sur les côtés, et la forme n'est pas pleinement arrondie.

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge. Cette appli propose une couleur personnalisée et les photos du chien ont des bords circulaires.

  1. Pour arrondir les angles des photos, ajoutez un attribut ContentScale et un attribut Crop. L'image rentre maintenant dans le cadre arrondi. Notez que contentScale est un attribut de Image, et ne fait pas partie de modifier.
import androidx.compose.ui.layout.ContentScale

@Composable
fun DogIcon(dogIcon: Int, modifier: Modifier = Modifier) {
   Image(
       modifier = modifier
           .size(64.dp)
           .padding(8.dp)
           .clip(RoundedCornerShape(50)),
       contentScale = ContentScale.Crop,

Lorsque vous exécutez l'application, les icônes ont une forme circulaire.

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge. Cette appli propose une couleur personnalisée et les photos du chien ont des bords circulaires.

Appliquer une forme à l'élément de la liste

Dans cette section, vous appliquerez une forme à l'élément de la liste. L'élément de la liste s'affiche déjà dans un Row, mais il n'est pas possible d'appliquer une forme à Row. À la place, vous ajouterez Row dans un Card. Une Card est une surface qui peut contenir un seul composable et contient des options de décoration. Il est possible d'ajouter de la décoration en utilisant la bordure, la forme, l'élévation, et bien plus. Dans cette section, vous utiliserez Card pour appliquer une forme à l'élément de la liste.

  1. Dans DogItem(), ajoutez une Card autour de Row.
import androidx.compose.material.Card

@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {
   Card() {
       Row(
  1. Ouvrez le fichier Shape.kt. Card est un composant de taille moyenne. Vous devez donc mettre à jour l'attribut "medium" de l'objet Shapes. Pour cette application, vous arrondirez les coins de la liste, sans les rendre complètement arrondis. Pour ce faire, transmettez 16.dp à l'attribut medium.
val Shapes = Shapes(
   small = RoundedCornerShape(4.dp),
   medium = RoundedCornerShape(16.dp),
   large = RoundedCornerShape(0.dp)
)
  1. Étant donné qu'un élément Card utilise par défaut déjà la forme moyenne, vous n'avez pas besoin de la définir explicitement sur la forme moyenne. Actualisez la Preview (prévisualisation) : les angles sont désormais arrondis ! Toutefois, les éléments de liste ne sont pas séparés par une marge intérieure, et on ne sait pas exactement où se termine un élément et où commence le suivant. Vous allez maintenant ajouter une marge intérieure entre les éléments de liste pour les séparer de façon claire.

Cette image montre une prévisualisation avec une liste de chiens qui affiche leur nom, leur photo et leur âge. Cette appli propose une couleur personnalisée et les angles des éléments de liste sont arrondis.

Si vous revenez au fichier Theme.kt dans WoofTheme() et que vous examinez MaterialTheme(), vous constaterez que l'attribut shapes est défini sur la val Shapes que vous venez de mettre à jour.

MaterialTheme(
   colors = colors,
   typography = Typography,
   shapes = Shapes,
   content = content
)

Mettre à jour les modificateurs et ajouter une marge intérieure

  1. Étant donné que Card est désormais le premier composable qui apparaît dans DogItem(), le modificateur transmis au composable DogItem doit être transféré vers Card, et non vers Row. Row utilise désormais une nouvelle instance de Modifier.
@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {
   Card(
       modifier = modifier
   ) {
       Row(
           modifier = Modifier
               .fillMaxWidth()
               .padding(8.dp)
               .background(MaterialTheme.colors.surface)
       )
  1. Ajoutez padding à Card modifier et transmettez 8.dp pour ajouter une marge intérieure autour de chaque élément de liste.
Card(
   modifier = modifier.padding(8.dp)
)

Actualisez Preview (Prévisualisation) : les éléments de liste aux angles arrondis sont désormais clairement séparés grâce à la marge intérieure entre les éléments.

Cette image montre une prévisualisation avec une liste de chiens qui affiche leur nom, leur photo et leur âge. Cette appli propose une couleur personnalisée et les angles des éléments de liste sont arrondis.

Attribution non explicite des couleurs

Un Card est une Surface, et dans le fichier Theme.kt, nous avons défini une couleur de façon explicite pour l'encoche surface. Nous pouvons donc supprimer la couleur de Row, et il n'est pas nécessaire de la définir explicitement sur la couleur surface.

  1. Dans DogItem(), supprimez le paramètre explicite de couleur d'arrière-plan.
Row(
   modifier = Modifier
       .fillMaxWidth()
       .padding(8.dp)
)

Actualisez le champ Preview (prévisualisation). Notez que la couleur d'arrière-plan de Row n'a pas changé, même si nous avons supprimé l'attribution explicite des couleurs.

Cette image montre une prévisualisation avec une liste de chiens qui affiche leur nom, leur photo et leur âge. Cette appli propose une couleur personnalisée et les angles des éléments de liste sont arrondis.

  1. Étant donné que l'élément Text du nom et de l'âge du chien est placé sur une Surface, sa couleur est onSurface par défaut. Supprimez le paramètre de couleur explicite pour les éléments Text dans DogInformation().

Voici à quoi ressemble maintenant le composable :

@Composable
fun DogInformation(@StringRes dogName: Int, dogAge: Int, modifier: Modifier = Modifier) {
   Column {
       Text(
           text = stringResource(dogName),
           modifier = modifier.padding(top = 8.dp)
       )
       Text(
           text = stringResource(R.string.years_old, dogAge)
       )
   }
}

Ajouter une élévation à l'élément de la liste

L'application est très élégante, mais nous allons ajouter quelque chose de plus pour que les éléments de liste contrastent davantage avec l'arrière-plan. Vous avez déjà utilisé l'attribut Card shape pour appliquer une forme à l'élément de la liste. Vous allez maintenant utiliser l'attribut Card elevation pour appliquer une élévation à la vignette. L'élévation ajoute une ombre, qui instaure un contraste entre Card et l'arrière-plan, pour améliorer l'apparence de l'application et la rendre plus attrayante.

  1. Dans DogItem(), ajoutez list_item_elevation comme attribut elevation de Card.
Card(
   modifier = Modifier.padding(8.dp),
   elevation = 4.dp
)
  1. Actualisez la Preview (Prévisualisation). L'élévation ajoute une ombre et de la profondeur à votre application pour la rendre plus réaliste.

Cette image montre une prévisualisation avec une liste de chiens qui affiche leur nom, leur photo et leur âge. Cette application propose une couleur personnalisée. Les éléments de liste ont des angles arrondis, et l'arrière-plan et l'élément de la liste sont séparés par une élévation.

Vous verrez ci-dessous un aperçu de l'application, avant et après la mise en forme. Comme vous pouvez le constater, les formes rendent l'application plus attrayante.

Sans mise en forme

Avec mise en forme

Cette image montre l'application dans DefaultPreview et affiche une liste de chiens, avec leur nom, leur photo et leur âge. Cette application inclut une couleur d'arrière-plan pour l'application, une couleur d'arrière-plan pour les éléments de liste, et une couleur pour le texte.

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge. Cette application propose une couleur et une forme personnalisée.

7. Ajouter une typographie

L'échelle de type Material Design

Une échelle de type est une sélection de styles de police pouvant être utilisés dans une application pour garantir un style flexible mais cohérent. L'échelle de type Material Design comprend 13 styles de police compatibles avec le système de types. N'utilisez ces choix que si vous souhaitez personnaliser votre application. Si vous ne savez pas quoi définir pour les catégories d'échelle de type, vous pouvez utiliser une échelle de typographie par défaut.

Cette image est l'échelle de type des 13 styles compatibles avec le système de types.

L'échelle de type contient des catégories de texte réutilisables, dont chacune a une utilisation et une signification spécifiques. Dans notre application, nous n'utilisons que les catégories "Titre" et "Corps".

Titres

Sur l'échelle de type, les titres vont de 1 à 6. Les titres correspondent au texte le plus large qui s'affiche à l'écran. Ils sont réservés aux textes courts et importants ou aux chiffres.

Corps

Le corps du texte est compris entre 1 et 2. Il est généralement utilisé pour les blocs de texte plus longs, bien adaptés aux tailles de texte plus petites.

Polices

La plate-forme Android propose quelques polices, mais vous pouvez utiliser une police non fournie par défaut pour personnaliser votre application. Les polices personnalisées apportent une touche personnelle et peuvent être utilisées pour le branding.

Dans cette section, vous ajouterez les polices personnalisées Abril Fatface, Montserrat Bold et Montserrat Regular. Vous allez utiliser les titres H1 et H2 et le corps du texte 1 du système de types Material, puis les ajouter au texte de votre application.

Créer une police pour le répertoire de ressources Android

Avant d'ajouter des polices à votre application, vous devez ajouter un répertoire de polices.

  1. Dans la vue Projet d'Android Studio, faites un clic droit sur le dossier res.
  2. Sélectionnez Nouveau > Répertoire des ressources Android.

Cette image montre comment accéder à la structure de fichiers dans le répertoire de ressources Android.

  1. Nommez le répertoire font, définissez le type de ressource sur font, puis cliquez sur OK.

Cette image montre comment ajouter un répertoire de police à l'aide du nouveau répertoire de ressources.

  1. Ouvrez votre nouveau répertoire de ressources de police sous res > drawable > font.

Télécharger des polices personnalisées

Puisque vous utilisez des polices qui ne sont pas fournies par la plate-forme Android, vous devez télécharger les polices personnalisées.

  1. Accédez à https://fonts.google.com/.
  2. Recherchez Montserrat, puis cliquez sur Download family (Télécharger la famille).
  3. Décompressez le fichier ZIP.
  4. Ouvrez le dossier Montserrat téléchargé. Dans le dossier static, recherchez Montserrat-Bold.ttf et Montserrat-Regular.ttf. ttf signifie "TrueType" : il s'agit du format des fichiers de police. Sélectionnez les deux polices, puis faites-les glisser vers le répertoire de ressources de police de votre projet dans Android Studio.

Cette image montre le contenu du dossier statique des polices Montserrat.

  1. Dans votre dossier de polices, renommez Montserrat-Gold.ttf en montserrat_bold.ttf, et renommez Montserrat-Standard.ttf en montserrat_regular.ttf.
  2. Recherchez Abril Fatface et cliquez sur Download family (Télécharger la famille).
  3. Ouvrez le dossier Abril_Fatface téléchargé. Sélectionnez le fichier AbrilFatface-Regular.ttf et faites-le glisser dans le répertoire de ressources de police.
  4. Dans votre dossier de police, remplacez le nom du fichier Abril_Fatface.ttf par abril_fatface_regular.ttf.

Voici à quoi devrait ressembler le répertoire de ressources de polices dans votre projet :

Cette image montre les fichiers de police ajoutés au dossier de la police.

Initialiser les polices

  1. Dans la fenêtre Projet, ouvrez ui.theme > Type.kt et supprimez le contenu de la variable Typography.
// Set of Material typography styles to start with
val Typography = Typography(

)
  1. Initialisez les polices téléchargées sous les instructions d'importation et au-dessus de la val de Typography. Pour commencer, initialisez Abril Fatface en la définissant sur FontFamily, puis transmettez Font avec le fichier de police abril_fatface_regular.
val AbrilFatface = FontFamily(
   Font(R.font.abril_fatface_regular)
)
  1. Initialisez Montserrat, sous Abril Fatface, en la définissant sur FontFamily et en transmettant Font avec le fichier de police montserrat_regular. Pour montserrat_bold, incluez également FontWeight.Bold. Même si vous transmettez la version "bold" (gras) du fichier de police, Compose ne sait pas que le fichier est en gras. Vous devez donc explicitement associer le fichier à FontWeight.Bold.
val AbrilFatface = FontFamily(
   Font(R.font.abril_fatface_regular)
)

val Montserrat = FontFamily(
   Font(R.font.montserrat_regular),
   Font(R.font.montserrat_bold, FontWeight.Bold)
)

Ensuite, définissez les différents types de titres en fonction des polices que vous venez d'ajouter. L'objet Typography comporte des paramètres pour 13 caractères différents, décrits ci-dessus. Vous pouvez en définir autant que nécessaire. Dans cette application, nous allons définir h1 (Titre 1), h2 (Titre 2) et body1. Dans la prochaine partie de cette application, vous utiliserez h3 (Titre 3) et l'ajouterez ici.

Ci-dessous, le tableau de la section Présentation de l'application précise la police et la taille de chaque titre ajouté.

Titre

Police

Épaisseur de police

Taille

h1

Cette image représente la police AbrilFatface.

Normale

30sp

h2

Cette image représente la police Montserrat.

Gras

20sp

h3

Cette image représente la police Montserrat.

Gras

14sp

body1

Cette image représente la police Montserrat.

Normale

14sp

  1. Utilisez le tableau ci-dessus pour renseigner Typography val. Définissez la valeur de l'attribut h1 sur la valeur TextStyle, puis saisissez les informations du tableau ci-dessus dans les champs fontFamily, fontWeight et fontSize. Autrement dit, tout le texte défini sur h1 utilisera la police Abril Fatface, avec une épaisseur de police normale et une propriété fontSize de 30.sp.

Répétez ces étapes pour h2, h3 et body1.

val Typography = Typography(
   h1 = TextStyle(
       fontFamily = AbrilFatface,
       fontWeight = FontWeight.Normal,
       fontSize = 30.sp
   ),
   h2 = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Bold,
       fontSize = 20.sp
   ),
   h3 = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Bold,
       fontSize = 14.sp
   ),
   body1 = TextStyle(
       fontFamily = Montserrat,
       fontWeight = FontWeight.Normal,
       fontSize = 14.sp
   )
)

Si vous revenez au fichier Theme.kt dans WoofTheme() et que vous examinez MaterialTheme(), vous verrez l'attribut typography défini sur la val de Typography que vous venez de mettre à jour.

MaterialTheme(
   colors = colors,
   typography = Typography,
   shapes = Shapes,
   content = content
)

Appliquer une typographie au texte de l'application

Vous allez maintenant ajouter les types de titres à chaque instance de texte dans l'application.

  1. Ajoutez le style h2 (Titre 2) pour le dog name, car il s'agit d'une information courte et importante. Ajoutez le style body1 pour dog age : il est particulièrement adapté aux tailles de texte plus petites.
@Composable
fun DogInformation(@StringRes dogName: Int, dogAge: Int, modifier: Modifier = Modifier) {
   Column {
       Text(
           text = stringResource(dogName),
           style = MaterialTheme.typography.h2,
           modifier = modifier.padding(top = 8.dp)
       )
       Text(
           text = stringResource(R.string.years_old, dogAge),
           style = MaterialTheme.typography.body1
       )
   }
}
  1. Actualisez l'application. Désormais, le nom du chien s'affiche en police Montserrat, en gras et en taille 20.sp, tandis que l'âge du chien s'affiche en police Montserrat normale en taille 14.sp.

Cette image montre une prévisualisation avec une liste de chiens qui affiche leur nom, leur photo et leur âge. Cette appli propose des couleurs, des formes et des typographies personnalisées.

Vous verrez ci-dessous un aperçu de l'application, avant et après l'ajout de la typographie. Notez la différence de police entre le nom du chien et son âge.

Sans typographie

Avec typographie

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge. Cette application propose une couleur et une forme personnalisée.

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge. Cette appli propose des couleurs, des formes et des typographies personnalisées.

8. Ajouter une barre supérieure

Un Scaffold, ou échafaudage, est une mise en page qui fournit des emplacements pour divers composants et éléments sur l'écran, tels que Image, Row ou Column. Un Scaffold fournit également un emplacement pour topBar, que vous utiliserez dans cette section.

La topBar peut être utilisée de plusieurs façons, mais dans ce cas, elle vous permettra de créer une image de marque et de donner une touche personnelle à votre application. Vous allez créer un composable qui ressemble à la capture d'écran ci-dessous, et l'insérer dans la section topBar d'un Scaffold.

Cette image montre la barre supérieure de l'application Woof, qui contient une image et du texte.

Dans cette application, la barre supérieure se compose d'une ligne incluant un logo et un nom d'appli. Le logo inclut une petite patte en dégradé de couleur, et le titre de l'application.

Cette image montre les composants de la barre supérieure : une ligne incluant un élément "Image" et un élément "Text".

Ajouter une image et du texte à la barre supérieure

  1. Dans MainActivity.kt, créez un composable appelé WoofTopAppBar() qui accepte un modifier.
@Composable
fun WoofTopAppBar(modifier: Modifier = Modifier) {

}
  1. Dans WoofTopAppBar(), ajoutez un élément Row().
@Composable
fun WoofTopAppBar(modifier: Modifier = Modifier) {
   Row() {

   }
}
  1. Ajoutez une Image dans Row. Utilisez painter pour définir Image sur ic_woof_logo à partir du dossier drawable, et attribuez la valeur null à contentDescription. Dans ce cas, le logo de l'application n'ajoute aucune information sémantique pour les utilisateurs malvoyants. Il n'est donc pas nécessaire d'ajouter une description du contenu.
Image(
   painter = painterResource(R.drawable.ic_woof_logo),
   contentDescription = null
)
  1. Ensuite, ajoutez un composable Text dans Row après le Image, puis utilisez stringResource() pour lui attribuer la valeur de app_name. Le texte correspond au nom de l'application, stocké dans strings.xml.
Text(
   text = stringResource(R.string.app_name)
)
  1. Maintenant que vous avez ajouté l'icône et le nom de l'application à TopAppBar(), vous devez ajouter TopAppBar() à la mise en page. Dans WoofApp(), ajoutez un Scaffold entourant LazyColumn.
import androidx.compose.material.Scaffold

@Composable
fun WoofApp() {
   Scaffold(

   ) {
       LazyColumn(modifier =
        Modifier.background(MaterialTheme.colors.background)) {
           items(dogs) {
               DogItem(dog = it)
           }
       }
   }
}
  1. Dans Scaffold, ajoutez un attribut topBar et définissez-le sur WoofTopAppBar().
Scaffold(
   topBar = {
       WoofTopAppBar()
   }
)

Voici à quoi ressemble le composable WoofApp() :

@Composable
fun WoofApp() {
   Scaffold(
       topBar = {
           WoofTopAppBar()
       }
   ) {
       LazyColumn(modifier = Modifier.background(MaterialTheme.colors.background)) {
           items(dogs) {
               DogItem(dog = it)
           }
       }
   }
}
  1. Actualisez la section Preview (Prévisualisation) et examinez la barre d'application supérieure. Elle contient l'icône et le texte, mais nous sommes encore loin du résultat recherché. Dans la section suivante, vous allez embellir cet aspect en ajoutant des couleurs, de la typographie, de la marge intérieure et plus encore.

Cette image montre l'application Woof avec une barre supérieure contenant une image et du texte.

Décorer la barre supérieure

  1. Tout d'abord, ajoutons une couleur d'arrière-plan à la barre supérieure pour la différencier du reste de l'application. Dans WoofTopAppBar(), ajoutez la couleur principale du thème de l'application en tant que couleur d'arrière-plan. Pour ce faire, ajoutez un modifier à Row, que vous définirez sur primary.
Row(
   modifier = modifier
       .background(color = MaterialTheme.colors.primary)
){ }

Cette image montre l'application Woof avec une barre supérieure contenant une image, du texte et un arrière-plan partiel.

  1. La couleur d'arrière-plan n'apparaît que derrière l'icône et le texte, mais elle devrait couvrir toute la largeur de l'application. Pour ce faire, définissez le modifier de Row sur fillMaxWidth().
Row(
   modifier = modifier
       .fillMaxWidth()
       .background(color = MaterialTheme.colors.primary)
){ }

Cette image montre l'application Woof avec une barre supérieure contenant une image, du texte et un arrière-plan complet.

  1. Ensuite, mettez à jour le texte pour lui appliquer le style h1 (Titre 1) que vous avez défini précédemment. Comme l'arrière-plan est défini sur la couleur primary, le texte est automatiquement défini sur la couleur onPrimary.
Text(
   text = stringResource(R.string.app_name),
   style = MaterialTheme.typography.h1
)
  1. Le résultat est bien meilleur, mais l'image est un peu trop petite. Nous pourrions ajouter une marge intérieure pour y remédier. Ajoutez un modificateur à la propriété Image, puis définissez la taille de l'image sur R.dimen.image_size et la marge intérieure autour de l'image sur R.dimen.padding_small.
Image(
   modifier = Modifier
       .size(64.dp)
       .padding(8.dp),
   painter = painterResource(R.drawable.ic_woof_logo),
   contentDescription = null
)

Cette image montre l'application Woof avec une barre supérieure contenant une image, du texte et un arrière-plan blanc. Le style du texte est h1 et l'image est insérée dans une marge intérieure.

  1. Vous y êtes presque ! Définissez maintenant l'alignement vertical sur Alignment.CenterVertically afin de centrer verticalement tous les éléments de la ligne.
import androidx.compose.ui.Alignment

Row(
   modifier = modifier
       .fillMaxWidth()
       .background(color = MaterialTheme.colors.primary),
   verticalAlignment = Alignment.CenterVertically
){ }

Cette image montre l'application Woof avec une barre supérieure contenant une image, du texte et un arrière-plan blanc. Le style du texte est h1, l'image est insérée dans une marge intérieure et les éléments sont centrés verticalement.

Exécutez l'application et admirez la façon dont la TopAppBar se fond élégamment avec le reste.

Sans barre d'application supérieure

Avec la barre d'application supérieure

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge. Cette appli propose des couleurs, des formes et des typographies personnalisées.

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge. Elle inclut une couleur, une forme et une typographie personnalisées, ainsi qu'une barre supérieure.

À présent, exécutez votre application avec le thème sombre. Étant donné que la barre utilise la couleur primary et que le texte utilise la couleur onSurface, vous n'avez rien à mettre à jour pour appliquer le thème sombre.

Cette image montre une application avec une liste de chiens, avec leur nom, leur photo et leur âge. Elle inclut une couleur, une forme et une typographie personnalisées, ainsi qu'une barre supérieure. Cet écran s'affiche en mode sombre.

Félicitations, vous avez terminé cet atelier de programmation !

9. [Facultatif] Modifier la barre d'état

Pour améliorer davantage l'expérience utilisateur, vous pouvez modifier la couleur de la barre d'état, qui contient des informations telles que l'heure, la connexion Internet, l'état de la batterie, etc.

Sur cette image, la barre d'état de l'application est encadrée.

  1. Accédez à app > res > values > colors.xml.
  2. Supprimez le contenu de la balise <resources>.
<resources>

</resources>
  1. Ajoutez grey_50 et définissez #FFF8F9FA sur la barre d'état du thème clair, puis grey_900 pour #FF202124 sur la barre d'état du thème sombre.
<resources>
   <color name="grey_50">#FFF8F9FA</color>
   <color name="grey_900">#FF202124</color>
</resources>
  1. Accédez à app > res > values > themes.xml, puis remplacez la couleur de android:statusBarColor par grey_50.
<resources>
   <style name="Theme.Woof" parent="android:Theme.Material.Light.NoActionBar">
       <item name="android:statusBarColor">@color/grey_50</item>
   </style>
</resources>
  1. Exécutez l'application sur votre appareil ou votre émulateur.

Cette image montre l'application Woof avec une barre d'état personnalisée sur le thème clair.

La barre d'état correspond désormais à la barre d'application supérieure, ce qui harmonise le jeu de couleurs, mais les icônes sont moins visibles.

  1. Dans le fichier themes.xml, ajoutez windowLightStatusBar et attribuez-lui la valeur true sous statusBarColor.
<resources>
   <style name="Theme.Woof" parent="android:Theme.Material.Light.NoActionBar">
       <item name="android:statusBarColor">@color/grey_50</item>
       <item name="android:windowLightStatusBar">true</item>
   </style>
</resources>
  1. Un message d'erreur s'affiche. Pointez sur le message, puis appuyez sur Override Resources in values-v23 (Remplacer les ressources dans valeurs-v23).

Cette image représente une fenêtre pop-up d'erreur dans Android Studio.

  1. Cette opération crée un fichier themes.xml appelé v23/themes.xml, qui est utilisé pour les niveaux d'API 23 et supérieurs.
  2. Exécutez l'application sur votre émulateur. Vous remarquerez que les icônes s'affichent maintenant.

Cette image montre l'application Woof avec une barre d'état personnalisée sur le thème clair.

Ajouter une barre d'état au thème sombre

Vous allez maintenant personnaliser la barre d'état du thème sombre.

  1. Dans le dossier res, ajoutez un nouveau répertoire de ressources Android intitulé values-night.

cdc98bf466706a30.png

  1. Passez à la vue Project Source Files (Fichiers source sur projet).

Cette image montre les vues du fichier source du projet sélectionnées.

  1. Accédez à app > src > main > res > values-night.
  2. Dans values-night, ajoutez un Values Resource File (fichier de ressources de valeurs) appelé themes.xml.
  3. Ajoutez une balise de style dont le nom est Theme.Woof et le parent est android:style/Theme.Material.NoActionBar.
<resources>
   <style name="Theme.Woof" parent="android:style/Theme.Material.NoActionBar">

   </style>
</resources>
  1. Définissez la couleur de la barre d'état sur grey_900. Les icônes étant blanches par défaut, vous n'avez pas besoin d'ajouter windowsStatusLightBar.
<resources>
   <style name="Theme.Woof" parent="android:style/Theme.Material.NoActionBar">
       <item name="android:statusBarColor">@color/grey_900</item>
   </style>
</resources>
  1. Exécutez l'application en mode sombre pour voir la barre d'état se mettre à jour.

Cette image montre l'application Woof avec une barre d'état personnalisée sur le thème sombre.

10. Télécharger le code de solution

Pour télécharger le code de l'atelier de programmation terminé, utilisez la commande Git suivante :

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-woof.git
$ cd basic-android-kotlin-compose-training-woof
$ git checkout material

Vous pouvez également télécharger le dépôt sous forme de fichier ZIP, le décompresser et l'ouvrir dans Android Studio.

(Télécharger le ZIP)

Si vous souhaitez voir le code de solution, affichez-le sur GitHub.

11. Conclusion

Vous venez de créer votre première application Material. Vous avez ajouté une palette de couleurs personnalisée pour le thème clair et le thème sombre, créé des formes pour différents composants, téléchargé des polices et ajouté ces éléments à l'application, et créé une belle barre supérieure pour unifier le tout. Mettez à profit les compétences acquises dans cet atelier de programmation pour modifier les couleurs, les formes et la typographie afin d'apporter une touche personnelle à vos applications !

Résumé

  • La thématisation Material vous permet d'utiliser Material Design dans votre application et vous offre des conseils pour personnaliser ses couleurs, sa typographie et ses formes.
  • Pour cette application, le thème est défini dans le fichier Theme.kt, via un composable nommé [nom de votre appli]+Theme()—WoofTheme(). Dans cette fonction, l'objet MaterialTheme définit les éléments color, typography, shapes et content de l'application.
  • Listez les couleurs que vous utilisez dans l'application dans le fichier Colors.kt. Dans le fichier Theme.kt, attribuez ensuite les couleurs dans LightColorPalette et DarkColorPalette à des emplacements spécifiques. Il n'est pas nécessaire d'attribuer tous les emplacements.
  • Vous pouvez activer Forcer le mode sombre dans votre application pour que le système applique un thème sombre. Si vous forcez le thème sombre, vos utilisateurs bénéficient d'une meilleure expérience, ce qui vous permet de garder le contrôle du thème de l'application.
  • Shapes.kt vous permet de définir les formes de votre application. Il existe trois tailles possibles : petite, moyenne et grande. Vous pouvez régler l'arrondi des angles.
  • Les formes permettent de capter l'attention, d'identifier les composants, de communiquer un état et d'exprimer une image de marque.
  • Dans le fichier Types.kt, vous pourrez initialiser vos polices et attribuer les propriétés fontFamily, fontWeight et fontSize pour l'échelle de type Material Design.
  • L'échelle de type Material Design comprend une gamme de styles contrastés qui répondent aux besoins de votre application et de son contenu. L'échelle de type combine 13 styles compatibles avec le système de types.

12. En savoir plus