Android Academy · Урок

Темы и стили

Определяйте повторно используемые стили для виджетов и темы приложения. Настройте роли цветов Material 3, типографическую шкалу, пользовательские шрифты и тёмный режим.

«Темы и стили» — бесплатный урок Android Academy на CoddyKit. Это урок 2 из 5. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Android Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Android Academy содержит 5 уроков всего.

Стили и темы

Два понятия, которые часто путают:

Стиль — набор атрибутов представления, применяемых к одному виджету (например, размер текста, цвет и отступы). Устанавливается с помощью style="@style/MyButton".
Тема — набор семантических атрибутов, применяемых к Activity или приложению. Представления получают атрибуты темы с помощью ?attr/colorPrimary.

Определение стиля

Создавайте стили в res/values/styles.xml. Стили могут наследовать свойства родительского стиля:

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

Определение темы

Темы наследуют свойства родительской темы Material 3 и переопределяют атрибуты цвета и формы:

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

Цветовая система Material 3

Material 3 использует семантические роли цветов, а не необработанные шестнадцатеричные значения. Основные роли:

colorPrimary — основной цвет бренда
colorOnPrimary — текст и значки на основном фоне
colorSecondary — дополнительный цвет
colorSurface — фон карточек и панелей
colorError — состояния ошибки
colorBackground — фон окна

Ресурсы цветов

Определяйте цвета в 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>

Тёмная тема

Темы Material 3 DayNight автоматически обрабатывают тёмный режим. Добавьте ночной вариант для цветов:

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

Типографика

Material 3 определяет типографическую шкалу. Используйте атрибуты textAppearance для единообразного текста:

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

Пользовательские шрифты

Добавьте шрифт в res/font/ и укажите ссылку на него в теме или стиле:

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

Применение темы к Activity

Установите тему в AndroidManifest.xml. Для каждой 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>

Чтение атрибутов темы в коде

Получайте доступ к любому атрибуту темы во время выполнения в коде Kotlin:

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

Используйте Material Theme Builder (m3.material.io/theme-builder), чтобы создать полную цветовую схему Material 3 на основе цвета вашего бренда. Он экспортирует готовые к использованию XML-файлы для colors.xml и themes.xml. Это самый быстрый способ получить единую систему дизайна.

Быстрая проверка

В чём ключевое различие между Style и Theme в Android?

Повторение: темы и стили

С этого начинается единообразный дизайн:

Стили — атрибуты уровня виджета, которые можно повторно использовать в разных представлениях
Темы — атрибуты уровня приложения или Activity, семантические роли цветов
Роли цветов Material 3: colorPrimary, colorSurface, colorError и другие
Тёмный режим с помощью values-night/colors.xml + MODE_NIGHT_FOLLOW_SYSTEM
Типографическая шкала с помощью атрибутов textAppearance
Используйте Material Theme Builder для быстрого создания цветовых схем

Далее: рисование пользовательских представлений с нуля.

Часто задаваемые вопросы

Урок «Темы и стили» бесплатный?

Да — полный текст урока «Темы и стили» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Android Academy, подпишись на CoddyKit PRO. Курс Android Academy содержит 5 уроков всего.

Чему я научусь в уроке «Темы и стили»?

Определяйте повторно используемые стили для виджетов и темы приложения. Настройте роли цветов Material 3, типографическую шкалу, пользовательские шрифты и тёмный режим. Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Android Academy?

Предыдущий опыт не требуется. Android Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 5.

Сколько времени занимает урок «Темы и стили»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Android Academy?

Да. Каждый урок Android Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Android Academy