Функция Dynamic Color, добавленная в Android 12, позволяет пользователям персонализировать свои устройства в соответствии с цветовой схемой их личных обоев или с помощью цвета, выбранного в средстве выбора обоев.
Вы можете использовать эту функцию, добавив API DynamicColors , который применяет эту тему к вашему приложению или действию, чтобы сделать ваше приложение более персонализированным для пользователя.
На этой странице приведены инструкции по реализации динамических цветов в вашем приложении. Эта функция также доступна отдельно для виджетов и адаптивных значков , как описано далее на этой странице. Вы также можете опробовать codelab .
Как Android создает цветовые схемы
Android выполняет следующие шаги для создания цветовых схем на основе обоев пользователя.
Система определяет основные цвета выбранного изображения обоев и извлекает исходный цвет.
Система использует этот исходный цвет для дальнейшей экстраполяции пяти ключевых цветов, известных как первичный , вторичный , третичный , нейтральный и нейтральный вариант .
Рисунок 2. Пример извлечения исходного цвета из изображения обоев и извлечения пяти ключевых цветов. Система интерпретирует каждый ключевой цвет в тональную палитру из 13 тонов.
Рисунок 3. Пример генерации заданной тональной палитры Система использует эти обои для создания пяти различных цветовых схем, которые служат основой для любых светлых и темных тем.
Как варианты цвета отображаются на устройстве пользователя
Пользователи могут выбирать варианты цвета из цветов, извлеченных из обоев, и различных тем, начиная с Android 12, а в Android 13 добавляется больше вариантов. Например, пользователь телефона Pixel под управлением Android 13 может выбрать вариант в настройках «Обои и стиль» , как показано на рисунке 4.
В Android 12 добавлен вариант Tonal Spot , за которым следуют варианты Neutral , Vibrant Tonal и Expressive в Android 13. Каждый вариант имеет уникальный рецепт, который преобразует исходные цвета обоев пользователя посредством яркости и вращения оттенка. В следующем примере показана одна цветовая схема, выраженная с помощью этих четырех цветовых вариантов.
Ваше приложение по-прежнему использует те же токены для доступа к этим цветам. Подробную информацию о токенах см. в разделе Создание темы с помощью токенов на этой странице.
Начало работы с Compose
Если вы создаете свой пользовательский интерфейс с помощью Compose, ознакомьтесь с разделом «Темы материалов» в Compose, чтобы получить подробную информацию о применении динамического цвета в вашем приложении.
Начало работы с представлениями
Вы можете применить Dynamic Color на уровне приложения или действия. Для этого вызовите applyToActivitiesIfAvailable() чтобы зарегистрировать ActivityLifeCycleCallbacks в вашем приложении.
Котлин
class MyApplication: Application() {
override fun onCreate() {
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Ява
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
DynamicColors.applyToActivitiesIfAvailable(this);
}
}
Затем добавьте тему в свое приложение.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
Создайте свою тему с токенами
Dynamic Color использует преимущества дизайнерских токенов, чтобы сделать назначение цветов различным элементам пользовательского интерфейса более простым и последовательным. Токен дизайна позволяет семантически назначать цветовые роли, а не заданное значение, различным элементам пользовательского интерфейса. Это обеспечивает большую гибкость, масштабируемость и согласованность тональной системы вашего приложения и особенно эффективно при разработке светлых и темных тем и динамического цвета.
В следующих фрагментах показаны примеры светлых и темных тем, а также 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>
Для получения дополнительной информации:
Чтобы узнать больше о Dynamic Color, пользовательских цветах и создании токенов, посетите страницу Material 3 Dynamic Color .
Чтобы создать базовую цветовую палитру, а также цвета и тему вашего приложения, воспользуйтесь конструктором тем материалов, доступным через плагин Figma или в браузере ).
Чтобы узнать больше о том, как использование цветовых схем может улучшить доступность вашего приложения, см. страницу Материала 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() .
См. руководство Материала 3 по гармонизации индивидуальных цветов .
Примените динамический цвет к адаптивным значкам и виджетам.
Помимо включения темы Dynamic Color в вашем приложении, вы также можете поддерживать тему Dynanmic Color для виджетов , начиная с Android 12, и для адаптивных значков, начиная с Android 13.