Maskable Icons

[00:00:00]
>> Maximiliano Firtman: And also we have something known as a maskable PNG. So, let's get into that. It's used in Android 8 by default. So Android 8+, that is 90% of the Android out there, preferred a maskable PNG. What's that? It's a logo designed with icon mask and safe zone in mind, such that any blah, blah, blah, blah, goes what?

[00:00:23]
Let me show you an example. Okay, and you will get it. So from Android 8, we have something known as adaptive icons. The launcher can define several shapes, so you can define a shape and some phones they have one shape, some forms they have other shapes. Sometimes, each manufacturer is changing the shape of your icons.

[00:00:47]
Okay, does it make sense? So that means that your icon will be cut with a mask. So the maskable icon will solve the problem of different shapes. Will still provide a square icon, but with enough discardable padding content out of a safe area, okay? So this is from the spec.

[00:01:08]
This is the official image from the spec. It's a centrally position circle with a radius of 40% of the icon width. Let me show you an example. This is the square of our icon, then we need to get and draw a circle in the middle with the radius of 40% of the whole width, okay?

[00:01:29]
That's the safe area. So, for example, if I have this icon, this is a calculator icon, okay? If I apply that rule and apply the mask there, we have a problem, I have parts of my calculator outside of the safe zone. So my icons may look like this on real phones, so it's wrong.

[00:01:51]
So what do we need to do with this? We can add more padding. So now we fit into the safe zone and our icons will look nice, okay? Makes sense? But for other devices that they're not like desktop, maybe you don't wanna provide this one because you say, too much padding, because the icon will look like this, desktop.

[00:02:13]
Okay, makes sense? So that's why you should provide both, the maskable and the non-maskable one, and each device will pick one. How the device knows if it's a maskable icon or not? Well, because we say so with a property purpose, we say this is the maskable version. Okay, makes sense?

[00:02:35]
And how to do a maskable icon if you're not, we don't wanna use Photoshop or whatever tool you use for that. We have a nice simple to use PWA available at maskable.app. And by the way, we have the app TLD now, top-level domain .app that is actually managed by Google and you can actually go and get one.

[00:03:01]
And a lot of PWAs today are getting .app. Okay, for example, the one that we saw, the store.app, is actually .app.