Предоставьте пользователям возможность персонализировать цветовое восприятие в вашем приложении.

Функция Dynamic Color, добавленная в Android 12, позволяет пользователям персонализировать свои устройства в соответствии с цветовой схемой их личных обоев или с помощью цвета, выбранного в средстве выбора обоев.

Вы можете использовать эту функцию, добавив API DynamicColors , который применяет эту тему к вашему приложению или действию, чтобы сделать ваше приложение более персонализированным для пользователя.

Рисунок 1. Примеры тональных цветовых схем, полученных из разных обоев.

На этой странице приведены инструкции по реализации динамических цветов в вашем приложении. Эта функция также доступна отдельно для виджетов и адаптивных значков , как описано далее на этой странице. Вы также можете опробовать codelab .

Как Android создает цветовые схемы

Android выполняет следующие шаги для создания цветовых схем на основе обоев пользователя.

  1. Система определяет основные цвета выбранного изображения обоев и извлекает исходный цвет.

  2. Система использует этот исходный цвет для дальнейшей экстраполяции пяти ключевых цветов, известных как первичный , вторичный , третичный , нейтральный и нейтральный вариант .

    Пример извлечения исходного цвета
    Рисунок 2. Пример извлечения исходного цвета из изображения обоев и извлечения пяти ключевых цветов.
  3. Система интерпретирует каждый ключевой цвет в тональную палитру из 13 тонов.

    Пример генерации заданной тональной палитры
    Рисунок 3. Пример генерации заданной тональной палитры
  4. Система использует эти обои для создания пяти различных цветовых схем, которые служат основой для любых светлых и темных тем.

Как варианты цвета отображаются на устройстве пользователя

Пользователи могут выбирать варианты цвета из цветов, извлеченных из обоев, и различных тем, начиная с Android 12, а в Android 13 добавляется больше вариантов. Например, пользователь телефона Pixel под управлением Android 13 может выбрать вариант в настройках «Обои и стиль» , как показано на рисунке 4.

Рис. 4. Выбор вариантов цвета в настройках обоев (показано на устройстве Pixel)

В Android 12 добавлен вариант Tonal Spot , за которым следуют варианты Neutral , Vibrant Tonal и Expressive в Android 13. Каждый вариант имеет уникальный рецепт, который преобразует исходные цвета обоев пользователя посредством яркости и вращения оттенка. В следующем примере показана одна цветовая схема, выраженная с помощью этих четырех цветовых вариантов.

Рис. 5. Пример того, как разные цветовые варианты выглядят на одном устройстве

Ваше приложение по-прежнему использует те же токены для доступа к этим цветам. Подробную информацию о токенах см. в разделе Создание темы с помощью токенов на этой странице.

Начало работы с 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() .

Рисунок 6. Пример гармонизации нестандартных цветов

См. руководство Материала 3 по гармонизации индивидуальных цветов .

Примените динамический цвет к адаптивным значкам и виджетам.

Помимо включения темы Dynamic Color в вашем приложении, вы также можете поддерживать тему Dynanmic Color для виджетов , начиная с Android 12, и для адаптивных значков, начиная с Android 13.