Адаптивные значки

Заголовок адаптивных значков

Адаптивный значок, или AdaptiveIconDrawable, может выглядеть по-разному в зависимости от возможностей устройства и темы, выбранной пользователем. Адаптивные значки в основном используются на главном экране, но их также можно применять в ярлыках, приложении "Настройки", диалоговых окнах и на экране обзора. Адаптивные значки используются на всех типах устройств Android.

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

  • Разные формы. Адаптивный значок может иметь разную форму на разных моделях устройств. Например, на одном устройстве OEM значок может быть круглым, а на другом устройстве – квадратным с закругленными углами. Каждый производитель оригинального оборудования должен предоставить маску, которую система будет использовать для отрисовки всех адаптивных значков одной формы.

    GIF-изображение с повторяющейся анимацией одного и того же образца значка Android, показывающее разные формы в зависимости от используемой маски – круг, а затем два разных вида суперэллипсов.
    Рисунок 1. Адаптивные значки поддерживают различные маски, которые могут отличаться в зависимости от устройства.

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

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

  • Пользовательские темы. Начиная с Android 13 (уровень API 33) пользователи могут менять темы адаптивных значков. Если пользователь включил тематические значки приложений в настройках системы и программа запуска поддерживает эту функцию, система использует цвета выбранных обоев и темы, чтобы определить оттенок значков приложений, у которых есть слой monochrome в адаптивном значке. Начиная с Android 16 QPR 2, Android автоматически применяет тему к значкам приложений, у которых нет собственных.

    Пример трех устройств Android, на каждом из которых показана разная пользовательская тема с разными оттенками: на первом показаны обои с темным оттенком; на втором показаны обои с золотистым оттенком; на третьем показаны обои со светло-серым оттенком с голубоватыми оттенками. В каждом примере значки унаследовали оттенок обоев и идеально сочетаются с ними.
    Рисунок 3. Адаптивные значки, которые наследуют цвета обоев и тем пользователя.

    В следующих случаях на главном экране показывается адаптивный или стандартный значок приложения, а не тематический:

    • Если пользователь не включил тематические значки приложений.
    • Если в приложении нет монохромного значка приложения, а на устройстве пользователя установлена более ранняя версия Android, чем Android 16 QPR 2.
    • Если лаунчер не поддерживает тематические значки приложений.

Как создавать адаптивные значки

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

  • Для цветной версии значка необходимо предоставить два слоя: один для переднего плана, а другой – для фона. Слои могут быть векторными или растровыми, хотя предпочтительны векторные.

    Пример слоя переднего плана (слева) и фонового слоя (справа). На переднем плане показан 16-сторонний значок логотипа Android, расположенный по центру безопасной зоны размером 66 x 66. Безопасная зона находится в центре контейнера размером 108 x 108. На фоне показаны те же размеры для безопасной зоны и контейнера, но только синий фон и без логотипа.
    Рисунок 4. Адаптивные значки, определенные с помощью слоев переднего и заднего плана. Безопасная зона размером 66 x 66 – это область, которая никогда не обрезается маской, заданной производителем.
    Пример, показывающий значок из предыдущего рисунка, наложенный на круглую маску.
    Рисунок 5. Пример того, как выглядят передний и задний планы с круглой маской.

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

    Пример монохромного слоя значка (слева) и предварительный просмотр цветов (справа). На монохромном слое показан 16-сторонний значок логотипа Android, расположенный по центру безопасной зоны размером 66 x 66. Безопасная зона находится в центре контейнера размером 108 x 108. На предварительном просмотре показано, как этот слой выглядит в разных темах (оранжевой, розовой, желтой и зеленой).
    Рисунок 6. Слева показан слой монохромного значка, а справа – примеры цветов.

  • Размер всех слоев должен быть 108 x 108 dp.

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

  • Используйте логотип размером не менее 48 x 48 dp. Размер значка не должен превышать 66 x 66 dp, поскольку именно эта область отображается в маске.

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

Чтобы узнать, как создавать адаптивные значки с помощью Android Studio, ознакомьтесь с шаблоном Figma для значков приложений Android или документацией Android Studio по созданию значков приложений. Также рекомендуем прочитать запись в блоге Designing Adaptive Icons (на английском языке).

Как добавить адаптивный значок в приложение

Адаптивные значки, как и обычные, указываются с помощью атрибута android:icon в манифесте приложения.

Необязательный атрибут android:roundIcon используется в лаунчерах, которые представляют приложения с круглыми значками. Он может быть полезен, если значок вашего приложения включает круглый фон в качестве основной части дизайна. Такие лаунчеры должны генерировать значки приложений, применяя круглую маску к android:roundIcon. Это позволяет оптимизировать внешний вид значка приложения, например немного увеличив логотип и убедившись, что при обрезке круглый фон полностью заполнен.

В следующем фрагменте кода показаны оба атрибута, но в большинстве приложений указывается только android:icon:

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

Сохраните адаптивный значок в папке res/mipmap-anydpi-v26/ic_launcher.xml. Используйте элемент <adaptive-icon>, чтобы определить ресурсы переднего плана, фона и монохромного слоя для значков. Внутренние элементы <foreground>, <background> и <monochrome> поддерживают как векторные, так и растровые изображения.

В примере ниже показано, как определить элементы <foreground>, <background> и <monochrome> внутри <adaptive-icon>:

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

Слои переднего плана и монохромный слой используют один и тот же объект Drawable. Однако при необходимости вы можете создать отдельные объекты Drawable для каждого слоя.

Вы также можете определить графические объекты как элементы, встроив их в элементы <foreground>, <background> и <monochrome>. В следующем фрагменте кода показано, как это сделать с помощью графического объекта переднего плана.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

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

  • Для статических ярлыков используйте элемент <adaptive-icon>.
  • Для динамических ярлыков вызовите метод createWithAdaptiveBitmap() при их создании.

Подробнее о том, как реализовать адаптивные значки… Подробнее о ярлыках приложений…

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

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

Назад
Как реализовать рекомендации по работе с сочетаниями клавиш
Далее
Круги