.NET MAUI Icon Stretched

[TamerIrdais]

Description

This is a follow up for bug #10669 @mattleibow closed that other bug I reported as fixed in changeset #5676 but I just tried it again using Visual Studio 2022 17.5.0 Preview-1 and it still active. I also tried it using latest Visual Studio 2022 17.4.0 and also active there.

My original problem is how the MAUI app icon looks on Android, its stretched. Below screenshot shows how the icon looks like for MAUI app (the one with RED round rectangle around it) while you can see how it should look like from the Xamarin app (the one with GREEN round rectangle around it):

When is this bug going to be truly fixed?

Steps to Reproduce

Just build and deploy the demo to Android device and see how the demo icon looks stretched.

Link to public reproduction project repository

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

Version with bug

7.0 Release Candidate 2

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 12 API 31

Did you find any workaround?

No

Relevant log output

No response

[mattleibow]

@Redth I think this is by design because we don't scale down the foreground to make it fit as you may have some other requirements.

And to solve this we have a ForegroundScale="0.66" attribute you can add. (Replace the 0.66 with whatever scale you are wanting).

But...

In addition to all this, I see your SVG foreground also has a background image and shaped sizes. You may want this (white shape and blue pill with logo), but there is a new Android way - a 2-part icon:

• Android: https://developer.android.com/develop/ui/views/launch/icon_design_adaptive#design-adaptive-icons
• MAUI: https://learn.microsoft.com/dotnet/maui/user-interface/images/app-icons?tabs=android&view=net-maui-7.0#adaptive-launcher

So, in your case you would set the blue in the background and just keep the foreground QR code as the foreground - with an optional scale.

I was going to just split the images into 2 parts, but I found the foreground was still too big because it is a square QR image in a circle area, so I actually did a few things - without changing too much:

1. Copied the background rect from the QR (foreground) image into the background SVG
2. Resized the background SVG to match the foreground 1080
3. Deleted the background rect from the QR (foreground) SVG
4. Set the ForegroundScale in the .csproj to 0.6 as that looked nice when running
5. Removed the white Color from the csproj so the legacy icon would have a transparent background behind the blue pill

I could/should have removed the rounded corners from the background, but because of this limitation I kept it: #11293 This does mean technically the generated images are not perfect as they are not filled and some shapes may expose this, but I was not actually able to find this. I even used a tester app and for some magical reason it filled in the spaces? https://github.com/nickbutcher/AdaptiveIconPlayground

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

So, at the end of the day, there are 3 images generated:

Background	Foreground	Merged

Using the testing app, your icon now looks like this:

Circle	Squircle	Rounded Square	Square

I think we have areas to improve:

• 11293

• 11295

[mattleibow]

@TamerIrdais sorry for that massive chunk of a comment. As I was trying to find the best way to render your icons I stumbled across some interesting cases. I have linked the 2 "issues" I see above, and I edited that comment so many times while typing that I have no idea if it is coherent.

But I think the summary is you probably just need to add a plain blue background instead of while and use the foreground scale to make it fit.

For the fancy new adaptive icons, you need to edit the svg to move the background out of the foreground.

[TamerIrdais]

Thank you very much @mattleibow for the detailed reply and the info, really appreciate it. Your suggestion to use ForegroundScale fixed my issue and I accept this answer.

[mattleibow]

@TamerIrdais Good to hear! I am going to close this then :)

But to keep everything linked, I am going end off with the links to the issues that prevent automagical things:

• 11293

• 11295