Feature Request: Adaptive Icons

When building an app for a newer Android system (e.g. Pixel 2), then its icon is shrinked to fit in the white circle background. Other app icons fill the whole area of the round icon. More info about this here: https://stackoverflow.com/questions/47523610/android-oreo-how-do-i-set-adaptive-icons-in-cordova

Is it possible to automate this in the build process?

Hello Harald,

In fact, App Builder already generate various icons for various platforms based in the provided app's icon. I think that the icon itself have something to say here... for example, the below capture shown an Android 9 version with various icons:

As we can see in the above capture, various icons appear as you described (if I am not wrong), including the icon of certain app (right icon at the first row) that I develop appear like you describe. However, if we look the default App Builder's apps icon, they don't appear in the same way. So... if I am not wrong, maybe the icon's design is important here.

A "rounded" icon, similar than the default App Builder's apps icon, appear fine to "fill" all the space. Other "square" icons can't fill in that space and therefore appear like you describe and we can see int he above capture.

I see ... so if I use a round PNG, it will perfectly fit in?

But what about older Android systems and iOS with square icons ?

I have not tested it, but I think they will crop it to a square then, which won't look nice.

Hello Harald,

Maybe I must study more about "adaptative icons", because, certainly its something confuse to me. "Older" Android versions (Android 6, for example) shown perfectly well squared icons, and also rounded icons. So I can't understand why a recent version of Android break something like that... well... apparently what Android wanted (at least in the 9 version) is that all the icons appear "rounded"... or at least inside a "circle"...

Maybe adaptative icons can solve something like that, but I am not sure, to be honest, since in the capture that I shown above I can't see any square icon... that don't appear inside the "system circle icon"... even GMail, for example, appear "inside the circle".

If your fear is about how square icons look in "older" Android version, you no need to worry: the icons appear "as they is", squared or rounded. Apparently Android 9 introduce the "circle to place not rounded icons"... and I am not sure if the referred "adaptative icons" is the "solution" to deal with this, since, at least rounded icons appear fine, like the default App Builder's apps icon.

Hello Harald,

Yes; I am also studying here about adaptative icons: apparently Cordova is ready to use it, so, maybe I can understand what App Builder can do in order to suport it in the best possible way. I will post here any possible progress.

I digged a little bit further with the following results:

Using round PNG icons works on older an new Android systems. It fills the round icon space completely, no more shrinking.

Doing the same under iOS works in the Simulator, but such icons are rejected, when you want to publish your app in the AppStore:

Having 2 separate icons, one for iOS and one for Android would solve this problem. No adaptive icons needed. Even adaptive icons would be rejected by the appstore.

Hello Harald,

Various things to consider here... first of all, when I talk about a "rounded icon", I means a "rounded design", not a "rounded image" or something like that. For example, I can't understand why Apple reject an icon... since I already have a couple of apps published in the Apple Store without get the problem that you describe above.

My intention (I hope I have some time to do it!) is to leave the things equals than now, that is, maintain the creation of the icons like now, since works in almost all platforms, except for the Android versions who support "adaptative icons". So for this "adaptative icons" I want to offer a way to provide the icon's "foreground" and "background", in addition to the app's icon, and, only intended to be used by Android.

In fact we can try something like that right now using the App Options -> Cordova -> Configuration -> Extra XML, by placing the "adaptative icons" XML referred here in the Apache Cordova documentation. But I am not sure if this can work as expected, so, I will insists, my intention is to prepare this stuff by AB, if the user provide the proper "foreground" and "background" icons for the Android.

I see ... rounded images in that case means images with a transparent background on their edges. I checked the AB standard image in its APK package - it had a transparent background too.

Looks like this has changed on Apple's side, because I also had Apps with tranparency in their icons accepted approx. 1 year ago.

Just thought it would save your time, because it would be easier to implement separate icons for Android and iOS, than dealing with adaptive icons.

Hello Harald,

The iOS app that I am talking about has been updated recently in the Apple Store. But, to be honest, I am not talking about the default icon of AB: maybe this have problems for the Apple Store? I am not sure about... since I did not try it...

But yes; the objective is to use different icons, that is, one for all the platforms (including Android) just like now, and a couple of them specifically used for the Android "adaptative icons" feature. I think this can work.

But I am not sure right now how exactly implement it... what we provide to AB is an icon that then AB uses to generate lot of icons for all the platforms. I am not sure how to proceed with the new "background" and "foreground" "adaptative icons".

Probably we can prepare a 1024x1024 "background" and "foreground" icon, then AB can also generates the appropiate images, that is, icon sizes. But I need to implement this and of course made various tests. But this is the idea in principle... I think this can work.

This URL might help with the XML config:

https://forums.meteor.com/t/resolved-how-to-add-items-in-cordovas-config-xml-to-support-android-adaptive-icons/44126

As far as I can see, all this requires icon resources generated by Android studio, which are then consumed by Cordova ....

Hello Harald,

Thanks for the link. Just for your information... you are right... or in other words... I am wrong... let me to explain. Taking a look here at the app that I know it's published in the Apple Store, I can see that we have here a transparent icon... but this is not the icon used by the app! In fact, we use a "white" icon... which is not transparent, so, probably for this reason we have no problem in the Apple Store.

I continue doing here some tests... my intention continue be to allows to select a background and a foreground icon, only to be used in the Android platforms that support this kind of icons. So the things remains equals than now for the other platforms. I need to work on it and made some other tests. I will post here on any progress.

Hello Harald,

This new AB release allows to provide a background and foreground icons for the Android versions that support adaptative icons. The app's icon is used anyway as the fallback for Android versions that don't support adaptative icons.