Материал, который вы разрабатываете

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

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

Динамический цвет

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

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

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

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

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

Рисунок 1. Динамический цветовой поток материала You.

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

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

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

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

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

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

Патчи для Android 12

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

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

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

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

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

Указание пользовательских цветов в 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 тоновых палитр (акцент1, акцент2, акцент3, нейтральный1, нейтральный2) и соответствующие им 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.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 ). Поскольку большинство сторонних приложений используют компоненты материалов для Android для отображения динамических цветов, мы используем жестко запрограммированный список разрешений , чтобы указать, какие устройства интегрировали функцию тоновых палитр динамических цветов .

Движение

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

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

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 , рассмотрите следующие изменения пользовательского интерфейса:

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

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

  • Чтобы манипулировать значением извлечения и возвращать потребленную сумму, используйте 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	Светлая тема Динамический цвет	Темная тема Динамический цвет
Начальный	цветОсновной	system_accent1_600	system_accent1_200
В начальной школе	цветВкл.Основной	system_accent1_0	system_accent1_800
вторичный	цветВторичный	system_accent2_600	system_accent2_200
На вторичном уровне	цветOnSecondary	system_accent2_0	system_accent2_800
Ошибка	цветОшибка	Н/Д (красный_600)	Н/Д (красный_200)
При ошибке	цветOnError	Н/Д (белый)	Н/Д (red_900)
Фон	Android:colorBackground	system_neutral1_10	system_neutral1_900
На заднем плане	цветна фоне	system_neutral1_900	system_neutral1_100
Поверхность	цветПоверхность	system_neutral1_10	system_neutral1_900
На поверхности	цветНаПоверхности	system_neutral1_900	system_neutral1_100

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

Цветовая роль	Атрибут темы Android	Светлая тема Динамический цвет	Темная тема Динамический цвет
Первичный государственный контент	цветPrimaryStateContent	system_accent1_700	system_accent1_200
Первичный государственный уровень	цветPrimaryStateLayer	system_accent1_600	system_accent1_300
Вторичный государственный контент	цветSecondaryStateContent	system_accent2_700	system_accent2_200
Вторичный государственный уровень	цветSecondaryStateLayer	system_accent2_600	system_accent2_300
О первичном государственном содержании	цветOnPrimaryStateContent	system_accent1_0	system_accent1_800
На уровне первичного состояния	цветOnPrimaryStateLayer	system_accent1_900	system_accent1_800
О вторичном государственном содержании	цветOnSecondaryStateContent	system_accent2_0	system_accent2_800
На вторичном государственном уровне	цветOnSecondaryStateLayer	system_accent2_900	system_accent2_800
О содержимом состояния первичного контейнера	цветOnPrimaryContainerStateContent	system_accent1_900	system_accent1_900
На уровне состояния основного контейнера	цветOnPrimaryContainerStateLayer	system_accent1_900	system_accent1_900
О содержимом состояния вторичного контейнера	цветOnSecondaryContainerStateContent	system_accent2_900	system_accent2_900
На уровне состояния вторичного контейнера	цветOnSecondaryContainerStateLayer	system_accent2_900	system_accent2_900
О содержимом состояния третичного контейнера	цветOnTertiaryContainerStateContent	system_accent3_900	system_accent3_900
На уровне состояния третичного контейнера	цветOnTertiaryContainerStateLayer	system_accent3_900	system_accent3_900
Содержимое состояния поверхности	цветOnSurfaceStateContent	system_neutral1_900	system_neutral1_100
На слое состояния поверхности	цветOnSurfaceStateLayer	system_neutral1_900	system_neutral1_100
Содержимое состояния варианта поверхности	цветOnSurfaceVariantStateContent	system_neutral2_700	system_neutral2_200
На слое состояния варианта поверхности	цветOnSurfaceVariantStateLayer	system_neutral2_700	system_neutral2_200
Содержимое состояния ошибки	цветErrorStateContent	красный800	красный200

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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