Colori e MaterialTheme
Applichi una tematizzazione coerente.
Colori e MaterialTheme è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. 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 4 lezioni in totale.
I colori in Compose
Compose rappresenta i colori con la classe Color. Sono disponibili valori già pronti come Color.Red e Color.Blue.
Passi un Color a parametri come il colore di un Text o lo sfondo.
Text(
text = "Hi",
color = Color.Blue
)Valori di colore personalizzati
Crei qualsiasi colore da un codice esadecimale usando Color(0xFFRRGGBB). Le prime due cifre, FF, indicano che il colore è completamente opaco.
Ad esempio, 0xFF6200EE è un viola.
val purple = Color(0xFF6200EE)
Text("Brand", color = purple)Colore di sfondo
Utilizzi il modifier background per applicare un colore dietro un composable. Aggiunga il padding affinché il contenuto non tocchi i bordi.
L'ordine è importante: background seguito da padding riempie anche l'area del padding.
Text(
text = "Box",
modifier = Modifier
.background(Color.Yellow)
.padding(8.dp)
)Che cos'è MaterialTheme?
MaterialTheme è un sistema che raccoglie in un unico punto i colori, i caratteri e le forme della Sua app.
I composable leggono questi valori, così l'intera app rimane coerente e facile da personalizzare.
MaterialTheme {
Text("Themed app")
}Schema di colori del tema
Il colorScheme del tema fornisce ruoli denominati come primary, secondary e background.
Leggere questi ruoli invece di usare colori fissi consente di modificare l'aspetto in un unico punto.
Text(
text = "Primary",
color = MaterialTheme.colorScheme.primary
)Primary e onPrimary
Ogni colore principale ha un elemento associato con prefisso on per il testo visualizzato sopra di esso, come onPrimary.
Usare primary come sfondo e onPrimary per il testo garantisce un contrasto leggibile.
Box(
Modifier.background(MaterialTheme.colorScheme.primary)
) {
Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}Tipografia del tema
MaterialTheme memorizza anche gli stili del testo in typography, come titleLarge e bodyMedium.
Passi uno di questi stili al parametro style di Text per ottenere un testo coerente e della dimensione corretta.
Text(
text = "Heading",
style = MaterialTheme.typography.titleLarge
)Schemi chiaro e scuro
Può creare uno schema con lightColorScheme() o darkColorScheme() e passarlo a MaterialTheme.
Alternare gli schemi consente alla Sua app di supportare sia la modalità chiara sia quella scura.
MaterialTheme(
colorScheme = darkColorScheme()
) {
Text("Dark mode")
}Personalizzare lo schema
Sovrascriva i ruoli specificandone il nome quando crea uno schema. Qui primary diventa un turchese personalizzato.
Tutto ciò che legge colorScheme.primary si aggiorna automaticamente.
val scheme = lightColorScheme(
primary = Color(0xFF018786)
)Perché usare il tema?
Inserire colori hardcoded ovunque rende le riprogettazioni complicate. Leggere i valori da MaterialTheme significa che una sola modifica aggiorna l'intera app.
Aiuta anche l'accessibilità, poiché i colori on mantengono un buon contrasto.
Surface e background
Il composable Surface applica un colore di sfondo del tema e un'elevazione dietro il proprio contenuto.
È un modo ordinato per assegnare a una card o a una schermata il colore di base corretto.
Surface(
color = MaterialTheme.colorScheme.background
) {
Text("On surface")
}Verifica rapida
Verifichi la Sua conoscenza dei colori e dei temi.
Riepilogo
Ha imparato a usare la classe Color, i colori esadecimali personalizzati e il modifier background. MaterialTheme raggruppa colorScheme, typography e shapes.
Leggere ruoli come primary e onPrimary mantiene contrasto e coerenza e supporta gli schemi chiaro e scuro.
Ottimo lavoro: ha completato il corso sulla personalizzazione grafica!
Impara Kotlin con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 36
- Lezioni
- 152
Domande Frequenti
La lezione «Colori e MaterialTheme» è gratuita?
Sì — il testo completo di «Colori e MaterialTheme» è 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 4 lezioni in totale.
Cosa imparerò in «Colori e MaterialTheme»?
Applichi una tematizzazione coerente. 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 4 di 4.
Quanto tempo richiede la lezione «Colori e MaterialTheme»?
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
- Definire lo stile del testo
- Pulsanti e clic
- Spaziatura con Padding
- Colori e MaterialTheme