Android Academy · Lektion

Themes und Styles

Themes und Styles ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 5. 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 5 Lektionen.

Styles und Themes im Vergleich

Zwei häufig verwechselte Konzepte:

Style — eine Sammlung von View-Attributen, die auf ein einzelnes Widget angewendet wird (z. B. Textgröße, Farbe, Innenabstand). Wird mit style="@style/MyButton" festgelegt.
Theme — eine Sammlung semantischer Attribute, die auf eine Activity oder die App angewendet wird. Views lesen Theme-Attribute mit ?attr/colorPrimary aus.

Einen Style definieren

Erstellen Sie Styles in res/values/styles.xml. Styles können von einem übergeordneten Style erben:

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

Ein Theme definieren

Themes erben von einem übergeordneten Material-3-Theme und überschreiben Farb- und Formattribute:

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

Farbsystem von Material 3

Material 3 verwendet semantische Farbrollen statt direkter Hex-Werte. Wichtige Rollen:

colorPrimary — primäre Markenfarbe
colorOnPrimary — Text und Icons auf dem primären Hintergrund
colorSecondary — Akzentfarbe
colorSurface — Hintergründe von Karten und Sheets
colorError — Fehlerzustände
colorBackground — Fensterhintergrund

Farben als Ressourcen

Definieren Sie Farben 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>

Dark Theme

Material-3-DayNight-Themes verwalten den Dark Mode automatisch. Fügen Sie für Farben eine Nachtvariante hinzu:

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

Typografie

Material 3 definiert eine typografische Skala. Verwenden Sie textAppearance-Attribute für eine konsistente Textdarstellung:

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

Benutzerdefinierte Schriftarten

Fügen Sie eine Schriftart zu res/font/ hinzu und referenzieren Sie sie in Ihrem Theme oder 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>

Theme auf eine Activity anwenden

Legen Sie das Theme in AndroidManifest.xml fest. Sie können für jede Activity ein anderes Theme verwenden:

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

Theme-Attribute im Code auslesen

Greifen Sie zur Laufzeit im Kotlin-Code auf jedes Theme-Attribut zu:

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

Verwenden Sie den Material Theme Builder (m3.material.io/theme-builder), um aus Ihrer Markenfarbe ein vollständiges Material-3-Farbschema zu generieren. Er exportiert direkt verwendbare XML-Dateien für colors.xml und themes.xml. So erhalten Sie am schnellsten ein konsistentes Designsystem.

Kurze Überprüfung

Was ist der wesentliche Unterschied zwischen einem Style und einem Theme in Android?

Zusammenfassung: Themes und Styles

Hier beginnt konsistentes Design:

Styles — Attribute auf Widget-Ebene, wiederverwendbar für viele Views
Themes — Attribute auf App- oder Activity-Ebene, semantische Farbrollen
Farbrollen von Material 3: colorPrimary, colorSurface, colorError usw.
Dark Mode über values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM
Typografische Skala über textAppearance-Attribute
Verwenden Sie den Material Theme Builder, um schnell Farbschemata zu generieren

Als Nächstes: Benutzerdefinierte Views von Grund auf zeichnen.

Häufig gestellte Fragen

Ist die Lektion „Themes und Styles“ kostenlos?

Ja — der vollständige Text von „Themes und Styles“ 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 5 Lektionen.

Was lerne ich in „Themes und Styles“?

Definieren Sie wiederverwendbare Styles für Widgets und Themes für Ihre App. Richten Sie Farbrrollen von Material 3, eine typografische Skalierung, benutzerdefinierte Schriftarten und den Dark Mode e… 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 2 von 5.

Wie lange dauert die Lektion „Themes und Styles“?

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