.NET MAUI 02D - Changing the AppIcon and SplashScreen (SVG)

foreign project has a lot of files some of which are hidden from us or not included in the solution Explorer I'm going to open up this image demo folder that I currently have opened just look at the contents of the folder we have our image demo.solution file and then we have our main subfolder and inside that subfolder there is a CS project file imagedemo.csproj and you can also see files that may be hidden by checking this hidden items but that file whether it's hidden or not does not show up in the solution Explorer in Visual Studio 2022 on the Windows side and it's even a little more buried on the Mac side I'll show you how to get there in a minute so to get to that file you can double click on yours on your project name inside the solution Explorer and there then is that CS project file now you want to be careful coming in and changing things here because this can really mess up your program but I want to point out this is one of the files that's that's created in the background and it's modified in the background as you make changes to say some of your resources we're going to be talking about how to change the icon and how to change the splash screen I'm going to show you that in this file there is a line here for basically setting up the Maui icon and there's also one here if you're saying splash screen and sometimes we do need to make changes of this to make it work so I just want you to be aware of that that's how you get to this file on the Windows side now let's take a look at the Mac side the Mac I created a new.net my project so everything will look familiar here this is the simple hello world template I'm going to come up to the top of my project into a control click and I'm going to come down to display options and say show all files and when I do that I see some files are kind of grayed out these are the hidden files and one of those here is app icon SVG that was the name of my project we're going to start showing you SVG files in terms of changing the app icon and the splash screen and then we'll look how to do with some PNG files in the next video so I have this CS project file that's that is hidden from view normally but now I can open it up and that will look familiar what we had on the Windows side again you're going to find some things here in terms of the Maui icon in terms of the splash screen and we may come in and make some changes to those for now I'm going to run my project on an iPhone emulator and this is just the project out of the box using the hello world template and there's my project I'm going to stop it and let's take a look at the emulator here here's my project app icon SVG and it's got the.net icon this is the default icon just saying.net on a purple background in the next the next project to work on is the TV Western so I created an icon for that and then changed the icon you see it shows up here in my emulator so we're going to look at how to change this to something that's a little more interesting and less generic in our resources folder we have an app icon folder and it contains two files two SVG files app icon and app icon SVG now since these are SVG files I'm going to open these with Adobe Illustrator so let's take a look at the app icon so in Adobe Illustrator I see the file and we can look at the layers and see the layer contains basically One path and that is a rectangle that is this purplish color that's our icon that seems a little strange to me well we need to realize that Maui icons are built in layers and there are two essential layers one is the app icon which is really just the background color and then we had another file called app iconfig I'm going to open that one up also in Adobe Illustrator now that looks even more cryptic because it's just a white box well really it's not if I point my mouse over this you'll see there's the N there's the N there's the T there's a little dot if we look at the layers it's comprised of four layers and they're presented here on a white artboard if we were to add a new layer I'm just going to drag this layer to the bottom can take the rectangle tool and create a rectangle encompassing that layer and go to the properties let's change the fill color to more of a gray so we can see what's on that background so we have white lettering on really a white artboard which really is transparent when we bring it in so that dot net is appearing as a layer on top of the eye of the app icon purple layer that we had we can also add a background color behind that because iOS does not allow anything to be transparent as far as icons so if you happen to have something something transparent in that app icon we can add a color behind that that would fill in those gaps we can also add a color on top of this to tint everything so that's all done in that CS project file and in in the case of this template they did not do that did not add a tint that'd be example that'd be the advantage of having something white here if you wanted to tint it those are app icon files and SVG since they're vectored scale very very well and it's recommended that you use SVG files for your app icons and for your splash screen now the splash screen file is Splash dot SVG and in the temp file these splash.svg files the same as the app iconfig SVG and they set the background color in the code of the Cs project file so if we look at the size we can see the information these are 456 by 456. in size so if we wanted to change the background color we could do that here and what I'm going to do is go into the layers I'm going to select the path with the selection tool I'm going to go into the properties and I see the fills being this purple but I can click on that and I can change that maybe I want it to be red so I'm going to just accept that and I'm going to go ahead and close that icon that file I'm gonna say yes I want to save my changes then we go back to Visual Studio let's run this again well before I do that I'm going to change your icons your Splash screens or adding new files in you always want to clean your project and then I would suggest also rebuilding of that clean allows the new files to be added into our CS project file and now if we try to run this so let's take a look at the icon that comes up and again I'm going to stop my project now it still has the purple here one thing we should probably do is delete that file um from our emulator and on the Mac you can hold the mouse button down and you'll get this remove app on the Android emulator you can drag the file and you'll get an uninstall button at the top so you can drag it to and delete it okay let's try running this again now we've gotten rid of that and see if the icon changes you notice now we get the kind of reddish color for our icon and there's our project running I'm going to stop the project and we're going to modify the icon the the top layer our foreground layer which is the I app icon fig file and we're going to add a icon of for an island since it's a net Maui file let's add an Ike uh Island icon I want a palm tree and then maybe a sun setting so we're going to go find a palm tree I mentioned previously that public domain vectors.org was a great source for SVG or vector graphics and there's another one I also want to point out to you and that is SVG repo.com so I want to do an icon that has a palm tree and so an SVG repo I'm just going to search for palm tree and see what we get so a bunch of different choices there I kind of like this one here I'm going to click on it and I'm going to say download the SVG vector we're going to use this palm tree in modifying our app icon as well as our splash screen illustrator I have the app iconfig file and the palm tree that I downloaded open so I'm going to go to the palm tree and notice this comprise a bunch of layers that make up that palm tree I'm still going to take these the selection tool and just drag a box around all of it so that's that will select the entire palm tree I'm going to copy it I'm going to go to my app icon file and let's just create a new layer and I'm going to paste the palm tree into that layer and I want to resize it I think it's about where I want it I'm going to get rid of that.net path actually just delete that whole layer and I'm going to add another layer in fact I'm going to delete the gray layer that we had as well don't really need that so I add another layer it's going to go behind the palm tree I'm going to take the rectangle tool I'm going to create a rectangle behind the tree and we'll go to the properties and go to fill I'm going to make this an RGB and we'll make that kind of a sand color I'm going to do another rectangle and this one we will make more of a blue for our ocean go back to layers I'm going to add another layer this one behind the sand in the ocean and I'm going to deselect the sand go to the ellipse tool make sure I'm on layer four and here I'm going to add in a circle it's going to go behind the c and the sand but I want to make this one yellow this will be our sun so there's my icon I'm going to close it save it and bring back that app icon SVG or our base layer of the color because rather than red I'd like to make this more of an orange for our sunset now I want to remember what this color is so I'm just going to change this a little bit let's do dd77 33 or maybe two two dd7722 it's easy to remember that's going to be my orange shade I'm going to save my icon and let's go back to visual studio so I'm going to go to that CS project file I'm going to change the color for the icon to be dd7722 the files are still the same do the same thing here for the splash screen and we're going to change the splash file as well so let's go to our splash and open that with illustrator I'm going to go back and open go back and open the app icon fig file because what I want to do is I basically want to get all of our information here for the icon copy that let me go to the splash file let's open that up let's get rid of the.net and then I'm going to paste in the information from the app icon fig file I'm going to save my Splash file those other files let's go back into visual studio and now I'm going to clean my app and let's run it on the iPhone and actually I should have gotten rid of the project before so I'm going to stop let's go back to the emulator let's get rid of this project and now let's try writing it again from Visual Studio so if you saw the icon there now one thing I've found with the iOS emulator is when you mess with the splash screen sometimes it doesn't work it works much better on the Android side and that's definitely true when you bring in a PNG for the splash I've read in some of the forums that other people can't get it to work either I was hoping with changing the splash screen that it would I've done some experiments on another computer and it did work even with another SVG file it doesn't seem to work in this one but let's let's end our file let's go back and look at that icon and you can see we have our island with the sand and the sea in the Sun and our orange background color let's run this on the Android emulator so I've got a Samsung s20 emulator now a couple errors that frequently come up with the Android emulator for me is I have to make sure I go ahead and set the target for the API and then sometimes deleting the reference in the Manifest file for the icon and then adding it back in can also make a difference let's see what happens here as far as building so far so good here's my emulator there's our splash screen notice it does a circular cutout a round icon that works I'm going to end my application and here is our icon for the app icon SVG it's a little bit big in this case but it is our icon and so we could do some things as far as scaling within the app icon so I could add a scale equals let's say 0.75 being quotes so once again I'm going to delete my file dragging it to uninstall on the Android emulator say okay and let's run this again there's our splash screen stop running and go back and look at our emulator I really didn't do anything as far as our icon what we could do is go back into the icon and make that palm tree and the Sea and Sand a little bit smaller so we get more of the orange behind it but that's how we can change the app icon and the splash screen for net Maui project using the existing SVG files and just changing them 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: 727

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

Id: TBWEiMGbQzo

Length: 18min 22sec (1102 seconds)

Published: Sat Sep 16 2023