Add Android Adaptive icon

[EmilJunker]

Android 8.0 introduced the concept of Adaptive icons. The idea is to split the app icon into a background and a foreground instead of just providing a single static app icon with a predefined shape. This way, the Android launcher can apply a consistent shape to all icons on the home screen for a more uniform look and feel. Some launchers can even animate the icons using a parallax effect where the background and foreground are sort-of "shaken" independently from each other. For more information see the docs.

Cordova has built-in support for Adaptive icons, see here. All you need to do is provide the background and foreground images in addition to the src image in the config.xml. file.

The current Waistline app icon looks like this:

I would suggest to split this into a background and foreground as follows (This is just a sketch. I'm not a designer, as you can probably tell 😅)

The background consists of a solid red background with the scale printed on it:

The foreground is mostly transparent with the letter W in white and the pointer in red:

Put the background and foreground together and you get the following. If the icon was animated (i.e. parallax effect) this should hopefully give an interesting result with the pointer moving along the scale.

With a round icon shape applied, it would look like this (the black portion gets removed):

With a "squircle" icon shape applied, it would look something like this (again, the black portion gets removed):

This way, the app icon could adapt to different icon shapes (whichever shape the launcher is using) and thus would fit in better with other Adaptive icons on the home screen.

[davidhealey]

I do have the original SVG for the logo from the designer so I should be able to do this

[EmilJunker]

@davidhealey Hey, if you want you can send me the SVG and I'll try to do this myself.

[davidhealey]

Thanks! If you want to fix the landscape splashscreen issue too don't let me stop you :)

Master File.svg.zip

[EmilJunker]

Okay, with the help of Inkscape and my very basic SVG editing/design skills, I was able to create new icons.

Problem is: For some reason, the app doesn't build with these adaptive icons. I've created a comment about this for a similar issue in the Cordova repository, see https://github.com/apache/cordova-android/issues/942.

You can see my edits at the android-icons branch in my fork: https://github.com/EmilJunker/waistline/tree/android-icons. You can try it out if you want. Maybe the build works on your machine 🤷

I also added landscape splashscreen images (#331) and although it looks a bit distorted on my phone, it does work!

[EmilJunker]

Some good news! After upgrading to the latest Android SDK (version 30), the build works. The adaptive icon is working too, but it doesn't look quite right on my phone, so I have to do a bit more work.

[davidhealey]

Android SDK (version 30)

Will this still work on older phones?

[EmilJunker]

It should. For older phones that don't support adaptive icons, a fallback icon is specified in the src attribute in the config.xml file.