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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Патчи для Android 12

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

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

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

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

  • Исправлена ​​ошибка состояния гонки при установке системных свойств цвета при загрузке.
  • Разрешить уведомления о смене темы для наложений
  • Исправлена ​​ошибка состояния гонки при установке системных свойств цвета при загрузке (второй раунд)
  • Переместите 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 .

Формат STUB 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 генерирует 5 уникальных тональных палитр (акцент 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: use "16"
  • Оттенок: такой же, как у источника.

• system_accent3

  • Chroma: use "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 Components для Android для отображения динамических цветов, мы используем жестко заданный список разрешенных устройств, чтобы указать, на каких устройствах интегрирована функция динамических цветовых палитр .

Движение

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

Использование функции Overscroll в вашей операционной системе

В 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, которые должны поддерживать все производители оборудования.

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

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

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

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

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

Использование цветов в системном пользовательском интерфейсе

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

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

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

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

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

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

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

После смены пользователем обоев, происходит ли автоматическое извлечение цвета или его необходимо инициировать откуда-то ещё?

После установки обновлений для Android 12 функция извлечения цвета обоев включена по умолчанию .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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