Адаптивные иконки

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

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

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

  

  Рис. 1. Адаптивные значки поддерживают различные маски, которые различаются на разных устройствах.

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

  

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

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

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

  

  Рисунок 3. Адаптивные значки, наследуемые от обоев и тем пользователя.

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

  • Если пользователь не включает тематические значки приложений.
  • Если в вашем приложении нет монохромного значка.
  • Если программа запуска не поддерживает тематические значки приложений.

Дизайн адаптивных иконок

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

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

  

  Рисунок 4. Адаптивные значки, определенные с использованием слоев переднего плана и фона. Изображенная безопасная зона размером 66x66 — это область, которая никогда не ограничивается фигурной маской, определенной OEM-производителем.

  

  Рисунок 5. Пример того, как слои переднего плана и фона выглядят вместе с примененной круглой маской.

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

  

  Рисунок 6. Монохромный слой значков (слева) с примерами предварительного просмотра цветов (справа).

• Размер всех слоев — 108x108 dp.

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

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

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

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

Чтобы узнать, как создавать адаптивные значки с помощью Android Studio, см. наш шаблон Figma значков приложений для Android или документацию Android Studio по созданию значков запуска . Также ознакомьтесь с публикацией в блоге «Проектирование адаптивных иконок» .

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

Адаптивные значки, как и неадаптивные, указываются с помощью атрибута 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" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

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

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

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

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

• Шаблон страницы сообщества Figma
• Понимание адаптивных значков Android
• Проектирование адаптивных иконок
• Реализация адаптивных значков
• Создание значков приложений в Android Studio
• Характеристики дизайна значков Google Play