Android O: Get Ready for Adaptive Icons

Zack Simon

3 min read

May 14, 2017

Android O: Get Ready for Adaptive Icons

With the introduction of the Android O preview, we’ve now got a good look at some of the changes Google is planning to bring to the soon-to-be-named OS update. From a visual design standpoint, one thing that stands out in particular is the introduction of adaptive launcher icons that allow for a more unified look on the homescreen. What does this mean for you? Well, OEMs (or original equipment manufacturers like Samsung and LG) can now control the mask shape of the launcher icon on each device resulting in a uniform shape for all app icons on the home screen. For instance, your icon might be a rounded rectangle on an LG device and may be circular on a Pixel. Of course, with this change comes a change in getting launcher icons ready for production. To help with this, I’ll be going through the process of creating an adaptive icon and highlighting considerations to make while creating your own.

Launcher Icon Layers

A rather adorable example of how launcher icon layers are masked.

Before we dig in, make sure that you’re designing your launcher icon at 108 dp by 108 dp for MDPI resolution. In order for Android to use both layers separately, you’ll need to export both the foreground and the background as two, separate 108 dp layers with transparency. Just like with all Android assets, both of these layers still need to be provided at all density buckets, so plan for this also.

Start by figuring out how you’re going to lay out your icon. The foreground layer should be reserved for a branded icon and will move on top of the background layer. Keep in mind that even though there’s 108 dp of glorious space to sprawl, your foreground layer art should only really be taking up 48 dp to 60 dp since everything outside of the middle 72×72 dp has the opportunity to be masked in a variety of different shapes. Android will now reserve 36 dp from all sides for animations, so expect that some of the masked background will become briefly visible during animations.

Diagram of adaptive icon layers

Even though there’s 108 dp of space to design for, your icon will inhabit the centermost 72 dp of it.

Use your brand colors or a simple pattern in the background layer, so that your foreground layer is pronounced. Even with edge masking, you should ensure that your background art extends the entire width and height of the 108 dp icon as it can become briefly visible during certain animations. Be sure that your background art extends throughout the entire 108 dp area so that it will mask and animate properly without any weird visual hiccups.

Once you’ve created a foreground and background layer, try testing out a few different masks to make sure that your design is flexible. In the animation below, Google has hinted at a few different masks that OEMs will have the ability to select from including circles, squircles, and rounded rectangles.

Example OEM Masks

Some various OEM masks to keep in mind when designing are squircles (square circles), rounded rectangles, and circles.

Finally, make sure that you’re exporting both of these layers (foreground and background) separately. Like I mentioned, you’ll need to export these at all density buckets so that the icon will appear at the correct resolution on any screen. Even though your foreground layer art isn’t using the full 108 dp space, it needs to be saved out at the same size as the background layer in order to layer properly. Currently, O Developer Preview 1 image is only available for Nexus 5S, Nexus 6P, Nexus Player, Pixel C, Pixel, and Pixel XL, but if you have these devices for testing, consider creating a build with your new launcher icon to see how it behaves on Android O on various devices.

To help in your adaptive icon endeavors, I’ve created a template in which both foreground and background layers are saved as symbols with some example masks to try out on your designs.

Adaptive Icon Sketch Template Preview Image

For more information on Adaptive Icons, check out Google’s Android O preview documentation. With more changes on the horizon, we’ll be watching Android O and Google I/O closely, so make sure to stay tuned to this blog. In the meantime, check out our post on refining custom typography in your Android app or our recent work on securing your Android apps.

Zack Simon

Author Big Nerd Ranch

Zack is an Experience Director on the Big Nerd Ranch design team and has worked on products for companies ranging from startups to Fortune 100s. Zack is passionate about customer experience strategy, helping designers grow in their career, and sharpening consulting and delivery practices.

Speak with a Nerd

Schedule a call today! Our team of Nerds are ready to help

Let's Talk

Related Posts

We are ready to discuss your needs.

Stay in Touch WITH Big Nerd Ranch News