feat: new app icon and color scheme

[matthiasemde]

New App Icon

As with so many Android topics, trying to do it "the right way" was a real mess.

Design

The entry point on the Android developers page "Create App Icons" refers us to another developers page "Adaptive Icons" and also this page on the material design rules of designing product icons.

Using these guidelines and a back-of-the-napkin icon idea my mom came up with, we designed this new icon:

So far, so awesome 🔥.

App Icon Integration

Now to integrate the icon into the app... Since Android xml do not support "advanced" drop shadows like the ones recommended by their own design guide, we decided to draw the icon in figma, export it as .png and import it again into Android Studio. But how large should the image be? And which portion of the image should our icon fill? The android icon design specifications tell us that icons should have a size of 512 x 512 of which the product icon keylines should not use more than the inner 384 x 384 (75%):

FYI, this is how our icon looks inside the keylines:

This shouldn't be hard - let's try it in Android Studios "Asset Studio" (Resource manager > Add > Image Asset):

Woah, that's way to big! So 75% is not it... let's export only the keylines and see if we can reverse engineer the scaling factor

Ok, so it looks like we need a scaling factor of 66% to fit the keyline into the "safe zone". Let's quickly check our keyline is lined up with the keyline in the asset studio...

What?! Now it looks like we need to scale it down to 58% in order for the lines to fit roughly onto the grid displayed in asset studio (Btw. I compared to two different grids, figma vs. Asset Studio to the material 3 template and the figma grid is the correct one... Android Studio beeing outdated).

So finally, here is our new icon scaled down to 58% in the asset studio:

Although these inconsistencies leave a bit of a sour aftertaste, we can live with this for now and finally have a process for integrating our app icon (To make bad things worse, the Android Developers page on "Adaptive Icons" describes another scaling entirely¹).

Export / Import process

• Export icon foreground at 512w from figma -> images/musikus_icon_foreground.png
• Export icon background at 512w from figma -> images/musikus_icon_background.png
• In Android Studio go to Resource manager > Add > Image Asset and select both images
• Scale down the foreground to 58% and hit finish
• Add <monochrome android:drawable="@drawable/ic_launcher_monochrome"/> back to ic_launcher.xml and ic_launcher_round.xml since it gets removed by Asset Studio 😒
• Export icon foreground + background at 512w from figma -> app/src/main/ic_launcher-playstore.png

Monochrome Icon

To add support for monochrome icons to the app, we need only two thing. First, our app icon without background, without shadows and with a uniform color. This can then be imported into Android Studio using the Asset Studio just like the main icon. The only thing we need to do is revert all files the wizard changes except for the new 'ic_launcher_monochrome.webp' files. Afterwards, we have to add the <monochrome android:drawable="@drawable/ic_launcher_monochrome"/> to to ic_launcher.xml and ic_launcher_round.xml if they are not already there.

One thing we have to consider is the size of the icon. The monochrome icons from Google appear to be quite a bit smaller than the default version, so we decided to also decrease the scaling of the monochrome icon from 58% to 50%.

And this is out final product ❤

Todo:

• nail down icon color and adjust color scheme accordingly

Fixes: #26, #99

Footnotes

1. "Safe zone" according to the "Adaptive Icons" page in the Android devs documentation. Here, the full size of the icon should be 108dp with the inner 66dp being the "safe zone". 66/108 = 0.61, so neither 75% nor 66% nor 58%. ↩