-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Android adaptive app icons are generated "incorrectly" #11295
Comments
@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. 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 |
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. 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" /> |
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: #10811 |
Hi @mattleibow |
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? |
Hey, what is the status on this one? |
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. |
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 probably it will be cool if we can do like this in maui, so we can get how to icon will looks like |
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
<#11295 (comment)>, 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
<#11295 (comment)>, 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 |
@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. |
Verified this issue with Visual Studio Enterprise 17.7.0 Preview 2.0. Can repro on android platform with sample project. |
Why is the icon zoomed-in when foregroundscale=1? |
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
The text was updated successfully, but these errors were encountered: