With the release of Android O, there is a new icon format: adaptive icons. The shape of the icons in Android O is becoming more harmonious. The new format also allows for the addition of visual effects. This post provides a description of the new format and explores some of the iconographic techniques.
Size and shape Responsive icon size: 108dp * 108dp.
In the new format, you can create icons of different shapes for different devices. For example, the Facebook app icon can be square on the Google Pixel XL and round on the Samsung Galaxy. Different devices can provide different masks for icons, which must be convex and at least 33dp from the center to the periphery.
You can target the 66dp circle as a safe zone that is guaranteed not to be truncated.
Outlines are the basis of the icon grid, so the sequence of visual proportions is preserved, and icons do not stand out from the general row of their own kind.
Circles: 52dp & 32dp in diameter
Square: 44dp * 44dp, 4dp curvature radius
Rectangles: 52dp * 36dp & 36dp * 52dp, 4dp Radius
Note: take a look at the templates that are attached to the article.
Adaptive icons consist of two layers: front and back (both layers 108dp * 108dp); the background does not need to be completely transparent, and the first layer (what is visible in the foreground) may already include transparent details. These layers are superimposed on each other.
When design elements are placed on two separate layers, animation support is created. Which effects should be applied and where exactly – the question remains open; this is what the developers of launchers and devices do.
Here are some examples: parallax or ripple by moving or scaling each layer separately before applying the mask.
108dp * 108dp icons are masked up to 72dp * 72dp, the outer 18dp on each side can be considered as additional content that only appears in motion.
Google’s material design guides are very helpful in android app development company and software icons and have plenty of hints and tips. Especially when it comes to the anatomy of icons, shadows. You can put elements on either the front or back layer – the effects will be different.
It is safe to say that many icons will look appropriate with the brand logo in the foreground and the second layer in vibrant, saturated colors. This approach will make sure that the icons look organic on the device.
The design community has to adapt to new conditions and constraints, find new ways to create beautiful icons.
Here are some ideas for a new icon for Android O:
Due to the dynamics inherent in adaptive icons, it is impossible to know in advance which mask’s shape will be applied. Therefore, it is best to place all important elements within the safe area and stay away from the edges of the mask.
Putting some elements in the background that should be in the foreground will cause these elements to move separately. An example is a calculator app where all items are brought to the front, but the equal button is highlighted in the background.
This opens up interesting possibilities for moving elements: attention lingers on a block of bright color, but it moves less than the foreground elements, which creates a sense of depth.
It is worth considering how the icon will look in the Google Play Store, the design can be created in a simple and obvious manner: a colored triangle in the foreground over a white background.
You can also use a colored background and a white foreground with a triangular structure:
This approach will allow the colors to “break through the clouds” – and move independently of the mask, thus revealing background details.
Light and shade
The interaction of lighting effects and shadows placed on a separate layer can give the expected result. For example, using the long shadow technique for a foreground element can create interesting interactions. Lighting effects can be placed in the foreground rather than the background. For example, the finishing layer can be placed on the front layer and thus eliminate the light source. In this case, there will be a play on top of the background layer when moving.
Be careful not to create excessive effects, such as shadows that are detached from background elements or moved behind background elements. It is also worth considering how several icons will look side by side, in general, adhere to the recommendations for the material.
You can place elements in the background, and they will be completely covered by the front layer, and only appear when moving.
Resources and tools
Here is a sketch file that you can use as a template for creating responsive icons. There is an icon grid, outline shapes, and a safe zone. Everything is implemented schematically, so changing the main element will update the copies and provide the ability to preview using different masks.
You can also use an Adobe Illustrator template if that suits you better.
Here are some more additional resources:
- A tool for previewing responsive icons
- Affinity Designer Template
- Bjango templates including responsive icons
- Figma template (registration required)
In the development of adaptive icons, subtle design features arise from the interaction of background elements with foreground elements when a motion effect is applied. But this is associated with a certain degree of uncertainty since it is not known how the developers of launchers and devices will be able to implement all this. Therefore, a small test application has been developed with which you can evaluate the icon:
The application shows all applications installed on the device with adaptive icons, scrolling activates the parallax effect, and touching the icon provokes a scale effect. You can change the strength of the effect, as well as the mask applied to all icons.
So try the new icon format for Android O!