Дизайн Material You

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

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

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

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

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

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

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

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

Рисунок 1. Динамическая цветовая тема Material You

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

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

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

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

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

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

Исправления для Android 12

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

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

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

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

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

Как задать пользовательские цвета в инструменте выбора темы

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

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

Формат 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 и сторонние приложения, поддерживающие динамические цвета, выглядели отлично. Для этого выполните следующие действия:

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

Шаг 3. Расширьте исходный цвет до API цветов

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

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

• system_accent1

  • Chroma: используйте 40 для вариантов цвета, заканчивающихся на 0, 10, 50 и 100, в остальных случаях – 48.
  • Оттенок: как у источника

• system_accent2

  • Chroma: используйте значение "16".
  • Оттенок: как в источнике

• system_accent3

  • Chroma: 32.
  • Оттенок: поворот на 60 градусов в положительном направлении

• system_neutral1

  • Chroma: используйте значение "4".
  • Оттенок: как у источника

• system_neutral2

  • Chroma: используйте "8".
  • Оттенок: как в источнике

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

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

После того как динамические цвета заданы на устройстве, приложения используют их в соответствии с рекомендациями Material Design. Руководство по Material Design будет опубликовано на сайте 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 для Android, чтобы показывать динамические цвета, мы используем заданный в коде белый список, чтобы определить, на каких устройствах интегрирована функция динамических цветовых палитр.

Анимация

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

Как использовать эффект достижения конца прокрутки в ОС

В Android 12 добавлена более отзывчивая и динамичная анимация прокрутки за край списка в виде растягивания элемента. Пример:

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

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

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

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

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

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

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

  • 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, он должен иметь возможность остановить ее и растянуть изображение. Текущее значение pull-параметра доступно в EdgeEffectCompat.getDistance().

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

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

Подробнее об анимации прокрутки…

Как использовать эффект волны (визуальную обратную связь) в ОС

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

Рисунок 3. Волновой эффект Android 12 с более мягкой анимацией заливки

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

Виджеты

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

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

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

  • Приоритет определяется на основе рекомендаций платформы.
  • Чтобы посмотреть подробную информацию о рекомендации, перейдите по ссылке в столбце "Изменение".

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

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

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

(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)

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

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

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

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

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

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

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

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

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

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

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

Выбор темы или обоев

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

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

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

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

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

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

Чтобы узнать больше, свяжитесь с техническим менеджером аккаунта.

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

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

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

Как реализовать функцию Предпросмотр после изменения цвета, как в приложении "Обои от Google"?

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