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

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

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

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

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

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

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

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

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

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

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

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

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

    Изображение, демонстрирующее пример монохромного слоя значков (левое изображение) и предварительный просмотр цвета (правое изображение). Монохромный слой показывает 16-сторонний значок примерного логотипа Android, расположенный в безопасной зоне размером 66x66. Безопасная зона расположена внутри контейнера 108x108. Предварительный просмотр цвета показывает отображение этого слоя при применении к пользовательским темам разного цвета (оранжевый, розовый, желтый и зеленый).
    Рисунок 6. Монохромный слой значков (слева) с примерами предварительного просмотра цветов (справа).
  • Размер всех слоев — 108x108 dp.

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

  • Используйте логотип размером не менее 48x48 пикселей. Его размер не должен превышать 66 x 66 dp, поскольку внутренняя часть значка размером 66 x 66 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() при их создании.

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

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

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