![]() ![]() It's actually a PWA so you can install this maskable tool as a PWA if you want to, if not, you can use it from the browser. To do that, I'm going to an online free tool it's called Maskable.app. So it's pretty simple but, we actually need to check if our icon, works well or not. How do you solve these from the word manifest spec? It's another icon with a property purpose, maskable, that's all. Everything that is outside of that safe area, can be actually be outside of the icon, so we should be very careful of what we're doing. We need to actually render a circle in the middle, with a radius of 40%, and that's known as a safe area. Okay, that's right you understand what's going on, we have an icon, it's in a square. So this is the official definition from the W3C spec, it's a sensory position circle with a radius of 40% of the icon's width, and this point you're thinking what? Iit's a serious square icon like the one that we have, but with enough discardable panning content out, of what is known as a safe area. To solve the problem in the webapp manifest, we must provide the maskable icon, okay? ![]() So they are actually smaller within a shape because, we're not providing an icon compatible with multi shapes. So, because if not, look at what happens with the NASA icon at the right, or the Get Kana icon, or even Lyft. So when you provide your icon, your icon should be prepared for being adaptive to these different shapes. And each launcher or each manufacturer can set a different shape, you have circle, a squircle, rounded square, square, blah, blah, blah, blah they can be many shapes. But from Android 8, all the icons must comply with the shape, that is set at the OS level. So you could actually provide icons that are transparent, so if you look at that get Get Kana, it's a Japanese PWA, or the NASA icon, is fully transparent with its own shape. As we saw before, up to Android 7, this kind of phone at this point, Android accepted icons in any shape. ![]() Bcause that's something that affects Android, and it will affect our icon. > Before finishing talking about icons, we need to talk about maskable icons. Transcript from the "Maskable Icons" Lesson ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |