Android 8 has introduced a feature called Adaptive Icon in an effort to make the launcher icons of all apps appear consistent. This affects launcher icons for all current and future Android devices.
Recently, I’ve been publishing games to Google Play Store. Before this, it’s been years since the last time I uploaded an app to the Play Store.
When I published Langaw, I got a notice (and option) to use the new icon formats with a “Learn more” link.
Note: The notice was about Play Store icon guidelines, this article is about the adaptive app launcher icon guideline.
What’s this adaptive icon all about?
Adaptive icons, specifically launcher icons, are icons that look consistent with the other apps installed on an Android phone.
Instead of each app icon having its own shape, the launcher app controls how to display these icons including what shape to display them in. To do this, apps must have drawable icon layers (background and foreground) that are large enough so that launchers can add special effects and animation.
Animations and effects applied by launchers could include scaling, translating, or rotating either the background layer or the foreground layer (or both). It’s up to the launcher how to apply these effects so it will expect both layers to be present.
More importantly, the focus logo or artwork must be inside a safe area defined by the guidelines so that launchers can safely mask them with any shape and still look good.
For apps that have non-compliant (or legacy) icons, the launcher will most probably take the existing icon and scale it so it’s inside the safe area and then treat it as the foreground layer. For the background, it would choose a solid color and finally, mask the icon with whatever shape it is currently using with the other apps’ icons.
Example: Shadow Training’s icon
Two games have already been published by the time I decided that I should go along with the new icon specifications. Making sure to release the next game with adaptive-compliant launcher icon, I started to play around with the sizing of the main icon foreground and in the end, it kind of worked.
The following image shows the background and foreground layers for Shadow Training on the left. The right side shows the possible final forms of the launcher icon based on the most common masks used by launchers.
Even with the help of the adaptive icon set generation tools (see further below), I found it hard to properly size the shadow boxer logo.
Easy design guide to help with your own icons
To make it easier to make adaptive icons (with regards to sizing and positioning) in the future, I have decided to create a design guide that can be used as a template for creating adaptive icon layers.
The design guide is a
.psd file that has guides and keylines that can be used as a template for existing logos.
Note: The license only applies to the
.psd guide file. Usage of the icons you produce with it is at your own discretion.
Generating the adaptive icon set
There’s a guide on how to make the whole set (icon layers for all resolutions) manually in the Creating adaptive icons in XML section of the official adaptive icons guidelines.
But who does it manually these days?
If you use the
flutter_launcher_icons package with the latest version of Flutter, you might encounter an error when you run the icon generation tool.
To fix this, override the dependency (by adding the code below to
./pubspec.yaml) to the older version of the
image package which should still have the features that
dependency_overrides: image: 2.0.7
Whether you think the advantages of adaptive icons are enough for the extra effort, the feature is here and it’s here to stay. Besides, being consistent with all the other apps will make your app look professional and properly finished.