Полное руководство по созданию многоцветных тематических и адаптивных иконок для Android-приложений

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

Эволюция иконки приложения в разных версиях Android

Что такое адаптивные иконки в Android?

Адаптивные иконки появились еще в Android O (Oreo), предоставив:

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

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

Фон (одноцветный) и передний план (векторный значок), которые накладываются друг на друга для создания адаптивного значка

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

Фоновый и передний слои (оба содержат вектор), которые накладываются друг на друга для создания адаптивного значка

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

Фоновый и передний слои, которые накладываются друг на друга для создания адаптивного значка, где передний слой действует как маска для фонового слоя

Как Play Store создает иконку, используя слой переднего плана в качестве маски

Как создавать адаптивные иконки для Android-приложений

Адаптивная иконка создается путем наложения фонового и переднего слоев. Оба должны быть размером 108 dp x 108 dp с максимальной маской до 72 dp:

Руководство по дизайну адаптивных иконок (размер и безопасная область)

Чтобы маска не обрезала части вашего значка, рекомендуется поместить значок в область размером 66 dp. Так значок останется полностью видимым и при этом будет соответствовать ограничениям маски.

Различные маски, используемые разными OEM-производителями, и полученные в результате маскировки значки приложений

Как добавить адаптивную иконку в Android-приложение

Адаптивная иконка — это AdaptiveIconDrawable, созданный с помощью xml-тега <adaptive-icon>. Фоновый и передний слои задаются в этом элементе и сохраняются в res/mipmap-anydpi-v26/ic_launcher.xml:

<?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" />
</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" />

</adaptive-icon>

Векторы фонового и переднего плана:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="108dp"
        android:height="108dp"
        android:viewportWidth="48.0"
        android:viewportHeight="48.0">
  <!-- Your background vector -->
</vector>

xxxxxxxxxx

<vector xmlns:android="http://schemas.android.com/apk/res/android"

        android:width="108dp"

        android:height="108dp"

        android:viewportWidth="48.0"

        android:viewportHeight="48.0">

  <!-- Your background vector -->

</vector>

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

<resources>
    <color name="ic_launcher_background">#FFDCC0</color>
</resources>

xxxxxxxxxx

<resources>

    <color name="ic_launcher_background">#FFDCC0</color>

</resources>

Замените свойства android:icon и android:roundIcon на соответствующие адаптивные иконки.

Также вы можете заменить существующие иконки с помощью Android Image Asset Studio. Убедитесь, что выбрали «Launcher Icons (Adaptive and Legacy)» в качестве типа иконки и настройте фоновый слой на сплошной цвет.

Студия автоматически сгенерирует адаптивную иконку и обновит ее в манифесте.

Студия Image Asset для создания адаптивных иконок

Руководство по созданию адаптивных иконок от Google вы можете найти тут.

Предварительный просмотр адаптивной иконки приложения

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

Как создать тематические иконки с несколькими тонами

Разработка адаптивной иконки проста, если иконка вашего приложения имеет простую форму с однородным цветом.

А если у нас есть многотоновые иконки, как в примерах ниже, как мы можем создать тематические иконки?

Слева — приложение Material Todo, справа — приложение Pinit

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

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

Давайте рассмотрим шаги для создания иконки галочки (иконки приложения Material Todo).

1.Использование формата png

Настройте прозрачность нескольких частей относительно друг друга, объедините и экспортируйте как один файл png:

Установка разной прозрачности для каждого элемента — настоящее искусство

2.Использование векторных форматов

Для векторных форматов, таких как SVG, свойства fill и android:fillAlpha можно редактировать непосредственно в XML.

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

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="512"
    android:viewportHeight="512">
  <group android:scaleX="0.46"
      android:scaleY="0.46"
      android:translateX="138.24"
      android:translateY="138.24">
    <path
        android:pathData="M424.77,132.28L424.77,132.28A40,40 64.83,0 1,424.77 188.85L233.85,379.77A40,40 0,0 1,177.28 379.77L177.28,379.77A40,40 0,0 1,177.28 323.2L368.2,132.28A40,40 64.83,0 1,424.77 132.28z"
        android:fillColor="#C9513D" 
        android:fillAlpha=".9" <-------- transparency tweak for left rectangle
    />
    <path
        android:pathData="M92.28,237.95L92.28,237.95A40,40 0,0 1,148.85 237.95L233.71,322.8A40,40 0,0 1,233.71 379.37L233.71,379.37A40,40 0,0 1,177.14 379.37L92.28,294.52A40,40 0,0 1,92.28 237.95z"
        android:fillColor="#C9513D" 
        android:fillAlpha=".7". <-------- transparency tweak right rectangle
     />
  </group>
</vector>

xxxxxxxxxx

<vector xmlns:android="http://schemas.android.com/apk/res/android"

    android:width="108dp"

    android:height="108dp"

    android:viewportWidth="512"

    android:viewportHeight="512">

  <group android:scaleX="0.46"

      android:scaleY="0.46"

      android:translateX="138.24"

      android:translateY="138.24">

    <path

        android:pathData="M424.77,132.28L424.77,132.28A40,40 64.83,0 1,424.77 188.85L233.85,379.77A40,40 0,0 1,177.28 379.77L177.28,379.77A40,40 0,0 1,177.28 323.2L368.2,132.28A40,40 64.83,0 1,424.77 132.28z"

        android:fillColor="#C9513D" 

        android:fillAlpha=".9" <-------- transparency tweak for left rectangle

    />

    <path

        android:pathData="M92.28,237.95L92.28,237.95A40,40 0,0 1,148.85 237.95L233.71,322.8A40,40 0,0 1,233.71 379.37L233.71,379.37A40,40 0,0 1,177.14 379.37L92.28,294.52A40,40 0,0 1,92.28 237.95z"

        android:fillColor="#C9513D" 

        android:fillAlpha=".7". <-------- transparency tweak right rectangle

     />

  </group>

</vector>

Результат

Превью адаптивной многотоновой иконки приложения в разных цветовых схемах

Для векторных рисунков, помимо fillAlpha, можно добавить градиентные цвета, посмотрите это.

Распространенные ошибки

1. Забыли добавить монохромный слой в ресурс закругленных иконок

Тематические иконки не будут работать должным образом, если в файл ic_launcher_round.xml не включен монохромный слой.

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

    // add monochrome layer for rounded:icon
    // ic_launcher_rounded.xml
    <monochrome android:drawable="@mipmap/ic_launcher_foreground"/>

</adaptive-icon>

xxxxxxxxxx

<?xml version="1.0" encoding="utf-8"?>

<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">

    <background android:drawable="@color/ic_launcher_background"/>

    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>

​

    // add monochrome layer for rounded:icon

    // ic_launcher_rounded.xml

    <monochrome android:drawable="@mipmap/ic_launcher_foreground"/>

​

</adaptive-icon>

2. Прозрачность слоя переднего плана

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

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

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

Просмотр тематических иконок

Android Studio предоставляет возможность просмотра адаптивного дизайна иконок.

Там есть возможность:

• получения цветовой схемы из обоев
• ночная и не ночная цветовая схема
• тесты различных масок

Просмотрщик иконок в Android Studio

Вы также можете использовать реальное или виртуальное устройство для предварительного просмотра тематических значков, включив бета-функцию «Тематический значок» в настройках обоев и стиля. Это позволит вам увидеть, как ваши значки будут выглядеть с текущими обоями и темой.

Включите функцию тематических значков на виртуальном/реальном устройстве

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

Приложения с реализацией тематических иконок и без них

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

Источник