Функция динамического цвета, добавленная в Android 12, позволяет пользователям персонализировать свои устройства, чтобы они соответствовали цветовой схеме их личных обоев или выбранному цвету в средстве выбора обоев.
Чтобы воспользоваться этой функцией, добавьте API DynamicColors, который применяет тему к приложению или действию, чтобы сделать приложение более персонализированным для пользователя.
На этой странице вы найдете инструкции по реализации динамических цветов в приложении. Эта функция также доступна отдельно для виджетов и адаптивных значков, как описано ниже. Вы также можете выполнить практическую работу.
Как Android создает цветовые схемы
Android выполняет следующие шаги для создания цветовых схем на основе обоев пользователя.
Система определяет основные цвета на выбранном изображении и извлекает исходный цвет.
На основе исходного цвета система генерирует пять ключевых цветов: основной, вторичный, третичный, нейтральный и нейтральный вариант.
Рисунок 2. Пример извлечения исходного цвета из изображения обоев и извлечения пяти ключевых цветов Система преобразует каждый ключевой цвет в тональную палитру из 13 тонов.
Рисунок 3. Пример создания тональных палитр На основе этих обоев система создает пять разных цветовых схем, которые используются для светлых и тёмных тем.
Как варианты цвета отображаются на устройстве пользователя
Начиная с Android 12 пользователи могут выбирать цветовые варианты из цветов, извлеченных из обоев, и различных тем. В Android 13 добавлено больше вариантов. Например, пользователь телефона Pixel с Android 13 может выбрать вариант в настройках Обои и стиль, как показано на рисунке 4.
В Android 12 был добавлен вариант Tonal Spot, а в Android 13 – Neutral, Vibrant Tonal и Expressive. У каждого варианта есть уникальный рецепт, который преобразует исходные цвета обоев пользователя за счет яркости и поворота оттенка. В следующем примере показана одна цветовая схема, выраженная через эти четыре цветовых варианта.
Для доступа к этим цветам в приложении по-прежнему используются те же токены. Подробнее о создании темы с помощью токенов…
Начало работы с представлениями
Динамические цвета можно применять на уровне приложения или действия. Для этого вызовите applyToActivitiesIfAvailable(), чтобы зарегистрировать ActivityLifeCycleCallbacks в приложении.
Kotlin
class MyApplication: Application() { override fun onCreate() { DynamicColors.applyToActivitiesIfAvailable(this) } }
Java
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); DynamicColors.applyToActivitiesIfAvailable(this); } }
Затем добавьте тему в приложение.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
Как создать тему с помощью токенов
Динамический цвет использует токены дизайна, чтобы упростить и унифицировать назначение цветов различным элементам пользовательского интерфейса. Токен дизайна позволяет вам семантически назначать цветовые роли, а не заданное значение, различным элементам пользовательского интерфейса. Это позволяет сделать тональную систему вашего приложения более гибкой, масштабируемой и согласованной, и особенно эффективно при разработке светлых и темных тем и динамических цветов.
Ниже приведены примеры светлой и тёмной тем, а также соответствующий XML-файл с цветами после применения токенов динамических цветов.
Светлая тема
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
Тёмная тема
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
XML-файл с цветами
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
Дополнительную информацию вы найдете по ссылкам ниже.
Чтобы узнать больше о динамических и пользовательских цветах, а также о создании токенов, посетите страницу Динамические цвета в Material 3.
Чтобы создать базовую цветовую палитру, а также цвета и тематическое оформление Material Design приложения, воспользуйтесь инструментом Material Theme Builder, который доступен в виде плагина Figma или в браузере.
Чтобы узнать больше о том, как цветовые схемы могут улучшить доступность вашего приложения, посетите страницу Material 3, посвященную доступности цветовой системы.
Сохранение пользовательских или фирменных цветов
Если в вашем приложении есть фирменные цвета, которые не должны меняться в зависимости от предпочтений пользователя, вы можете добавить их отдельно при создании цветовой схемы. Пример:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
Вы также можете использовать Material Theme Builder, чтобы импортировать дополнительные цвета, которые расширят вашу цветовую схему, создав тем самым единую систему цветов.
При этом вы можете использовать HarmonizedColors, чтобы изменить тон пользовательских цветов. Это позволяет достичь визуального баланса и доступного контраста в сочетании с цветами, созданными пользователем. Она возникает во время выполнения с applyToContextIfAvailable().
Ознакомьтесь с рекомендациями Material 3 по гармонизации пользовательских цветов.
Примените динамические цвета к адаптивным значкам и виджетам
Помимо поддержки динамических цветовых тем в приложении, вы можете добавить поддержку динамических цветовых тем для виджетов (начиная с Android 12) и адаптивных значков (начиная с Android 13).