Open mattleibow opened 1 year ago
@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.
@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
Just adding the testing SVG image here:
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:
As you can see, the new Android circle looks great, but none of the others do.
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?"
This is what I mean by fancy shaped icons (Using VS Code as an image):
Key:
I can extrapolate from this and say
Effectively:
Maybe we have 3 "modes"
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" />
Yeah, andoird is pain
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:
Any other icon types? Probably need to add some images here so people know what we are talking about :)
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.
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.
This may be a pre-step: https://github.com/dotnet/maui/issues/10811
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.
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.
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.
Hey, what is the status on this one? I also have this problem with my android app icon
I still have it as well. iPhone, Mac, and Windows are good.
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.
Are there any workarounds? If I need to use Android Studio, is there info on how to do that?
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 :)
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
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
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.
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: @.***>
@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.
I modified the viewBox of the foreground svg file to give it margin and now it looks pretty good in Android and iOS.
@TonyLugg can you share your changes on the svg file?
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: @.***>
@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
.
@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.
@cdavidyoung The iOS image is almost identical to the old one that was png based. It had a margin around the outside too. I don't have the old result anymore.
Im currently experiencing this issue, my markup for my icon:
<MauiIcon
Include="Resources\AppIcon\appicon.svg"
ForegroundFile="Resources\AppIcon\appiconfg.svg"
BaseSize="128,128"
Color="#4E8CC6"
ForegroundScale="0.65"/>
Displays correctly on iOS:
On Android it looks like it hasn't applied the scaling factor to the image:
I suspect the reason why the otb image assets (file new maui / maui accelerator) works and external svgs aren't working aswell is due to the fact that the svg assets provided by the maui starter projects are pre padded, whereas the svg's I created (and I suspect other people) fill their entire viewbox.
I'm using Figma for my svg's and pulling in the other 2 I can confirm this is the case:
So the only reason the foreground image assets scale to the center is because that scaling is baked in.
Now I have the knowledge I can work around this limitation by baking in the padding to my existing icon, however I'd consider it quite the design faux pas for Maui to commit. Our image assets will be provided externally by different people using different programs, they shouldn't care about being formatted perfectly for Maui.
This issue thread is a testament to why app icons in Xamarin worked better, the platforms have their specific nuances and its better to just let them chill as opposed to adding extra tooling ontop of them to enforce a consistent way of doing icons. Historically I just use a generator to make my app icons, drag them into each platform and then i'm done. Takes maybe 15-20 minutes for the whole process and then I never touch this part of my project again. This issue has taken me a couple of hours to realise I wasn't even doing anything wrong... Shared image assets was a great improvement from Xamarin, MauiIcon
in my opinion a step backwards.
Following on from my previous comment, after messing around with the tool for a few hours I decided the headache wasn't worth it and fortunately I can go back to using the original way we did app icons in xamarin:
Platforms/Android
), Ensure the BuildAction is AndroidResource
android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round"
MauiIcon
on android:
<MauiIcon Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) != 'android'"
Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" BaseSize="456,456" Color="#4E8CC6" />
Verified this issue with Visual Studio Enterprise 17.7.0 Preview 2.0. Can repro on android platform with sample project. MAUI-Icon.zip
Why is the icon zoomed-in when foregroundscale=1? It seems like you have to set foregroundscale=0.65 to get something that looks ok.
I also noticed when you deploy to WSA the icon is bigger than the WINUI equivalent app:
Following on from my previous comment, after messing around with the tool for a few hours I decided the headache wasn't worth it and fortunately I can go back to using the original way we did app icons in xamarin:
- Create a file > new android studio app
- Right click "res" folder and select New > Image Asset
- Create your app icon
- Confirm and add to project
- Move all assets created in the res folder to your Maui Project (Under
Platforms/Android
), Ensure the BuildAction isAndroidResource
- Update your AndroidManifest to point to the new icon:
android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round"
- Update the maui csproj to not generate
MauiIcon
on android:<MauiIcon Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) != 'android'" Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" BaseSize="456,456" Color="#4E8CC6" />
- Your Maui Android app now displays the correct app icon!
Thanks a lot !
For generating icons i used https://easyappicon.com/
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:
We generate adaptive icons and 1 legacy icon:
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:
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.
Current Behavior
Steps to Reproduce
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