Adaptive and themed icons were introduced to ensure consistency across app icons displayed by the launcher on the home screen. In this article, we’ll explore the process of designing multi-tone and gradient-themed icons. Learn how to create adaptive and themed icons for Android apps. This guide covers design tips, implementation steps, and best practices for modern Android icon design.

App icon evolution across different android versions

What Are Adaptive Icons💈 in Android?

Android introduced adaptive icons back in android O(Oreo :)) provides

• Ensure a consistent look across devices, regardless of the shape or mask used by different OEMs or third-party launchers
• with separate layer for background and foreground layer that enable visual effects between layers while performing motions ( scrolling through home feed and app opening)

Typically, the background layer is designed with a solid, opaque color, while the actual app icon is placed in the foreground layer with transparency

Background (plain colour) and foreground layer (vector icon)which is stacked to create adaptive icon

By moving certain elements to the background layer, we can create distinct motion effects between the foreground and background layers, enhancing the overall dynamic experience during interactions.

Background and foreground layer (both contains vector) which is stacked to create adaptive icon

Alternatively, we can design the icon by placing the mask in the foreground layer and using transparency for the background layer. This approach achieves a similar visual appearance to the previous method but creates a different motion effect during interactions.

Background and foreground layer which is stacked to create adaptive icon where foreground layer act as mask to background layer

How play store create icon by using foreground layer as mask

How to Create Adaptive Icons for Android Apps 🧮

adaptive icon generated by stacking background and foreground layer. both should be of size 108 dp x 108 dp with maximum masking of upto 72 dp

Adaptive icons design guideline (size and safe area)

To ensure that the mask doesn’t crop any parts of your icon, it’s recommended to place the icon within a 66 dp area. This ensures the icon remains fully visible while still adhering to the mask’s constraints.

Different masks used by Different OEM and resulting masked app icons

How to Add Adaptive Icon to your android app 🎊

adaptive icon is AdaptiveIconDrawable created using <adaptive-icon> xml tag.The background and foreground layers are specified within this element and saved in the res/mipmap-anydpi-v26/ic_launcher.xml

Launcher icon resource

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

Background and Foreground vector

<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>

If your background doesn’t include any vector elements of the icon or logo, it’s best to use a solid, opaque color for the background layer.

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

Replace android: icon and rounded icon properties with corresponding adaptive icons

Alternatively, you can replace your existing icons using the Android Image Asset Studio. make sure to select “Launcher Icons (Adaptive and Legacy)” as the icon type and adjust the background layer to a solid colour.

Studio will automatically generate adaptive icon and update it in the manifest.

Image Asset studio for creating adaptive icons

Adaptive App Icon Pre-view 👀

Try AdaptiveIconPlayground, which offers a preview and allows you to test different masks and visual effects that can be applied to adaptive icons. It lets you evaluate your icon design alongside other app icons on the home screen, helping you fine-tune its appearance and behaviour.

What Are Adaptive Icons 🎨 in Android ?

Introduced in android 13 where app icon colour unified to colour scheme that fetched dynamically from current user wallpaper or we can set custom set of colours.it provide more personalised and streamlined home screen, avoiding a cluttered look filled with a variety of colours.

a small tweak to existing adaptive icon will be enough to produce themed icon. add a additional monochrome layer

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

you could either go for separate monochrome drawable or go for same foreground layer if your icon is simple enough

How to Create Multi tone themed icons? 🪄

Designing an adaptive icon is straightforward when your app icon features a simple, single shape with a uniform colour.

what if we have multi tone icons like the examples below how can we design themed multi tone icons?

Left One — Material Todo app | Right one — Pinit app

these multi tones can be achieved by transparency of foreground layer often can be tweaked either making that portion of actual image more transparent and creating different tones of the foreground primary material colour (theme colour)

or we can directly edit path files add opacity properties to certain parts of the icon that require a distinct tone

lets look into steps for crafting tick icon( material todo app icon )

1.Using png file format

ask help of your designer friend 🙂

Tweak transparency of multiple portions relatively each other and combine and export as single png file

setting different transparency to each portion — craft combination

2.Using vector formats

For vector formats like SVG, both the fill and android:fillAlpha properties can be directly edited within the XML.

By adjusting the transparency of specific paths, you can create a blended effect or achieve multi-tone variations, allowing for more dynamic and visually appealing icons

<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>

Result 🎉

Adaptive multi-tone app icon preview in different colour scheme

For vector drawables, Apart from fillAlpha you can add gradient colours check out this

Common Pitfalls 💀

1. Forgot to add monochrome layer to rounded icon resource

Themed icons won’t function properly unless a monochrome layer is included in the ic_launcher_round.xml file

<?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. Transparency of foreground layer

Many people encounter issues when using formats like JPEG or other file types that don’t support transparency, resulting in the icon displaying only a solid theme color instead of the actual icon.

To avoid this, ensure that the foreground layer is always transparent by using PNG formats or vector formats like SVG.

For vector resources, you can directly edit the vector paths and remove the android:fillColor property to achieve the desired transparency.

Themed icon viewer 😦

Android studio provides a option to view adaptive icons design

Provide options to

• switch colour scheme from wallpaper
• night colour scheme and not night colour scheme
• Test out different masks

Side by side Adaptive icon viewer in android studio

You can also use a real or virtual device to preview themed icons by enabling the “Themed Icon” beta feature within the Wallpaper and Style settings. This allows you to see how your icons will appear with the current wallpaper and theme.

Turn on themed icons feature in virtual/real device

Android introduced themed icon way before IOS yet it has not been fully enforced. As an opt-in feature, many popular apps still choose not to adopt themed icons, leaving them out of the unified aesthetic that the feature offers.

hope everyone will migrate soon 😄

Apps with and without themed icon implementation

For more on guidelines refer official docs from google about designing themed and adaptive icons

Connect through socials

This article was previously published on proandroiddev.com.