Android Academy · Leçon

Couleurs et MaterialTheme

Appliquez un thème cohérent.

Couleurs et MaterialTheme est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Les couleurs dans Compose

Compose représente les couleurs avec la classe Couleur. Des valeurs prêtes à l’emploi existent, comme Couleur.Rouge et Couleur.Bleu.

Vous transmettez une Couleur à des paramètres tels que la couleur d’un texte ou d’un arrière-plan.

Text(
    text = "Hi",
    color = Color.Blue
)

Valeurs de couleur personnalisées

Créez n’importe quelle couleur à partir d’un code hexadécimal avec Color(0xFFRRGGBB). Les deux premiers chiffres, FF, indiquent une opacité totale.

Par exemple, 0xFF6200EE est un violet.

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

Couleur d’arrière-plan

Utilisez le modificateur background pour colorer l’arrière-plan d’un composable. Ajoutez un remplissage afin que le contenu ne touche pas les bords.

L’ordre est important : background suivi du remplissage colore la zone de remplissage.

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

Qu’est-ce que MaterialTheme ?

MaterialTheme est un système qui regroupe au même endroit les couleurs, les polices et les formes de votre application.

Les composables y accèdent, ce qui permet de conserver une apparence cohérente et facile à personnaliser dans toute l’application.

MaterialTheme {
    Text("Themed app")
}

Schéma de couleurs du thème

Le colorScheme du thème fournit des rôles nommés comme primary, secondary et background.

Les utiliser plutôt que des couleurs fixes permet de modifier l’apparence à un seul endroit.

Text(
    text = "Primary",
    color = MaterialTheme.colorScheme.primary
)

Primary et onPrimary

Chaque couleur principale possède un élément on associé pour le texte affiché par-dessus, comme onPrimary.

Utiliser primary comme arrière-plan et onPrimary comme couleur du texte garantit un contraste lisible.

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

Typographie du thème

MaterialTheme stocke également les styles de texte dans typography, comme titleLarge et bodyMedium.

Transmettez-en un au style d’un texte pour obtenir une taille cohérente et adaptée.

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

Schémas clair et sombre

Vous pouvez créer un schéma avec lightColorScheme() ou darkColorScheme(), puis le transmettre à MaterialTheme.

Changer de schéma permet à votre application de prendre en charge les modes clair et sombre.

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

Personnaliser le schéma

Remplacez les rôles en les nommant lors de la création d’un schéma. Ici, primary devient un turquoise personnalisé.

Tout ce qui lit colorScheme.primary est automatiquement mis à jour.

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

Pourquoi utiliser le thème ?

Inscrire les couleurs en dur partout rend les refontes pénibles. Lire les valeurs depuis MaterialTheme signifie qu’une seule modification met à jour toute l’application.

Cela favorise aussi l’accessibilité, car les couleurs on conservent un bon contraste.

Surface et arrière-plan

Le composable Surface applique une couleur d’arrière-plan du thème et une élévation derrière son contenu.

C’est une manière propre de donner à une carte ou à un écran la bonne couleur de base.

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

Vérification rapide

Testez vos connaissances sur les couleurs et les thèmes.

Récapitulatif

Vous avez appris à utiliser la classe Couleur, les couleurs hexadécimales personnalisées et le modificateur background. MaterialTheme regroupe colorScheme, typography et les formes.

Lire des rôles comme primary et onPrimary préserve le contraste et la cohérence, tout en prenant en charge les schémas clair et sombre.

Excellent travail pour avoir terminé le cours sur la mise en forme !

Questions Fréquemment Posées

La leçon « Couleurs et MaterialTheme » est-elle gratuite ?

Oui — le texte complet de « Couleurs et MaterialTheme » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Couleurs et MaterialTheme » ?

Appliquez un thème cohérent. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Couleurs et MaterialTheme » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Android Academy