Android adaptive app icons are generated "incorrectly"

[mattleibow]

Description

Currently we generate all the images, assuming all the image is visible on screen. However, for adaptive icons this is not true.

Assuming the following 2 images:

Background	Foreground

We generate adaptive icons and 1 legacy icon:

Circle	Squircle	Rounded Square	Square	Legacy________________

Ignoring the different final image sizes, we can also see the space around the legacy is larger. This is because legacy icons are not actually displayed in a normal layered way. In order for cool effects, the icon is actually cropped in by 18dp:

• The outer 18 dp on each of the four sides of the layers are reserved for masking and to create visual effects such as parallax or pulsing. https://developer.android.com/develop/ui/views/launch/icon_design_adaptive#design-adaptive-icons

Potential Actions

Not sure the correct approach here as the developer may want to have cool things on those edges. But we need to ensure the final images are drawn correctly.

1. We can scale down the adaptive foreground images
   • the icons will look strange if the foreground image is not transparent during parallax
   • both the background and foreground are clipped 18dp
   • this is the way on most Androids
2. We can scale up the legacy foreground
   • we may lose image data on the edges (but we do already in adaptive)
   • we may cover background corners/edges if the foreground gets too big
   • this is legacy devices (pre Android 8)
3. We can copy Android Studio and totally scale up both layers and apply our own clipping and shadow
   • this results in a very different image
   • no way for the dev to provide a custom icon shape
   • this is exactly what is happening with adaptive icons anyway

Current Behavior

• Windows
  • Draws the icons as is, no safe area
  • Allows custom shapes
• Android
  • Crops the adaptive icons by 1/6 all round
  • Draws legacy icons as is, no safe area
  • Allows custom shapes
• iOS
  • Draws as is, no safe area
  • Does not allow custom shapes, will fill with black
• Mac Catalyst
  • Draws as is, no safe area
  • Allows custom shapes

Steps to Reproduce

1. Clone https://github.com/mattleibow/MAUI-Icon-Stretched
2. Run the app
3. Observe the generated images are not consistent

Link to public reproduction project repository

https://github.com/mattleibow/MAUI-Icon-Stretched

Version with bug

7.0 Release Candidate 2

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

All

Did you find any workaround?

No response

Relevant log output

No response

[mattleibow]

@KSemenenko you were thinking here, what are your thoughts on the options and what can we do to make sure the developer gets what they want? All ideas are welcome.

[KSemenenko]

@mattleibow So far, from my experience, it turns out that this is one icon, which is usually made for iOS and you want to see it on Android in the same way as on iOS.

As an idea - perhaps we can make a template MAUI icon, a figma file or SVG with a grid inside, say, the size of 1024x1024.

The icon itself should be in the center in a kind of safe zone. and then when you generate images you know how many pixels on the sides you can cut off, for example.

Here I am proceeding from the idea that all icons are drawn by Google or iOS grid anyway, and the only difference is the final shape of the icon itself and the marginal indentation.

link with good analyze of icons: https://minoraxis.medium.com/icon-grids-keylines-demystified-5a228fe08cfd

[mattleibow]

Just adding the testing SVG image here:

[mattleibow]

Not sure this is the full story. Sure, we can make "safe" icons, but then the legacy android (probably not essential but still important) and desktop (Windows and macOS suffer)

Key:

• Top row, left icon is Android 6 (corners are in-image)
• Top row, right icon is Android 10 (circle is OS crop, but dragging the icon shows a bit more)
• Bottom row, left icon is VS icon (shape is in-image)
• Bottom row, right icon is Windows 11 (corners are in-image)

As you can see, the new Android circle looks great, but none of the others do.

[mattleibow]

At this point, are we maybe looking for 2 styles of icons and somehow convey that in the template or extend the MauiIcon MSBuild item?

We can have conditionals in the .csproj to be "if mac / windows, use the desktop-y - else use the mobile-y". But this does not play well in the cases of the mobile needing the new way. This is legacy Android and Tizen. And when I say "legacy" I mean Android 7 and older.

Maybe we need resizetizer to be smarter and make the foreground bigger on the ones that don't have a safe area - Windows, macOS and Tizen.

Things like legacy Android and Windows and macOS do actually take into account the background shape. For example, we could have a plain background/foreground that is a cool icon - like the VS icon.

I need to check with Tizen, maybe @rookiejava or @sung-su can share, but I think they just have a single image that does not crop like Android does.

Also, iOS also does not crop. Pixels at the top actually do appear. Android is the only one that I see that does the whole "crop off 1/3 of the image" nonsense.

The question I am asking is this: "what is the best way to handle the following cases?"

1. Support a plain, fancy-shaped image - like the VS or the Windows Settings app
2. Support the Android adaptive aggressive crop with over 1/3 the image gone
3. Support the legacy Android and Tizen way of drawing the single icon as is with in-pixel corners
4. Support safe-area style image that require a full background and is OS-cropped - like all the iOS icons

[mattleibow]

This is what I mean by fancy shaped icons (Using VS Code as an image):

Key:

• Top left, Android 6
• Top right, Android 10
• Bottom left, VS
• Bottom right, Windows 11

I can extrapolate from this and say

• macOS and Tizen are going to be fine and look like Windows
• iOS is going to be a black rounded rect with the logo

Effectively:

• Android is really bad and clipped hard
• iOS just needs a background color - and probably some padding to look reasonable

Maybe we have 3 "modes"

• Draw as is (Tizen, Android 7-, Windows, macOS)
• Draw with background - and more padding to look nice (iOS)
• Draw with inset and padding with background (Android 8+)

[KSemenenko]

I have an idea, one of my clients has a very nice png icon.

How about we just let you specify a big icon file (platfrom form+size), and then just cut it into smaller ones?

for example:

<MauiIOSIcon Include ="ios.png"/>
<MauiAndroidIcon Include ="anroid.svg"/>
<MauiWinowsIcon Include ="windows.svg"/>

My point here is that ions can still be different for each platform. If for iOS we don't have a choice of shapes, for other platforms we do. For example, the same ico with transparent background. It is also easier for designers to draw 2-3 files, a certain size.

Or like this:

<MauiIcon Include="appicon.svg"/>
<MauiAndroidIcon Include ="anroid.svg"/>

like we take MauiIcon for the default, if there is no special picture for the platform.

<MauiIcon Include="appicon.svg" Platforms="ios, windows"/>
<MauiIcon Include="android.svg" Platforms="android" />

[KSemenenko]

Yeah, andoird is pain

[mattleibow]

I think we need to step back and maybe create the types of icons we want to support out the box and then see what "transformations" are needed to get there. I think it is fine if we don't support a few corner cases because we really want to reach the 80%/90% of developers. The last 20%/10% can pre-generate and use platform specifics.

Right now, I can think of 2 types of icons:

• Single, fancy shapes - like VS
  • Android legacy, Windows, macOS and Tizen
  • iOS and Android adaptive need some sort of "background"
• Solid/gradient background with a centered icon - like the Game Launcher in the image above
  • All are fine except for Android adaptive which clips a large chunk off

Any other icon types? Probably need to add some images here so people know what we are talking about :)

[KSemenenko]

I would also say the good PNG icon for ios and android, like Vysor, so we can't mix it with background.

btw about my andoird icon - it's actualy good generated. In jpg in obj folder.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[mattleibow]

This may be a pre-step: https://github.com/dotnet/maui/issues/10811

[tranb3r]

Hi @mattleibow Here is how the app icon from your test project looks like on my android emulator (api 33): The icon does respect the 72dp/108dp android rule, so I don't understand why it doesn't fit into the circle. Of course I can tweak it using the ForegroundScale in csproj, but I would expect it to be properly clipped without any hack. Any explanation ? Thanks.

[cdavidyoung]

Is this the reason my icon and splash screen are getting cropped on Android? On Windows, iOS, and MacCatalyst they look perfect. Note that the icon generated in the Android resizetizer folder also looks fine.

[taublast]

So, what's the current state as of today? Is it just me of everyone is forced to use android studio to generate icons for android? I see https://github.com/dotnet/maui/issues/7305 is closed as completed, but it's should be still open, rasterizer is totally ignoring svg ForegroundScale on android, while it's perfect on iOS and MacCatalyst.

[Cruik]

Hey, what is the status on this one? I also have this problem with my android app icon

[cdavidyoung]

I still have it as well. iPhone, Mac, and Windows are good.

[sesitosvdx]

I have the same problem only on Android. Icon gets incorrectly resized and appears cropped. Using .png crops the image. Using .svg crops it even more. ForegroundScale="0." or ForegroundScale="1." crops the image even more the without setting it.

[MisinformedDNA]

Are there any workarounds? If I need to use Android Studio, is there info on how to do that?

[Cruik]

i used the workaround to trial and error :/ im creating an png of my icon.svg and move it around until i find it good. sucks.. but works FYI i m only deploying to android and dont know what will happen in windows/ios :)

[KSemenenko]

You can also use native one, as I understand you have copy your icons on right native folders. Then native icons will have priority over maui icon

[KSemenenko]

I found amazing service for icons https://easyappicon.com/

probably it will be cool if we can do like this in maui, so we can get how to icon will looks like @mattleibow

[TonyLugg]

Any fix yet? I paid to have SVG images drawn from scratch to mimic our PNG files used for app icon in Xamarin. The Android scaling/cropping is very disappointing.

[cdavidyoung]

I have an active Maui app on the Galaxy Store called CacheAll. In the store and the splash screen the icon shows as it should. It is only when the icon is on the launch screen that it is cropped. So there is nothing to keep one from publishing an app. Presumably this problem will eventually be fixed.

On Tue, Mar 28, 2023 at 12:49 PM Tony Lugg @.***> wrote:

Any fix yet? I paid to have SVG images drawn from scratch to mimic our PNG files used for app icon in Xamarin. The Android scaling/cropping is very disappointing.

— Reply to this email directly, view it on GitHub https://github.com/dotnet/maui/issues/11295#issuecomment-1487506761, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHE7K5LOM426A3ITYTU7STW6M6FRANCNFSM6AAAAAAR55O2LA . You are receiving this because you commented.Message ID: @.***>

[TonyLugg]

@cdavidyoung Yes, I understand it works technically. But our users are used to the nice launch icons we have with our Xamarin app. I'm getting margin added around the icon to see if that helps.

[TonyLugg]

I modified the viewBox of the foreground svg file to give it margin and now it looks pretty good in Android and iOS.

[pictos]

@TonyLugg can you share your changes on the svg file?

[cdavidyoung]

Or at least images of before and after?

On Tue, Mar 28, 2023 at 3:40 PM Pedro Jesus @.***> wrote:

@TonyLugg https://github.com/TonyLugg can you share your changes on the svg file?

— Reply to this email directly, view it on GitHub https://github.com/dotnet/maui/issues/11295#issuecomment-1487696558, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHE7K5A4FAZ7QS6PQBWYYLW6NSFPANCNFSM6AAAAAAR55O2LA . You are receiving this because you were mentioned.Message ID: @.***>

[TonyLugg]

@pictos @cdavidyoung My background and foreground images are both 330 x 330 size. ViewBox was 0, 0, 330, 330. I changed it to be approx. 33% bigger than the image, while centering the image. New ViewBox is -57, -57, 444, 444.

[cdavidyoung]

@TonyLugg , could you paste the before and after images here? It would seem that whatever you do to make the Android look better is going to make iOS, Windows, and MacCatalyst look worse.