Android Academy · Lektion

Farben und MaterialTheme

Wenden Sie ein konsistentes Theme an.

Farben und MaterialTheme ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Farben in Compose

Compose stellt Farben mit der Klasse Color dar. Es gibt vordefinierte Werte wie Color.Red und Color.Blue.

Sie übergeben einen Color-Wert an Parameter wie die Textfarbe oder einen Hintergrund.

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

Benutzerdefinierte Farbwerte

Erstellen Sie aus einem Hexadezimalcode mit Color(0xFFRRGGBB) eine beliebige Farbe. Die ersten beiden Stellen, FF, bedeuten vollständig deckend.

Zum Beispiel ist 0xFF6200EE ein Violettton.

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

Hintergrundfarbe

Verwenden Sie den Modifier background, um hinter einem Composable zu zeichnen. Fügen Sie Padding hinzu, damit der Inhalt die Ränder nicht berührt.

Die Reihenfolge ist wichtig: background vor padding füllt den gepaddeten Bereich aus.

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

Was ist MaterialTheme?

MaterialTheme ist ein System, das die Farben, Schriftarten und Formen Ihrer App an einem Ort verwaltet.

Composables lesen daraus, sodass Ihre gesamte App konsistent bleibt und sich leicht umgestalten lässt.

MaterialTheme {
    Text("Themed app")
}

Farbschema des Themes

Das colorScheme des Themes stellt benannte Rollen wie primary, secondary und background bereit.

Wenn Sie diese statt fester Farben auslesen, können Sie das Erscheinungsbild an einer einzigen Stelle ändern.

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

Primary und onPrimary

Zu jeder Hauptfarbe gibt es eine on-Partnerfarbe für Text, der darauf dargestellt wird, zum Beispiel onPrimary.

Wenn Sie primary als Hintergrund und onPrimary als Textfarbe verwenden, ist ein lesbarer Kontrast gewährleistet.

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

Typografie des Themes

MaterialTheme speichert außerdem Textstile in typography, zum Beispiel titleLarge und bodyMedium.

Übergeben Sie einen davon an den style-Parameter von Text, um eine einheitliche und passend dimensionierte Darstellung zu erhalten.

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

Helle und dunkle Schemata

Sie können mit lightColorScheme() oder darkColorScheme() ein Schema erstellen und es an MaterialTheme übergeben.

Durch das Wechseln des Schemas kann Ihre App sowohl den hellen als auch den dunklen Modus unterstützen.

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

Das Schema anpassen

Überschreiben Sie Rollen, indem Sie sie beim Erstellen eines Schemas benennen. Hier wird primary zu einem benutzerdefinierten Türkis.

Alles, was colorScheme.primary ausliest, wird automatisch aktualisiert.

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

Warum das Theme verwenden?

Wenn Farben überall fest im Code hinterlegt sind, werden Neugestaltungen mühsam. Wenn Sie aus MaterialTheme lesen, aktualisiert eine Änderung die gesamte App.

Das unterstützt außerdem die Barrierefreiheit, da On-Farben für einen guten Kontrast sorgen.

Surface und Background

Das Composable Surface wendet hinter seinem Inhalt eine Theme-Hintergrundfarbe und eine Erhebung an.

So erhält eine Karte oder ein Bildschirm auf einfache Weise die passende Grundfarbe.

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

Kurze Überprüfung

Testen Sie Ihr Wissen über Farben und Themes.

Zusammenfassung

Sie haben gelernt, die Klasse Color, benutzerdefinierte Hex-Farben und den Modifier background zu verwenden. MaterialTheme bündelt colorScheme, typography und Formen.

Das Auslesen von Rollen wie primary und onPrimary sorgt für Kontrast und Konsistenz und unterstützt helle sowie dunkle Schemata.

Großartige Arbeit beim Abschluss des Styling-Kurses!

Häufig gestellte Fragen

Ist die Lektion „Farben und MaterialTheme“ kostenlos?

Ja — der vollständige Text von „Farben und MaterialTheme“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Farben und MaterialTheme“?

Wenden Sie ein konsistentes Theme an. Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Farben und MaterialTheme“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Android Academy