Функция Dynamic Color, добавленная в Android 12, позволяет пользователям персонализировать свои устройства, подобрав тон в соответствии с цветовой гаммой личных обоев или выбрав цвет в меню выбора обоев.
Вы можете использовать эту функцию, добавив API DynamicColors , который применяет это оформление к вашему приложению или активности, делая ваше приложение более персонализированным для пользователя.
На этой странице представлены инструкции по внедрению динамических цветов в ваше приложение. Эта функция также доступна отдельно для виджетов и адаптивных значков , как описано далее на этой странице. Вы также можете попробовать выполнить задания в Codelab .
Как Android создает цветовые схемы
Android выполняет следующие шаги для генерации цветовых схем на основе обоев пользователя.
Система определяет основные цвета в выбранном изображении обоев и извлекает исходный цвет.
Система использует этот исходный цвет для дальнейшего выделения пяти ключевых цветов, известных как основной , вторичный , третичный , нейтральный и нейтральный вариант .
Рисунок 2. Пример извлечения исходного цвета из изображения обоев и выделения пяти ключевых цветов. Система преобразует каждый ключевой цвет в тональную палитру из 13 оттенков.
Рисунок 3. Пример генерации заданной тональной палитры. Система использует эти единственные обои для создания пяти различных цветовых схем, которые служат основой для любых светлых и темных тем.
Как отображаются цветовые варианты на устройстве пользователя
Начиная с Android 12, пользователи могут выбирать цветовые варианты из цветов, извлеченных из обоев, и различных тем, а в Android 13 добавлено больше вариантов. Например, пользователь телефона Pixel под управлением Android 13 выберет вариант в настройках «Обои и стиль» , как показано на рисунке 4.
В Android 12 был добавлен вариант Tonal Spot , а в Android 13 — Neutral , Vibrant Tonal и Expressive . Каждый вариант имеет уникальный алгоритм, который преобразует исходные цвета обоев пользователя за счет изменения насыщенности и поворота оттенка. В следующем примере показана единая цветовая схема, выраженная с помощью этих четырех цветовых вариантов.
Ваше приложение по-прежнему использует те же токены для доступа к этим цветам. Подробную информацию о токенах см. в разделе «Создание темы с помощью токенов» на этой странице.
Начните работу с Views
Динамический цвет можно применять на уровне приложения или активности. Для этого вызовите applyToActivitiesIfAvailable() чтобы зарегистрировать в приложении объект ActivityLifeCycleCallbacks .
Котлин
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 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.