Android Academy · Lezione

Temi e stili

Definisca Styles riutilizzabili per i widget e Themes per l'app. Configuri i ruoli dei colori di Material 3, la scala tipografica, i font personalizzati e la modalità scura.

Temi e stili è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 2 di 5. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Android Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Android Academy include 5 lezioni in totale.

Stili e temi a confronto

Due concetti che vengono spesso confusi:

Stile — una raccolta di attributi della view applicati a un singolo widget, ad esempio dimensione del testo, colore e spaziatura interna. Si imposta con style="@style/MyButton".
Tema — una raccolta di attributi semantici applicati a un'Activity o all'app. Le view cercano gli attributi del tema con ?attr/colorPrimary.

Definizione di uno stile

Crei gli stili in res/values/styles.xml. Gli stili possono ereditare da un elemento padre:

<!-- 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!" />

Definizione di un tema

I temi ereditano da un elemento padre Material 3 e sovrascrivono gli attributi di colore e forma:

<!-- 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>

Sistema di colori di Material 3

Material 3 utilizza ruoli cromatici semantici invece di valori esadecimali grezzi. Ruoli principali:

colorPrimary — colore principale del brand
colorOnPrimary — testo/icone sullo sfondo principale
colorSecondary — colore di accento
colorSurface — sfondi di schede e sheet
colorError — stati di errore
colorBackground — sfondo della finestra

Risorse colore

Definisca i colori in 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>

Tema scuro

I temi Material 3 DayNight gestiscono automaticamente la modalità scura. Aggiunga una variante night per i colori:

<!-- 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

Tipografia

Material 3 definisce una scala tipografica. Utilizzi gli attributi textAppearance per mantenere uniforme il testo:

<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" />

Font personalizzati

Aggiunga un font a res/font/ e vi faccia riferimento dal tema o dallo stile:

<!-- 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>

Applicazione del tema a un'Activity

Imposti il tema in AndroidManifest.xml. Può utilizzare un tema diverso per ogni Activity:

<!-- 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>

Lettura degli attributi del tema nel codice

Acceda a qualsiasi attributo del tema nel codice Kotlin durante l'esecuzione:

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)

Material Theme Builder

Utilizzi Material Theme Builder (m3.material.io/theme-builder) per generare uno schema di colori Material 3 completo a partire dal colore del brand. Esporta file XML pronti all'uso per colors.xml e themes.xml. È il modo più rapido per ottenere un sistema di progettazione coerente.

Verifica rapida

Qual è la differenza fondamentale tra uno Style e un Theme in Android?

Riepilogo: temi e stili

La progettazione coerente inizia da qui:

Stili — attributi a livello di widget, riutilizzabili in molte view
Temi — attributi a livello di app/Activity, ruoli cromatici semantici
Ruoli cromatici di Material 3: colorPrimary, colorSurface, colorError, ecc.
Modalità scura tramite values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM
Scala tipografica tramite gli attributi textAppearance
Utilizzi Material Theme Builder per generare rapidamente gli schemi di colori

Prossimo argomento: disegnare view personalizzate da zero.

Domande Frequenti

La lezione «Temi e stili» è gratuita?

Sì — il testo completo di «Temi e stili» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Android Academy, passa a CoddyKit PRO. Il corso Android Academy include 5 lezioni in totale.

Cosa imparerò in «Temi e stili»?

Definisca Styles riutilizzabili per i widget e Themes per l'app. Configuri i ruoli dei colori di Material 3, la scala tipografica, i font personalizzati e la modalità scura. Eserciti Android Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Android Academy?

Non è richiesta alcuna esperienza precedente. Android Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 5.

Quanto tempo richiede la lezione «Temi e stili»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Android Academy?

Sì. Ogni lezione Android Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Android Academy