A Primer Into the New Google Adaptive Icons
The latest version of Android- Android O has introduced a new format for app icons called as adaptive icons. Adaptive icons can make the devices more rational by unifying the shape of the icons and opening doors to unique visual effects.
Over time, Android has consistently evolved its guidelines to promote usage of distinctive shapes. While apps can be creative with their unique shaped icon to stand out from the crowd, it even has the downside in terms of consistency. If each app is responsible for developing their own size, shape and drop shadow then there is no doubt that they will all vary widely.
App developers have to be more responsible with this current system, it gives them too much scope to detract from the overall experience.
This change is a shift rather than a reduction, even though it is bound by restrictions, it also opens up new creative possibilities.
Design Elements:
Shape and size
Technically, adaptive icons are 108dp*108dp in size but are masked to a maximum of 72dp*72dp. Different devices can supply a variety of masks which must be convex in shape and may reach a minimum of 33dp from the center in places. Because of the minimum reach of the mask, it is good to consider a centered 66dp diameter circle as a safe zone, guaranteed not to be clipped.
Keyline shapes
This is under a structure of the icon grid that helps to make your icons appear proportionate with other apps’ icons. The key line shapes are:
Circles: 52dp & 32dp diameter
Square: 44dp*44dp, 4dp corner radius
Rectangles: 52dp*36dp & 36dp*52dp, 4dp corner radius
Layers
Adaptive icons are made up of two layers- a foreground that can include transparency and a background that must be fully opaque. Both layers are 108dp*108dp and have to be placed one top of the other.
Adding elements in two different layers that are larger than the masked size creates an opportunity for gripping visual animations. What exact effects can be implemented are yet to be discovered.
Design Considerations
The material design guidelines like the icon anatomy, shadows and finish still persist for developing app icons. Experiments can be made by placing different elements in the foreground and background.
Since this system has just launched, it would be exciting to watch the community explore with these new constraints and find engaging and playful ways to make delightful icons.
Cuts and Trims
Initially, it may not be easy to decipher the exact mask shape that can be applied. To be on the safer side, it is better to place important elements like your brand mark inside the safe zone and keep away from the mask edges.
Playing in the background
Elements may look like they are placed in the foreground but are actually in the background which gives them more freedom to move. This gives you opportunities for motion where you can visually anchor certain elements in a subtle manner.
Mask on a mask
Placing masking elements is the foreground is where you can explore tremendously- that is solid elements with areas cut out.
Light & Shadow
The placing of light and shadows in separate layers plays an active role in giving an impressive outcome. You can always attempt various options of designing but keep in mind for them to be fruitful.
Peek-a-boo
You can hide elements in the background layer that would only be visible when in motion. This can be an untried way of designing your icon.
Conclusion
We hope this post has given you a better insight on designing adaptive icons for your application. Apart from your own creation, it would be a beautiful journey to watch how app developers design work back and forth to offer creative solutions.
