Android Academy · Lekcja

Motywy i style

Zdefiniuj wielokrotnego użytku Styles dla widżetów i Themes dla aplikacji. Skonfiguruj role kolorów Material 3, skalę typografii, niestandardowe czcionki i tryb ciemny.

Motywy i style to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 2 z 5. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 5 lekcji w sumie.

Style a motywy

Dwa często mylone pojęcia:

Styl — zbiór atrybutów widoku stosowanych do pojedynczego widgetu (np. rozmiar tekstu, kolor, dopełnienie). Ustawiany za pomocą style="@style/MyButton".
Motyw — zbiór semantycznych atrybutów stosowanych do Activity lub aplikacji. Widoki odczytują atrybuty motywu za pomocą ?attr/colorPrimary.

Definiowanie stylu

Utwórz style w pliku res/values/styles.xml. Style mogą dziedziczyć po elemencie nadrzędnym:

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

Definiowanie motywu

Motywy dziedziczą po elemencie nadrzędnym Material 3 i nadpisują atrybuty kolorów oraz kształtów:

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

System kolorów Material 3

Material 3 używa semantycznych ról kolorów zamiast surowych wartości szesnastkowych. Najważniejsze role:

colorPrimary — główny kolor marki
colorOnPrimary — tekst i ikony na głównym tle
colorSecondary — kolor akcentu
colorSurface — tła kart i arkuszy
colorError — stany błędów
colorBackground — tło okna

Zasoby kolorów

Zdefiniuj kolory w pliku 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>

Motyw ciemny

Motywy Material 3 DayNight automatycznie obsługują tryb ciemny. Dodaj wariant nocny dla kolorów:

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

Typografia

Material 3 definiuje skalę typograficzną. Używaj atrybutów textAppearance, aby zachować spójny wygląd tekstu:

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

Niestandardowe czcionki

Dodaj czcionkę do katalogu res/font/ i odwołaj się do niej z motywu lub stylu:

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

Stosowanie motywu do Activity

Ustaw motyw w pliku AndroidManifest.xml. Możesz użyć innego motywu dla każdej 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>

Odczytywanie atrybutów motywu w kodzie

Uzyskaj dostęp do dowolnego atrybutu motywu w czasie działania w kodzie Kotlina:

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

Użyj narzędzia Material Theme Builder (m3.material.io/theme-builder), aby wygenerować kompletny schemat kolorów Material 3 na podstawie koloru marki. Narzędzie eksportuje gotowe do użycia pliki XML colors.xml i themes.xml. To najszybszy sposób na uzyskanie spójnego systemu projektowania.

Szybkie sprawdzenie

Jaka jest najważniejsza różnica między stylem a motywem w Androidzie?

Podsumowanie: motywy i style

Spójny projekt zaczyna się tutaj:

Style — atrybuty na poziomie widgetu, wielokrotnego użytku w wielu widokach
Motywy — atrybuty na poziomie aplikacji lub Activity, semantyczne role kolorów
Role kolorów Material 3: colorPrimary, colorSurface, colorError itd.
Tryb ciemny za pomocą values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM
Skala typograficzna za pomocą atrybutów textAppearance
Używaj Material Theme Builder do szybkiego generowania schematów kolorów

Dalej: rysowanie niestandardowych widoków od podstaw.

Często zadawane pytania

Czy lekcja „Motywy i style” jest bezpłatna?

Tak — pełny tekst „Motywy i style” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 5 lekcji w sumie.

Co nauczysz się w „Motywy i style”?

Zdefiniuj wielokrotnego użytku Styles dla widżetów i Themes dla aplikacji. Skonfiguruj role kolorów Material 3, skalę typografii, niestandardowe czcionki i tryb ciemny. Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 5.

Ile czasu zajmuje lekcja „Motywy i style”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Android Academy