Migrer des thèmes XML vers Material 3 dans Compose

Lorsque vous intégrez Compose dans une application existante, vous devez migrer vos thèmes XML Material afin d'utiliser MaterialTheme pour les composants Compose. Cela signifie que le thème de votre application combine deux sources de référence, l'une basée sur les vues et l'autre sur Compose. Vous devez donc effectuer plusieurs fois les éventuelles modifications que vous apportez à votre style. Une fois votre application entièrement migrée vers Compose, supprimez votre thème XML.

Vous pouvez utiliser l'outil Material Theme Builder pour migrer les couleurs.

Lorsque vous commencez la migration d'XML vers Compose, migrez le thème vers le thème Compose Material 3.

Glossaire

Terme Définition
MaterialTheme Fonction composable qui fournit la thématisation (couleurs, typographie, formes) aux composants de l'UI Compose.
Shape Objet Compose utilisé pour définir des formes de composants personnalisées pour un MaterialTheme.
Typography Objet Compose utilisé pour définir des styles de texte personnalisés (familles de polices, tailles, épaisseurs) pour un MaterialTheme.
Color Objet Compose utilisé pour définir des schémas de couleurs personnalisés pour MaterialTheme.
Thème XML Système de thèmes Android défini dans des fichiers XML et utilisé par le système View.

Limites

Avant de migrer, tenez compte des limites suivantes :

  • Ce guide se concentre uniquement sur la migration vers Material 3. Pour migrer depuis d'autres systèmes de conception, consultez Material 2 ou Systèmes de conception personnalisés dans Compose.
  • L'objectif ultime est une migration complète vers Compose, qui permet de supprimer le thème XML. Ce guide explique comment migrer, mais pas comment supprimer définitivement le thème XML.

Étape 1 : Évaluez le système de conception

Identifiez le système de conception utilisé dans le projet XML View. Analysez le chemin de migration et les étapes nécessaires pour migrer le système de conception existant vers Material 3 dans Compose.

Étape 2 : Identifier les fichiers sources du thème

Identifiez et localisez toutes les ressources et tous les fichiers XML nécessaires à la création de thèmes : schémas de couleurs claires et sombres, thèmes, formes, dimensions, typographie, styles et autres fichiers pertinents.

Les ressources telles que les chaînes peuvent être réutilisées telles quelles et n'ont pas besoin d'être migrées.

Étape 3 : Migrer les couleurs

Migrez les jeux de couleurs clairs et sombres du format XML vers leurs équivalents dans Material 3 Compose.

Étape 4 : Migrer les formes et la typographie personnalisées

  • Si votre application utilise des formes personnalisées :

    1. Dans votre code Compose, définissez un objet Shape pour répliquer vos définitions de formes XML.
    2. Fournissez cet objet Shape à votre MaterialTheme.

      Pour en savoir plus, consultez formes.

  • Si votre application utilise une typographie personnalisée :

    1. Dans votre code Compose, définissez un objet Typography pour répliquer vos styles de texte et définitions de police XML.
    2. Fournissez cet objet Typography à votre MaterialTheme.

      Pour en savoir plus, consultez Typographie.

Étape 5 : Valider la migration du thème

Utilisez toujours les valeurs de thème existantes du thème XML d'origine comme source de vérité pour le nouveau thème Material dans Compose. N'inventez jamais de nouvelles valeurs de thème lors de la migration, afin de maintenir la cohérence de la marque et d'éviter les régressions visuelles.

Vérifiez que toutes les nouvelles valeurs du thème Compose correspondent aux valeurs XML existantes. Ne codez en dur aucune valeur migrée.