Android Academy · Leçon

Thèmes et styles

Thèmes et styles est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 5. 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 5 leçons au total.

Styles et thèmes

Deux concepts souvent confondus :

Style — ensemble d'attributs de vue appliqués à un seul composant (par exemple la taille du texte, la couleur ou les marges internes). Définissez-le avec style="@style/MyButton".
Thème — ensemble d'attributs sémantiques appliqués à une activité ou à une application. Les vues recherchent les attributs du thème avec ?attr/colorPrimary.

Définir un style

Créez les styles dans res/values/styles.xml. Les styles peuvent hériter d'un parent :

<!-- res/values/styles.xml -->
<resources>
    <style name="TitleText" parent="TextAppearance.Material3.HeadlineMedium">
        <item name="android:textColor">@color/on_surface</item>
        <item name="android:fontFamily">@font/roboto_bold</item>
    </style>

    <style name="PrimaryButton" parent="Widget.Material3.Button">
        <item name="android:paddingHorizontal">24dp</item>
        <item name="cornerRadius">8dp</item>
    </style>
</resources>

<!-- Using a style in XML: -->
<TextView
    style="@style/TitleText"
    android:text="Hello!" />

Définir un thème

Les thèmes héritent d'un parent Material 3 et remplacent les attributs de couleur et de forme :

<!-- res/values/themes.xml -->
<resources>
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Color -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorOnPrimary">@color/on_primary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorBackground">@color/background</item>

        <!-- Typography -->
        <item name="textAppearanceBodyMedium">@style/BodyMedium</item>

        <!-- Shape -->
        <item name="shapeAppearanceMediumComponent">@style/Shape.Medium</item>
    </style>
</resources>

Système de couleurs Material 3

Material 3 utilise des rôles de couleur sémantiques plutôt que des valeurs hexadécimales brutes. Principaux rôles :

colorPrimary — couleur principale de la marque
colorOnPrimary — texte et icônes sur l'arrière-plan principal
colorSecondary — couleur d'accentuation
colorSurface — arrière-plans des cartes et des feuilles
colorError — états d'erreur
colorBackground — arrière-plan de la fenêtre

Ressources de couleur

Définissez les couleurs dans res/values/colors.xml :

<!-- res/values/colors.xml -->
<resources>
    <color name="primary">#6750A4</color>
    <color name="on_primary">#FFFFFF</color>
    <color name="secondary">#625B71</color>
    <color name="on_secondary">#FFFFFF</color>
    <color name="surface">#FFFBFE</color>
    <color name="background">#FFFBFE</color>
    <color name="error">#B3261E</color>
</resources>

Thème sombre

Les thèmes Material 3 DayNight gèrent automatiquement le mode sombre. Ajoutez une variante nocturne pour les couleurs :

<!-- res/values-night/colors.xml  (night override) -->
<resources>
    <color name="primary">#D0BCFF</color>
    <color name="on_primary">#381E72</color>
    <color name="surface">#1C1B1F</color>
    <color name="background">#1C1B1F</color>
</resources>

// Switch dark mode programmatically:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)   // force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)    // force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // auto

Typographie

Material 3 définit une échelle typographique. Utilisez les attributs textAppearance pour obtenir un texte cohérent :

<TextView
    android:textAppearance="?attr/textAppearanceDisplayLarge"
    android:text="Big Title" />

<TextView
    android:textAppearance="?attr/textAppearanceHeadlineMedium"
    android:text="Section Header" />

<TextView
    android:textAppearance="?attr/textAppearanceBodyMedium"
    android:text="Body text content here" />

<TextView
    android:textAppearance="?attr/textAppearanceLabelSmall"
    android:text="Caption" />

Polices personnalisées

Ajoutez une police dans res/font/ et référencez-la depuis votre thème ou votre style :

<!-- res/font/my_font.xml — font family -->
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="400"
          app:font="@font/roboto_regular" />
    <font app:fontStyle="normal" app:fontWeight="700"
          app:font="@font/roboto_bold" />
</font-family>

<!-- Apply to a style: -->
<style name="Theme.MyApp" parent="...">
    <item name="android:fontFamily">@font/my_font</item>
</style>

Appliquer un thème à une activité

Définissez le thème dans AndroidManifest.xml. Vous pouvez utiliser un thème différent pour chaque activité :

<!-- AndroidManifest.xml -->
<application
    android:theme="@style/Theme.MyApp">

    <!-- Different theme for splash screen -->
    <activity
        android:name=".SplashActivity"
        android:theme="@style/Theme.MyApp.Splash" />

    <activity
        android:name=".MainActivity" />
</application>

Lire les attributs du thème dans le code

Accédez à n'importe quel attribut du thème dans le code Kotlin lors de l'exécution :

fun getColorFromTheme(context: Context, attrResId: Int): Int {
    val typedValue = TypedValue()
    context.theme.resolveAttribute(attrResId, typedValue, true)
    return typedValue.data
}

// Usage:
val primaryColor = getColorFromTheme(this, com.google.android.material.R.attr.colorPrimary)
binding.myView.setBackgroundColor(primaryColor)

Générateur de thèmes Material

Utilisez Material Theme Builder (m3.material.io/theme-builder) pour générer une palette de couleurs Material 3 complète à partir de la couleur de votre marque. Il exporte des fichiers XML prêts à l'emploi pour colors.xml et themes.xml. C'est le moyen le plus rapide d'obtenir un système de conception cohérent.

Vérification rapide

Quelle est la différence essentielle entre un Style et un Theme dans Android ?

Récapitulatif : thèmes et styles

Une conception cohérente commence ici :

Styles — attributs au niveau du composant, réutilisables dans de nombreuses vues
Thèmes — attributs au niveau de l'application ou de l'activité, rôles de couleur sémantiques
Rôles de couleur Material 3 : colorPrimary, colorSurface, colorError, etc.
Mode sombre via values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM
Échelle typographique via les attributs textAppearance
Utilisez Material Theme Builder pour générer rapidement des palettes de couleurs

Ensuite : dessiner des vues personnalisées à partir de zéro.

Questions Fréquemment Posées

La leçon « Thèmes et styles » est-elle gratuite ?

Oui — le texte complet de « Thèmes et styles » 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 5 leçons au total.

Qu'est-ce que j'apprendrai dans « Thèmes et styles » ?

Définissez des Styles réutilisables pour les widgets et des Thèmes pour votre application. Configurez les rôles de couleurs de Material 3, l’échelle typographique, les polices personnalisées et le mo… 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 2 sur 5.

Combien de temps prend la leçon « Thèmes et styles » ?

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