dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22k stars 1.72k forks source link

Changing the default appicon doesn't work. #7786

Closed gfmoore closed 2 years ago

gfmoore commented 2 years ago

Description

Please see this issue on the documentation https://github.com/dotnet/docs-maui/issues/563 that I raised.

I have an svg icon called bicycle.svg bicycle

I originally followed the advice in the article https://docs.microsoft.com/en-us/dotnet/maui/user-interface/images/app-icons?tabs=android

This didn't work. The app icon remained unchanged (in the Pixel 5 emulator). I followed the advice to clean, build, rebuild, debug, dotnet clean from command line no change.

During the process of trying to get things working I got all sorts of error messages, some referring to the icon being locked. So rebooted, but sometimes still locked. dotnet clean seemed to work better than other approaches.

However, my situation is that now I have the following: image

So I have my icon called bicycle.svg in the Resources/AppIcon folder, the .csproj file is referencing that file, however my app will now not build

image

I dragged the bicycle.icon back into the folder (on visual studio and replaced the existing one. That failed again. I had suspected that dragging the required icon into the folder would update other manifests but it seems not.

I renamed my bicycle.svg icon to appicon, removed the one in the Resource/AppIcon folder

I noted that deleting the icon from the visual studio folder also removed the App Icon line in the .csproj

but adding the appicon.svg did not restore the line in .csproj

I had to manually restore these lines

Once I got the app working again, the app icon in the emulator still hadn't changed.

So questions: 1) Does the name of the appicon have to appicon.svg? I don't see why it cannot be anyname.svg as long as it matches the .csproj

2) In order to update the manifests in android etc (which is what I suspect is not happening), what is the correct procedure. Is there a command I can run to ensure this happens.

Here is the appicon in the emulator drawer image

The one to the left is a test app with no changes to the appicon. The TSDZ2... is the one that I am trying to be the bicycle and it looks like an android icon?

I'm sorry this question is a little rambling, but I've had all sorts of issues and I couldn't figure out how best to describe what happens. The upshot seems to be that the process as described in the docs doesn't work.

Steps to Reproduce

As above

Version with bug

6.0 Release Candidate 3

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Pixel 5 API 30

Did you find any workaround?

No

Relevant log output

No response

janseris commented 2 years ago

The upshot seems to be that the process as described in the docs doesn't work.

This is a nice summary of many MAUI features.

The current state of AppIcon and SplashScreen could be summarized as alpha version. It basically works properly with the default configuration in the app template only and getting it to work with custom assets or customizing it is random luck. Most of the advanced properties aren't working.

I tried to open an issue for every of the bugs:

https://github.com/dotnet/maui/issues/7305 https://github.com/dotnet/maui/issues/7304 https://github.com/dotnet/maui/issues/7207 https://github.com/dotnet/maui/issues/7206 https://github.com/dotnet/maui/issues/7204 https://github.com/dotnet/maui/issues/7203 https://github.com/dotnet/maui/issues/7200

For Android 12, additional issues arise for splash screen: https://github.com/dotnet/maui/issues/7289 https://github.com/dotnet/maui/issues/7303

So far, there have only been minor fixes to the incosistency of the app icon on Windows (RC 3 to GA update).


I followed the advice to clean, build, rebuild, debug, dotnet clean from command line no change.

During the process of trying to get things working I got all sorts of error messages, some referring to the icon being locked. So rebooted, but sometimes still locked. dotnet clean seemed to work better than other approaches.

For real clean to make sure no stale files from Android build are present, delete bin and obj folders (the Clean Solution or Clean project doesn't really clean a MAUI project build output). These folders are however usually locked by adb (Android tool) and Visual Studio even when idle so for unlocking them to be able to delete them, you can use a Windows shell extension LockHunter.


This is my summary for using app icon and splash screen:

<!-- App Icon -->
<!-- svg cannot be used because it turns black on Android -->
<!-- TintColor (image fill color) and Color (background color) doesn't work for MauiIcon on Android and in Windows taskbar -->
<!-- the file must be called appicon -->
<!-- ForegroundFile must be specified else the icon doesnt work on Android -->
<!-- BaseSize doesn't work -->
<!-- ForegroundScale doesn't work -->
<MauiIcon Include="Resources\appicon.png" ForegroundFile="Resources\appicon.png" />

<!-- Splash Screen, not used on Windows -->
<!-- white fill color must be used because the svg is rendered as black on Android (bug) -->
<!-- doesn't work on Android 12 when started from VS and from Android 12 started from device is replaced by app icon -->
<MauiSplashScreen Include="Resources\alfawhite.svg">
  <Color>#19191D</Color> <!-- Splash screen background color -->
  <BaseSize>128,128</BaseSize> <!-- Splash screen image size-->
  <TintColor>White</TintColor> <!-- Splash screen image fill color (svg) -->
</MauiSplashScreen>

You can do this for a file included into the Resources folder, this creates appropriate entry in the .csproj file: image This can do some unwanted delete just as you experienced in the .csproj:

I noted that deleting the icon from the visual studio folder also removed the App Icon line in the .csproj

but adding the appicon.svg did not restore the line in .csproj

I had to manually restore these lines

so the working solution is to edit .csproj manually anyways.

Note: I don't have any info on using AppIcon and SplashScreen on iOS/Mac

gfmoore commented 2 years ago

Thanks for this. I'll check it out ASAP. 😀

jfversluis commented 2 years ago

Adding needs-info for now so we wait on your report back. Additionally it's probably a duplicate of one of the issues that is already opened then :)

ghost commented 2 years ago

Hi @gfmoore. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

gfmoore commented 2 years ago

Yes please close if this is a duplicate. However, be aware that I still cannot get my appicon to appear on emulator or device and once again the splash icon is refusing to resize. There is something wrong in this :(

adegeo commented 2 years ago

I would vote to have this issue track all the others..

VincentBu commented 2 years ago

I'm using vs main build 32609.239 and janseris's workaround works for me.

gfmoore commented 2 years ago

Well I've nearly got something. I'm still using the svg because since the original appicon appiconfg are svg and they should rescale? But I take the point that png may be better.

So on my actual phone I now have my black background, my bicycle icon, but it has .NET overlayed on it in white.

image

Here's my appicon.svg appicon

My appiconfg.svg (Which by the way doesn't appear under the resources AppIcon folder appiconfg

And here is the .csproj

    <ItemGroup>
        <!-- App Icon -->
                <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#000000" />

        <!-- Splash Screen -->
                <MauiSplashScreen Include="Resources\Splash\bicycle.svg" Color="#000000" />

(By the way the spashscreen has stopped resizing to fit within the device window - it has done before, but was flaky)

And just to add salt to the wound here is Mandy Montequila extolling how magical using app icons is: https://mybuild.microsoft.com/en-US/sessions/802e54dd-5b4a-460f-8e74-240e4a78f9c9

at 5:38

And she's a senior pm at Microsoft .Maui !!!! (I refrained from rude comments.)

gfmoore commented 2 years ago

oops now I've posted it I can see where the .Net is coming from - doh, when I looked it was blank. Sorry I'll edit it now.

gfmoore commented 2 years ago

Ahh it sort of works now Here is the appiconfg.svg I used Inkscape to edit and it was a white lettering on the default white background - doh. (it is of course transparent!! appiconfg and the icon - edit: oh dear hasn't updated yet with new appiconfg.svg. I'll do the whole clean thing... but I need to move on for now

I note that the image of the bike is a little larger than I expected - similar non rescaling issue as per the splashscreen?

Thanks to janseris for his tips.

janseris commented 2 years ago

@gfmoore I've been seeing the concept of half working tools for some time now (new phenomenon) I have been working with both Razor tooling in Visual Studio and MAUI and it seems the same. A lot of issues in a released tool and the issues aren't being solved. The issues are discovered by simply using the tool on daily basis in a simple project. This means it's poorly programmed and tested. It's not some special cases where it fails. VS Razor tooling has had (and still has) large performance problems and it still lacks some of the functinality which exists in C# editor. I've been reporting stuff since december and there have been minor fixes.

Which is sad that with my loved C#/.NET, the MAUI (worse product state) and Visual Studio Razor tooling team (better product state) is just marketing broken products. So far I assumed that .NET is a professional framework so they would be marketing only working tools but seems it isn't the case anymore.

I can't say a bad thing about EF, Blazor, WinForms, WPF, ASP.NET.

I don't know where exactly the problem is - if developers are presenting good results to the managers while they actually have half-functioning software or is it the management team. Anyways it seems like there is a large lack of manpower (Microsoft can definitely afford employing more developers!).

gfmoore commented 2 years ago

Being a naive and trusting person I expected this to all work. Oh wait, since Microsoft started and I used dos on the IBM PC clones Microsoft have always released buggy, malfunctioning products and expected the community to report errors and fix it for them. Nothing has changed in the last 40 years (man how much of my life have I wasted fixing bugs!!!! Oh dear.) :(

Man it's only an app icon, how hard is it to test and get it right and now we are on GA.

gfmoore commented 2 years ago

Sadly I suspect this will never get assigned to anyone with any skill as now we are at GA, MS will disband the team except for some lowly maintainers and move on to the next big thing, because as far as they are concerned it's all done and dusted. And don't get me started on lack of Bluetooth functionality...

gfmoore commented 2 years ago

Screaming: Now my app won't build or deploy image

gfmoore commented 2 years ago

I had to replace my edited appiconfg.svg file with an unedited one from another app!

janseris commented 2 years ago

I'm using vs main build 32609.239 and janseris's workaround works for me.

Are issues in maui repo also getting fixed or only getting verified?

gfmoore commented 2 years ago

So I've made progress and discoveries. First the splash screen not resizing - the splash screen file needs to be called ... splash.svg!!!

Had a great idea for the app icon. I just copied the appicon.svg and renamed it appiconfg.svg. So now my appicon overlays my appicon. Had all sorts of weird errors and issues, so closed down Visual Studio, deleted the bin file, deleted the obj.debugfolder ran dotnet clean in my solution folder and restarted visual studio. Yippee I now have an app icon. I consider it is too big, but I can live with it for now.

So Microsoft when will you make the magic happen? When will you review the code and approach to this issue and make it work.

It should work with ANY svg name out of the box, it shouldn't cause errors just because files are changed or renamed (even if manual changes to .csproj have to be done, and certainly I shouldn't have to jump through hoops and delete folders etc just to get an app icon and splash screen to work!!!! Should I! Should I?

gemma1987 commented 2 years ago

For me everything is working with the appicon, but it doesn't rescale, so now I have this on the maui app: image And this in the xamarin.forms app: image

As you can see I can change the name of the icon and place it in the resources file, but the app icon doesn't change size, whatever I try:

image

janseris commented 2 years ago

For me everything is working with the appicon, but it doesn't rescale, so now I have this on the maui app: image And this in the xamarin.forms app: image

As you can see I can change the name of the icon and place it in the resources file, but the app icon doesn't change size, whatever I try:

image

https://github.com/dotnet/maui/issues/7305

mattleibow commented 2 years ago

I opened a new issue on the docs page about the missing section on actually using the new images provided : https://github.com/dotnet/docs-maui/issues/611

Also, this is being improved here: https://github.com/dotnet/maui/pull/7968

Part of the issue is that changing the app icon to a new file does not actually set that icon for the app as there may be multiple icons. The PR is going to do better by making sure the templates do not hard code the icon name and then dynamically insert the new icon.

The issue really about icons not found is that there needs to be a matching update in the platform manifests - check the maui-docs issue for a bit more detail.

I realize there are a bunch of issues here and I am looking at them each to fix them all and make sure any docs/defaults/generation is happening correctly.

gfmoore commented 2 years ago

You may want to rename your icon.svg to appicon.svg. I got loads of error and warnings otherwise on build. Same with splash.svg. Obviously it can work, but didn't for me.

Certainly the splash wouldn't resize till I renamed my icon to splash.svg and now good.

mattleibow commented 2 years ago

You need to make sure you update the values in the manifests to match the icon you are generating:

https://github.com/dotnet/maui/blob/release/6.0.4xx/src/Templates/src/templates/maui-mobile/Platforms/Android/AndroidManifest.xml#L3

image

gfmoore commented 2 years ago

That's interesting, thought it was supposed to be magic! 🤣

mattleibow commented 2 years ago

The other issue is that having the same name for the splash and icon causes issues because android sees those files and then decides that because they are the same name they are the same file - mainly because it is a flat folder so the last one wins.

mattleibow commented 2 years ago

That's interesting, thought it was supposed to be magic! 🤣

More magic is coming https://github.com/dotnet/maui/pull/7968

mattleibow commented 2 years ago

Created another issue to track Resizetizer issues https://github.com/dotnet/maui/issues/7970

Hopefully we get to full magic soon!

ismasanchez commented 2 years ago

For me everything is working with the appicon, but it doesn't rescale, so now I have this on the maui app: image And this in the xamarin.forms app: image

As you can see I can change the name of the icon and place it in the resources file, but the app icon doesn't change size, whatever I try:

image

As a temporary solution I had to do the following steps to make the icon and splash screen show correctly (at least in Android): 1) Design your icon as a png (also works with svg) with a Canvas of 400x400px and place your icon centered with a max dimension of 200x200 px 2) Save that png as appiconfg.png in AppIcon folder 3) Include default appicon.svg file in AppIcon folder, change color by editing .svg directly in VS in fill filed (width and height should be 456). 4) In your project .csproj file include the following:

    <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.png" />
    <MauiSplashScreen Include="Resources\AppIcon\appiconfg.png" Color="#whatevercolor" />

5) Clean Solution in VS and Rebuild (if it triggers some errors about Maui.Resizetizer.targets, when you press F5 it will go away). Hope it gets resolved soon!

mattleibow commented 2 years ago

The issue needs to be fixed in the SDKs:

mattleibow commented 2 years ago

Closing this issue as it is a more of a "link to other issues" issue and many of the smaller ones have been fixed.

There is the one issue where changing some splash properties does not re-generate (#9803) and then other where aspect ratios are not preserved (#5676).