Материал, который вы проектируете

Начиная с Android 12, Material You design фокусируется на выражении и текучести в ОС Android, с целью помочь пользователям создавать и владеть единым, целостным опытом, отвечающим их потребностям. Как партнер Android, вы поощряетесь к внедрению Material You design в ваши устройства Android в следующих областях:

• Динамичный цвет
• Движение
• Виджеты

Динамичный цвет

Динамический цвет — центральный элемент дизайна Material You и ключевая часть многолетней стратегии Android по предоставлению пользователям более простой и глубокой настройки, чем на других устройствах. Material You предлагает:

• Пользователи и разработчики получают последовательную, богатую историю персонализации, доступную на любом устройстве Android.

• OEM-производители Android-устройств могут продолжать совершенствовать пользовательский интерфейс системы и собственные приложения таким образом, чтобы они соответствовали их оборудованию, цвету, марке и форме бренда.

Чтобы воспользоваться динамическим цветом, используйте историю извлечения цвета Android 12 Material You как ключевую часть вашего программного обеспечения, предлагаемого пользователям. На устройстве используйте логику извлечения цвета, которая находится в AOSP, особенно логику, которая берет один исходный цвет обоев или темы и выводит его через 65 цветовых API. Требования к динамическому цвету см. в разделе Использование динамического цвета .

Полный динамический цветовой поток включает четыре этапа, как показано ниже:

Рисунок 1. Material You динамический цветовой поток

1. Пользователь меняет обои или тему с помощью OEM-выбора.

2. Пользователь выбирает один из следующих вариантов:

   • Тема устройства. При выборе этого параметра Android автоматически выбирает один исходный цвет, который соответствует требованиям.

   • Новые обои + тема. При выборе логика AOSP автоматически выбирает один исходный цвет из выбранных обоев.

3. AOSP расширяет один исходный цвет до 5 тональных палитр с 13 вариантами тонального цвета в каждой в соответствии с логикой AOSP, которые затем заполняют 65 цветовых атрибутов.

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

Патчи Android 12

Чтобы получить сквозную логику для извлечения цвета обоев и позволить устройству заполнять 65-цветовые API в соответствии с экосистемой, включите следующие исправления в реализацию Android 12:

• Обязательный

  • Добавить монету в AOSP
  • Настройте фильтры цветности/звездности для исходных цветов
  • Используйте максимальную насыщенность цвета 40 при тоне 90.

• Настоятельно рекомендуется

  • Исправлено состояние гонки при настройке системных свойств цвета загрузки.
  • Разрешить уведомления оверлеев об изменениях темы
  • Исправлено состояние гонки при настройке системных свойств цвета загрузки (раунд 2)
  • Переместить FeatureFlags в пакет флагов.
  • Правильно реализовать поддержку многопользовательских тем
  • Исправлена ​​ошибка, из-за которой указанный параметр цвета обоев отсутствовал после перезагрузки.
  • Исправлена ​​ошибка вычисления третичного оттенка
  • Не разрешайте фоновым приложениям менять тему

Указание пользовательских цветов в ThemePicker

Если вы используете приложение AOSP ThemePicker, приложение WallpaperPicker отображает раздел цветов, если выполняются оба следующих условия:

• flag_monet в frameworks/base/packages/SystemUI/res/values/flags.xml имеет true .
• Системный APK-файл- заглушка с именем пакета определяется в themes_stub_package в файле packages/apps/ThemePicker/res/values/override.xml .

Формат заглушки APK

Образец версии этого APK можно найти в packages/apps/ThemePicker/themes .

Этот APK должен содержать только ресурсы, подробно описывающие доступные основные цвета и их названия.

Заглушка должна содержать XML-файл в папке res/xml следующего формата:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="color_bundles">
        <item>color1</item>
        <item>color2</item>
        <item>color3</item>
        <item>color4</item>
    </array>

    <string name="bundle_name_color1">Blue</string>
    <string name="bundle_name_color2">Red</string>
    <string name="bundle_name_color3">Yellow</string>
    <string name="bundle_name_color4">Green</string>

</resources>

В этом файле каждый item в color_bundles имеет уникальное имя, при условии, что строки ниже называются bundle_name_ item .

Для каждого цвета должна быть строка bundle_name_ item с описательным именем для каждого цвета. Их можно перевести, добавив соответствующие переведенные строки в каталоги res/values- language code .

Фактические значения цвета могут находиться либо в том же XML-файле, либо в отдельном XML-файле ресурсов в следующем формате:

<resources>
    <color name="color_primary_color1">#0000FF</color>
    <color name="color_secondary_color1">#0000FF</color>

    <color name="color_primary_color2">#ff0000</color>
    <color name="color_secondary_color2">#ff0000</color>

    <color name="color_primary_color3">#ffff00</color>
    <color name="color_secondary_color3">#ffff00</color>

    <color name="color_primary_color4">#00ff00</color>
    <color name="color_secondary_color4">#00ff00</color>
</resources>

Для каждого элемента в массиве цветовых пакетов должны быть color_primary_ item и color_secondary_ item (и оба цвета должны быть одного цвета). Значения для этих color записей являются фактическими цветовыми кодами для каждого цвета, которые будут отображаться в разделе основных цветов .

Шаг 1: Создание пользовательского опыта тематизации

Выбор темы — это то место, где пользователи взаимодействуют с новыми возможностями персонализации Material You и потенциально выбирают между цветовыми вариантами или предустановками. Поскольку это соответствует вашему продукту и демографическим данным пользователей, вы можете предложить пользователям более богатый опыт персонализации и цвета с помощью выбора темы или выбора обоев .

• При использовании выбора обоев извлечение цвета обоев включено по умолчанию. Однако вы можете внести некоторые изменения в выбор, чтобы предоставить пользователю больше возможностей.

Шаг 2: Извлечение цвета обоев в исходный цвет

Чтобы включить извлечение цвета обоев, выберите исправления Android 12, перечисленные выше (эта функциональность будет включена по умолчанию в будущем выпуске AOSP). Логика AOSP, которая запускает извлечение обоев, начинается в frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java , на ThemeOverlayController#mOnColorsChangedListener , через WallpaperManager#onWallpaperColorsChanged . Мы рекомендуем использовать немодифицированную логику AOSP, чтобы обеспечить единообразный опыт разработки.

По умолчанию логика выбирает цвет с самой высокой частотой, подходящий для использования. Чтобы воспользоваться другими исходными цветами, возвращаемыми алгоритмом, и представить эти цвета пользователям в средстве выбора темы, используйте ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) .

Чтобы быть пригодным для использования, исходный цвет (извлеченный из обоев или выбранного пользователем пресета) должен иметь минимальное значение цветности CAM16 5; это гарантирует, что исходный цвет не будет затронут тонкими темными тонами при преобразовании из одного цвета в 65 тональных цветов и останется репрезентативным для выбора пользователя. Для чтения и изменения цветов в CAM16 используйте Cam#fromInt или Cam#getInt .

Использование нединамической цветовой палитры. Для устройств, которые не поддерживают извлечение цвета обоев, вы все равно можете гарантировать, что приложения Google и сторонние приложения, поддерживающие динамический цвет, будут выглядеть великолепно, выполнив следующие действия:

• Используйте палитру материалов по умолчанию, отключив flag_monet в frameworks/base/packages/SystemUI/res/values/flags.xml .
• Убедитесь, что пользователи по-прежнему могут персонализировать свою ОС с помощью предустановленного средства выбора тем.

Шаг 3: Разверните исходный цвет в API цвета

Используя один исходный цвет, полученный на предыдущем этапе, Android генерирует 5 уникальных тональных палитр (акцент 1-3, нейтральный 1-2), каждая палитра включает 13 цветов, а каждый цвет включает различные значения яркости (от 0 до 1000), всего 65 цветов. Логика, представленная в патчах Android 12, правильно реализует это расширение цвета; приведенные ниже подробности описывают реализацию.

Для обеспечения единообразия проявителя 5 тональных палитр (accent1, accent2, accent3, neutral1, neutral2) и соответствующие им 13 цветов должны быть основаны на одном исходном цвете с соответствующими изменениями в значениях цветности и оттенка CAM16 , как указано ниже:

• system_accent1

  • Цветность: используйте «40» для вариантов цветов, заканчивающихся на 0 , 10 , 50 и 100 , в противном случае «48»
  • Оттенок: такой же, как у источника

• system_accent2

  • Цветность: используйте «16»
  • Оттенок: такой же, как у источника

• system_accent3

  • Цветность: используйте «32»
  • Оттенок: повернуть на 60 градусов в положительном направлении

• system_neutral1

  • Цветность: используйте «4»
  • Оттенок: такой же, как у источника

• system_neutral2

  • Цветность: используйте «8»
  • Оттенок: такой же, как у источника

CTS включает тесты для проверки вызовов API яркости и оттенка. Для запуска используйте atest SystemPalette .

Шаг 4: Используйте динамические цвета в приложениях и системном пользовательском интерфейсе

После установки динамических цветов на устройстве приложения следуют рекомендациям Material по использованию цветов. Рекомендации Material должны быть опубликованы на material.io до 26 октября 2021 года для принятия сторонними приложениями. Для пользовательского интерфейса системы и приложений собственной разработки мы настоятельно рекомендуем интегрировать динамические цвета во все элементы пользовательского интерфейса таким образом, чтобы это соответствовало вашему оборудованию и бренду и помогло вам дифференцировать ваши устройства.

Общие рекомендации по динамическому цвету см. в следующих документах:

• Используйте акцентные цвета для элементов переднего плана в приложениях и системном пользовательском интерфейсе:

  @android:color/system_accent1_0 … 1000 // most-used foreground color group
  @android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces
  @android:color/system_accent3_0 … 1000 // playful, analogous color
  

• Используйте нейтральные цвета для фоновых элементов в приложениях и системном пользовательском интерфейсе:

  @android:color/system_neutral1_0 … 1000 // most-used background color group
  @android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces
  

Дополнительную информацию о том, как Material You сопоставляет цвета и как API используются в SysUI, см. в разделе Дополнительные ресурсы .

Шаг 5: Добавьте динамические параметры цвета в реализацию AOSP WallpaperPicker

Сборка для Android 13 и выше

Начиная с Android 13, android.theme.customization.accent_color устарел. Добавлен новый атрибут android.theme.customization.theme_style для поддержки различных цветовых вариантов. В настоящее время в кодовой базе есть четыре варианта:

TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.

Они отправляются в Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES , как показано в JSON ниже:

{
    "android.theme.customization.system_palette":"B1611C",
    "android.theme.customization.theme_style":"EXPRESSIVE"
}

Сборка для Android 12 и ниже

При использовании пользовательского средства выбора темы устройство должно отправить допустимый исходный цвет в Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES , предоставив файл JSON в следующем формате (где 746BC1 — пример допустимого исходного цвета):

{
      "android.theme.customization.system_palette":"746BC1",
      "android.theme.customization.accent_color":"746BC1"
}

При этом извлечение цвета обоев (шаг 2) пропускается, а предоставленный исходный цвет напрямую расширяется до 65 цветовых атрибутов (шаг 3).

Шаг 6: Подайте заявку

Помимо системной интеграции, вам необходимо подать заявку и сообщить нам название вашего бренда ( Build.MANUFACTURER ). Поскольку большинство сторонних приложений используют Material Components для Android для отображения динамических цветов, мы используем жестко закодированный список разрешенных устройств , чтобы указать, какие устройства интегрировали функцию динамических цветовых тональных палитр .

Движение

Fluid motion делает устройства современными и премиальными. Чтобы завоевать и сохранить доверие и удовлетворенность разработчиков, прокрутка и рябь — две ключевые части fluid motion, которые должны выглядеть и ощущаться согласованно.

Использование прокрутки в вашей ОС

Android 12 включает более отзывчивое, динамическое движение прокрутки в виде растяжения вида, которое отображается, когда пользователь пытается прокрутить за пределы края списка. Пример показан ниже:

Рисунок 2. Эффект прокрутки в Android 12, показанный в настройках

Для обеспечения единообразия разработчиков убедитесь, что общий эффект прокрутки на ваших устройствах аналогичен следующему:

• На устройствах, которые возвращают true для ActivityManager.isHighEndGfx() , эффект прокрутки представляет собой нелинейное растяжение экрана (как показано выше).

• На устройствах с низкой производительностью эффект растяжения упрощается до линейного растяжения (для снижения нагрузки на систему).

Использование прокрутки в собственных приложениях

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

• Для поддержки растягивания прокрутки выполните обновление до последних версий библиотек:

  • androidx.recyclerview:recyclerview:1.3.0-alpha01 для RecyclerView
  • androidx.core:core:1.7.0-alpha01 для NestedScrollView и EdgeEffectCompat
  • androidx.viewpager:viewpager:1.1-alpha01 для ViewPager

• Для пользовательских макетов, использующих EdgeEffect , рассмотрите следующие изменения UX:

  • При растягивании overscroll пользователи не должны взаимодействовать с содержимым макета, пока он растягивается. Пользователи должны манипулировать только самим растяжением и не иметь возможности, например, нажать кнопку в содержимом.

  • Когда пользователи касаются контента во время анимации EdgeEffect , они должны поймать анимацию и иметь возможность управлять растяжением. Текущее значение растяжения доступно из EdgeEffectCompat.getDistance() .

  • Чтобы управлять значением pull и возвращать потребленное количество, используйте onPullDistance() . Это позволяет разработчикам плавно переходить от растяжения к прокрутке, когда палец растягивает содержимое за пределы начальной позиции.

  • При работе с вложенной прокруткой, если содержимое растянуто, растяжение должно поглощать движение касания до вложенного содержимого, в противном случае вложенность может прокручиваться, когда палец меняет направление, вместо того чтобы отпустить растяжение.

Подробную информацию о прокрутке см. в разделе Анимация жеста прокрутки .

Использование ряби (сенсорной обратной связи) в вашей ОС

В Android 12 реализована более мягкая и едва заметная сенсорная рябь, которая обеспечивает пользователям обратную связь при нажатии.

Рисунок 3. Эффект ряби Android 12 с более мягкой анимацией заполнения

Для предсказуемости разработчиков и для обеспечения отличного пользовательского опыта убедитесь, что эффект ряби на ваших устройствах аналогичен примеру, показанному выше. Хотя вам не нужно выполнять какие-либо специальные шаги по интеграции для поддержки эффектов ряби, вам следует протестировать эффект на ваших устройствах, чтобы проверить любые непреднамеренные регрессии, внесенные в вашу реализацию.

Виджеты

Виджеты являются ключевыми компонентами устройства Android. Android 12 включает новые API и возможности API, которые должны поддерживать все OEM-производители.

• В вашей ОС поддерживайте API-интерфейсы разработчика, связанные с макетами виджетов, размером и параметрами программного обеспечения (например, размер скругленных углов). Ваша реализация должна правильно поддерживать виджеты, предоставляя параметры через API и обеспечивая возможность изменения размера и настройки виджетов пользователем.

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

  • Приоритет определяется на основе рекомендаций платформы.
  • Подробную информацию о рекомендации можно найти по ссылке в колонке «Изменение».

  Область	Изменять	Приоритет реализации
  Улучшить домашний опыт	Добавить масштабируемые предварительные просмотры	П1
  	Добавить описание виджета	П1
  	Упростите персонализацию виджетов	P2 (опционально)
  	Включить более плавные переходы	П0
  	Избегайте транслируемых батутов	П0
  Принять рекомендации по виджетам	Улучшить размеры и макеты виджетов	П2
  	Применить динамические цвета	П0
  	Реализовать закругленные углы	П0
  	Добавить новые составные кнопки	П2
  Упростить существующий код виджета	Упростите коллекции RemoteView	П2
  	Упростите среду выполнения RemoteView	П2

Дополнительные ресурсы

Использование цвета SysUI

(акцент1 = A1, акцент2 = A2, акцент3 = A3, нейтральный1 = N1, нейтральный2 = N2)

Рисунок 4. Динамическое использование цвета в пользовательском интерфейсе системы

Обновления атрибутов цвета библиотеки материалов

В следующем выпуске Material обновит атрибуты темы, создав цветовые роли, используемые для предоставления цвета определенным представлениям.

Материал будет обновлять свои атрибуты состояний с помощью следующих указателей:

Часто задаваемые вопросы

Извлечение цвета

Когда пользователь меняет обои, происходит ли автоматическое извлечение цвета или его нужно инициировать откуда-то?

В патчах Android 12 извлечение цвета обоев включено по умолчанию .

ThemeOverlayController.java запускает логику с помощью ThemeOverlayController#mOnColorsChangedListener и WallpaperManager#onWallpaperColorsChanged .

Для живых обоев или видеообоев , можем ли мы узнать, когда Color Extraction берет цвет с экрана? Некоторые пользователи могут захотеть цвета из последнего кадра, так как он отображается в большинстве случаев.

Извлечение цвета запускается, когда пользователь устанавливает обои или после выключения питания экрана (в ответ на WallpaperEngine#notifyColorsChanged ). Последнее событие WallpaperColors (из живых обоев) применяется после того, как пользователь выключает экран и включает его снова.

Выбор темы/обоев

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

Да. В вашем средстве выбора темы вы можете использовать ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) .

Есть функция на названиях Pixel как тематический значок . Включена ли она в три патча, которыми вы поделились? Как OEM-производители могут реализовать это?

Нет. Тематические значки находятся на стадии бета-тестирования и недоступны в Android 12.

Есть ли способ использовать приложение Google Wallpaper с включенными функциями извлечения и выбора цвета?

Да. Функции могут быть реализованы в последней версии приложения Google Wallpaper, следуя шагам интеграции, описанным ранее на этой странице.

Для получения более подробной информации обратитесь к своему техническому менеджеру.

Может ли Google поделиться приложением или исходным кодом, чтобы OEM-производители могли реализовать собственную версию динамического предварительного просмотра цветов в меню настроек, которое выглядит так же, как раздел предварительного просмотра, показанный в приложении Google для выбора обоев?

Основными классами, которые визуализируют предварительный просмотр, являются WallpaperPicker2 и Launcher3 .

Экран предварительного просмотра обоев — WallpaperSectionController .

Как реализовать предварительный просмотр после изменения цвета, как показано в приложении Google Wallpaper?

Приложение выбора обоев ожидает, что ContentProvider будет доступен из Launcher (в Launcher3 -based launcher он есть). Предварительный просмотр предоставляется GridCustomizationsProvider в Launcher, на который должна быть ссылка в основных метаданных Activity Launcher, чтобы приложение обоев и стилей могло его прочитать. Все это реализовано в Launcher3 от AOSP и доступно OEM-производителям.