.NET MAUI 02E - Changing the AppIcon and SplashScreen (PNG)

foreign in the previous video we looked at changing the SVG files for the app icon the app icon fig and the splash SVG file to modify our app icon in our Splash files now you may be like me that I'm not as comfortable in Adobe Illustrator exam and Adobe Photoshop or maybe you don't have illustrator but you do have Photoshop or some other graphic program for working with bitmaps you can create those files as pngs svgs are recommended because of the way they scale but if you make your PNG large it will scale down you just want to try to avoid scaling up so in Photoshop I've created a file called app icon underscore Island it's 1200 1200 so I use the 1200 in the name just so I know you know basically what it is and then I also put the RGB values again so it's just in the file name it's just the one layer that's Orange and then I have the app icon fig underscore Island underscore 1200s PNG it's got a transparency for the sky everything else is opaque very similar to what we created in Adobe Illustrator and then basically have the same file for the splash saved all three of those out we're going to bring those into our Visual Studio project and see how those will work for our icon and our Splash let me jump over to visual studio so I'm going to start by going to the resources let's go to the app icon and I'm going to take the app icon here and I'm going to set its build action to none for now we may get rid of those files yep icon fig already has a build action of none I'm gonna do the same thing for this splash I'm going to set its build action to none if the app icon I'm going to add existing files I'm going to bring in my two PNG files that I've created copy those and I want to take the app icon file and set its build action to Maui icon then the app icon fig file I'll set the build action there to none I'm going to bring in my Splash file and this one is Splash underscore Island and I'm going to set its build action to Maui splash screen now let's go look at our CS project file so under the app icon comment here in the file I'm going to create a Maui icon XML reference and we're going to say include equals and take resources backslash app icon backslash in the name of my file I could rename it to shorten it I'm going to leave it as app icon underscore Island underscore 1200 underscore ff7700 and has a PNG file so dot PNG I'm going to set the foreground file equal to and I'm just going to copy that reference and paste it and I'm going to do is change app icon underscore Island app icon under icon fig FG underscore Island I'm going to set the color equal to #ff7700 now because this is a PNG file we also have to tell it the base size and the base size is 1200 comma 1200 close that tag and I'm going to copy that let's do our Maui splash screen and our file here is resources backslash splash splash underscore Island underscore 1200 that's a PNG file get rid of the foreground and I'll see the color and the base size so again since this is a PNG I have to tell the base size so it knows how to scale and I'm going to close and save that file if I misspelled Splash Maui splash screen save because I had some files it reloads the project I'm going to clean all I'm going to run this first on the iPhone so I got an error here that more than one splash screen is defined so apparently is remnants of the old splash screen so let's just get rid of that I'm going to delete it we'll do the same thing on the app icons I'm going to delete those and then again I'm going to clean all I'll go ahead and rebuild and unfortunately sort of error message is just the the resizetizer codes reporting an error but I don't know where exactly where that area is but if we look through the contents here we might be able to find where the problem was so it didn't like the foreground file saying it couldn't find it let's go back into the Cs project file solo error on the error message I've got the color code at the end of that file fix that let's try cleaning all again and rebuild it's reloading the files where the build failed let's try to rebuilding again let's try running this on the iPhone we'll see if it builds for the iPhone okay so there's one thing we have to do on the map since we changed the name of the file I've got app icon so I need to do two more things for the platforms since I've changed the name of the files being used the app icon I need to go into iOS go to the info p list and I need to change this app icon to the names of my files so app icon underscore Island underscore 1200 underscore FF 7700 now we'll see I'm thinking I probably need to have the same name for the icon fig that's ending in that ff7700 so what I'm going to do is I'm going to make this 1200 I'm going to change the name of my file here to get rid of that ff7700 and that means I also need to change it back in the CS project file so that everything is the same and consistent try that and while I'm here we're going back to the Android I want to go the Android manifest and let's change that app icon to underscore Island underscore 1200. save that file I'm going to save my info p list save the Cs project file once again after it reloads I'm going to clean and let's try running this on the iPhone 14. and I could have simply renamed those two app icon files to just app icon app icon fig we would have to go in and change the information in the P list and in the Android manifest okay so the project loaded seems to work I'm going to end let's take a look there's our icon app icon PNG and if I run this the splash screen doesn't work here in iOS as we saw previously I'm going to end that application let's go back and try this on the Samsung s20 now I got an error in terms of my targets I'm going to go back to my Android manifest and let's make sure we set the targets here so I'm going to do 12.0 and 13.0 and let's try this again and that's the common problem I see on the visual studio for Mac with the Android emulators it doesn't automatically set the target versions in the minimum version let's go ahead and set those I have on occasion see it run though without doing that it's now deploying the app to my emulator I see the icon has come up here zap icon SVG there's my splash screen works good on the Android side project works I'm going to close and then you see the icon that's how you can use PNG files for the icon memory you have to set the base size I'd make them large so 1200 by 1200 I think is a great size to develop an icon in for net Maui and of course make sure you're changing your Android manifest and your info p list accordingly if you just jumped into this video you can see all the videos from the.net my practicum playlist by clicking on the image in the lower right if you'd like to be alerted to future videos I create you can click my picture in the top right to subscribe to the channel

Channel: Stephen Hustedde

Views: 2,519

Keywords: .NET MAUI, C#, Cross-platform, Android, iOS, Windows, CIS165DC, Hustedde, Stephen Hustedde, NET, MAUI, Xamarin, Images, PNG, icon, splash

Id: 5cgrKARU3Bw

Length: 12min 20sec (740 seconds)

Published: Sun Sep 17 2023