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

Попробуйте способ создания

Jetpack Compose — рекомендуемый набор инструментов пользовательского интерфейса для Android. Узнайте, как работать с динамическим цветом в Compose.

Динамические цвета — Material Design 3 →

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

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

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

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

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

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

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

   

3. Система интерпретирует каждый ключевой цвет в тональную палитру из 13 тонов.

   

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

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

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

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

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

Начало работы с представлениями

Вы можете применить 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.

Попробуйте способ создания

Jetpack Compose — рекомендуемый набор инструментов пользовательского интерфейса для Android. Узнайте, как работать с динамическим цветом в Compose.

Динамические цвета — Material Design 3 →

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

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

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

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

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

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

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

   

3. Система интерпретирует каждый ключевой цвет в тональную палитру из 13 тонов.

   

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

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

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

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

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

Начало работы с представлениями

Вы можете применить 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.