New adaptative launcher icon for Android O

[maxme]

See https://developer.android.com/preview/features/adaptive-icons.html

[oguzkocer]

@mattmiklic & @bysl When one of you have time, could you prepare the new icons? The relevant section from that documentation seems to be the one below, but it's a short doc, so it might be a good idea to check the whole thing out. Thanks!

In previous versions of Android, launcher icons were sized at 48 x 48 dp. You must now size your icon layers using the following guidelines.

Both layers must be sized at 108 x 108 dp.
The inner 72 x 72 dp of the icon appears within the masked viewport.
The system reserves the outer 36 dp on each of the 4 sides to create interesting visual effects, such as parallax or pulsing

[maxme]

cc @jasmussen because he has some opinions about launcher icons in Android ;)

[jasmussen]

Thanks so much Maxime! I do love icons, and I'd also love to help here if you need anything. I've got all the templates running regardless.

And short answer, aside from icons having to look good, I'm a big fan of following platform rules, so we should absolutely embrace the cool new stuff in O!

In this case it's going to be an interesting challenge that will require some noodling. The guidelines would suggest we scale down the white WordPress logomark on a blue badge, so it can "float on it" and the blue background would then be masked and badged by the system. Only — our icon is round, and the blue badge is part of our icon. In a way the blue badge PLUS the white logomark should not really be changed. In other words — we might want to do something like the following. If round icons are requested:

If squircle icons are requested:

I'm not a fan of putting the logo on a pedestal, though. We may want to do what we do on iOS and just embrace the blue:

But what we should NOT do, is the following:

I guess what I'm saying is — it's not as easy as just upgrading our icon. It will need a little noodling. I don't know for sure that i have time to do so, and I know it's in the best possible hands with @mattmiklic, but I'd like to at the very least offer all the advice I can, so feel free to ping me any time.

Sidenote: Google will encounter the same issue with their Chrome icon, which is already round. I'd love to see what Google is going to do for launchers that request squircles, like the Samsung launcher. Will they pedestal it? And if yes, will they pedestal it even when requested on a round icon? Time will tell.

[mattmiklic]

Thanks for weighing in here @jasmussen. Agree with all the points you made. I noticed this in the documentation:

You can also define an icon drawable resource using the android:roundIcon attribute. You must only use this attribute if you require a different icon asset for circular masks, if for example the branding of your logo relies on a circular shape.

So it sounds like we can provide a separate circular icon for the launchers that use them, and provide the two-layer version for those that request other shapes. In that case, I'd probably go with your "embrace the blue" example above. That way I think the icon appears most consistently between platforms; always a white W on a blue background, regardless of shape.

I can take a look at this on an upcoming design groundskeeping day.

[maxme]

Just a note: this is super low priority, we have 6 months until the launch of Android O ;)

[oguzkocer]

I am just going to un-assign this for now then. I am glad the design discussion has started though, it'll move quicker when we get to it!

[jasmussen]

So it sounds like we can provide a separate circular icon for the launchers that use them, and provide the two-layer version for those that request other shapes. In that case, I'd probably go with your "embrace the blue" example above. That way I think the icon appears most consistently between platforms; always a white W on a blue background, regardless of shape.

Yep that sounds like a good approach, though I do think that the badging/masking in Android O is essentially admitting defeat on the past efforts. And so I'm not convinced that the roundIcon will stay around indefinitely. This is why it'll be so interesting to see what Google does with the Chrome logo. But sounds like you have totally the right instincts in any case, and let me know if I can help.

[sonderingheights]

I agree 'embrace the blue' would adapt the best and be most on brand.

[theck13]

Chrome

Chrome's icon has been updated for Oreo! They are using default and round versions which are both the new adaptive icon style.

Default

The default version uses the legacy icon as the foreground and the color white as the background. That results in these variants.

Round

The round version's foreground is transparent and the background basically extents the legacy icon's design into a square which ends up looking exactly like the legacy icon.

Foreground	Background	Result

Others

I reviewed three other Google apps with intrinsically circular icons to see how they handle this. Two of them (i.e. Authenticator and Earth) don't have adaptive or round icons defined which means they either haven't been updated for Oreo or they don't care. The third (i.e. YouTube Music) doesn't have an adaptive icon, but it does have a round icon with the white background like Chrome's adaptive icon which means they probably just haven't updated it to be adaptive. See the table below for a visual breakdown of these three.

App	Default	Round	Adaptive
Authenticator		N/A	N/A
Earth		N/A	N/A
YouTube Music			N/A

WordPress

Personally, I think an icon with a white background and a circular logo on a pedestal like Chrome and YouTube Music looks weird as well. I think the "embrace the blue" is the way to go too. We can use the white W with the blue background as the default version and our legacy icon for the round version. That would result in these variants.

Default (Adaptive)

Round (Legacy)

Pro Tip

Click the icons to see them a little larger.

[jasmussen]

Thanks for the research, @theck13.

Is it technically possible to do the following using adaptive assets (white logo foreground, blue background):

That is — have the foreground sized up so it looks exactly like the legacy roundicon?

And if yes, how would that look with squircles, rounded squares and squares?

I think we should avoid the following, if at all possible:

[theck13]

Going to the very edge of the "safe" area (which is very hard to see, but it's the light gray circle on the outer edge of the white logo) results in these variants.

I think that makes the circle version close to your preferable example. What do you think of the other variations?

[jasmussen]

Thanks a bunch for testing that out, really appreciate it. Yeah, it makes the circle version work well for us, but all the other ones are kinda terrible alas.

Tricky.

Edit: just because I have to ask — I'm almost certain the answer is no — we can't provide one distinct roundicon for when that is requested, and different assets for squircle, square, etc?

[theck13]

YouTube Music updated their icon today. Here's the rundown.

App	Default	Round	Adaptive
YouTube Music

It's not my favorite. Why they didn't go with this, I don't know.

Foreground	Background	Result

[jasmussen]

Thanks for the screenshots, @theck13 — can you clarify a little bit the top table for music, though?

Default/round/adaptive — does that mean every Oreo device with the pixel launcher (and presumably future launchers) will show only the adaptive icons?

I'm asking because if there's a way to have a dedicated round-icon, and then adaptive for the rest, that could be a great solution.

[jasmussen]

I noticed today that the Android Clock app has both an adaptive icon, and one that goes almost edge to edge without being ugly in non-circle versions. Behold:

Since they're Google, it's possible they do some technical wizardry to make this work — after all, the clock app is now animated which requires launcher support. But if there's any chance we can utilize some of the tricks they use, I think the above is an example that the really big WordPress shape on a blue background might just work fine for us. Please compare the clock icon in the various shapes, and imagine the WordPress logo on a blue similar shape — I think it could work. Thoughts?

By the way, I just noticed a fun benefit of the adaptive icons — when you shake them they wiggle ;)

[theck13]

Clock

It looks like the blue circle of the Clock icon has the same padding for all variants (i.e. 8 pixels), which is a little more than the white logo on the WordPress icon (i.e. 6 pixels). Are you suggesting just adding a little more padding to this?

One of the cool features of adaptive icons is that they can animate like you saw with the wiggle. That's why there is a designated safe area in the design to allow for those visual effects. This post by a Googler about designing adaptive icons has some really good information. I especially like the Background Anchoring and Leave Behinds. I'm not sure we can do much with the WordPress logo, but those are cool nonetheless. The post also has an Adaptive Icon Playground app, which shows all the adaptive icons on your device and allows you to change the icon mask as well as modify the strength of the visual effects.

Combination

My reply below has been sitting as a draft and I was waiting for a reply to my inquiry from an Android Framework Developer at Google before publishing, but I haven't received a response yet.

can you clarify a little bit the top table for music, though?

Default/round/adaptive — does that mean every Oreo device with the pixel launcher (and presumably future launchers) will show only the adaptive icons?

I copied that table from the Others section in my original comment. Sorry for the confusion. It would be better if it was like this.

App	Default	Round
YouTube Music

The Default version in this table uses the adaptive icon style. The Round version is the legacy icon style.

I'm asking because if there's a way to have a dedicated round-icon, and then adaptive for the rest, that could be a great solution.

Yes, we can use different designs for a round icon (i.e. android:roundIcon in code) and default/other icons (i.e. android:icon in code). That's what I meant in the WordPress section of my original comment, but it wasn't very clear. From the Android adaptive icon documentation, it says:

You can also define an icon drawable resource using the android:roundIcon attribute. You must only use the android:roundIcon attribute if you require a different icon asset for circular masks, if for example the branding of your logo relies on a circular shape.

Technically, both icons could be the adaptive style as well with the round version only using the circle adaptation. If we go to the very edge of the safe area with the round version and keep 25% padding with the default version, it would look something like this.

Conclusion

I would like to have the best of both worlds and get the results shown above, but I haven't been able to get the behavior in practice. If I don't get a reply to my inquiry and I can't figure out why it's not working, we may have to go with the extra padding like the Clock app if we want to use adaptive icons. If I do get a reply or something changes, I'll share it here.

[mattmiklic]

Technically, both icons could be the adaptive style as well with the round version only using the circle adaptation. If we go to the very edge of the safe area with the round version and keep 25% padding with the default version, it would look something like this.

That seems like the result we want, I think. Thanks for checking with Google about why that's not working.

@jasmussen if there's something preventing that approach from working in the current version of Android, do you think we should keep the existing icon until it works, or go with the less-than-perfect adaptive version? I don't have a good sense of how important the adaptive icons are to users yet. Obviously it's only an issue on Oreo devices, but it seems like those users might be the most discerning, too.

[jasmussen]

@jasmussen if there's something preventing that approach from working in the current version of Android, do you think we should keep the existing icon until it works, or go with the less-than-perfect adaptive version? I don't have a good sense of how important the adaptive icons are to users yet. Obviously it's only an issue on Oreo devices, but it seems like those users might be the most discerning, too.

An adaptive icon is absolutely going to make those looking for it happy. But I do agree we shouldn't rush it, as honestly it feels like Google has with some of their icons.

I have Android Studio set up, I think I should be able to fiddle around a bit and test in an emulator. I feel like we are pretty dang close to striking a balance, like the clock does, that would work for us. I may get time to fiddle with this some time this week, or the next.

[theck13]

I received a response from my inquiry. Evidently, the wording on the Android documentation is a little misleading. We can't have different adaptive icons for roundIcon and icon. It seems like our options are:

1. Keep the non-adaptive legacy icon.
2. Use a less-than-perfect adaptive icon.

[jasmussen]

I created a new adaptive icon PR (#6867) where I have a logoshape margin that matches that of the outer ring of the WordPress logo. That means the round version of the icon looks exactly like the roundIcon we have now.

The question again becomes whether the other versions of the icon look good. As I note in the PR, that outer padding is 3dp. Should we try a version with 4dp, which I think is what the clock icon uses?

CC: @mattmiklic @theck13