Introduction and project setup
Hello guys, a very warm welcome to this particular video. In this video we are going to learn about the custom icons and splash screen, how to create that using Capacitor and what is the best possible ways and even how you can customize that up. All right, so let's get started with this particular video. So at first I have opened up a new project. I've created that new project basically using this particular commands, which is highlighted one. So this is how I've created a new project and when it is asking me for creating a new Ionic account, well, I didn't go for that because that is Ionic Appflow which is a paid version. So I didn't go for that and I simply jumped into the main code by opening it up in Visual Studio Code.
Preparing resources folder and installation notes
And after that is done, well, I have created a folder out here. You can see, let me just show you. This is the resources folder where I have icons and splash PNG files. And why I have done that, let me just show you right now. So for showing that up, I need to open my browser which is already opened up out here and I have opened up capacitorjs.com within that the docs. So out here in the splash screens and icons, you have to go out here and within that you will see that the what these are the instructions for creating splash screen and icons. So at first you need to install this particular one. If it is not installed, you need to install it globally. So I've just copied that up, didn't I? Let me just click out here if not clicked and let me open the terminal directly using control plus that key near one. Okay, what is this called? I just don't know. You can just get it from here also using these commands. All right, so what am I going to do out here? Simply paste the code and hit enter. Now this will work with Capacitor pretty nicely. For Cordova, I think this is pre-installed, so you don't have to do that stuff, right? So you just have to run Ionic Cordova resources command as far as I remember. So you just have to do that for Cordova and for Capacitor you have to run these commands. Now this is done, what is the next thing that I need to do? The next thing is to create the resources folder and have the icon and splash PNG out here, which I already have in my resources folder. So, I don't need to do it. And what images I have taken, let me just show you. I'll reveal in finder. So, this is the Majestics image, which I have already taken because I have the proper size of it. So, icon size is 1024 into 1024 is the dimension and for the splash, I have Okay, how much it is? 2732 into 2732. That's the size which I prefer for icon and splash out here. So, once that is ready, what is the next step we need to follow out here? We need to follow this particular step. So, I need to run this one by one for Android and iOS. But before that, I need to create the Android and iOS platforms out here. So, for that, I have to go to the capacitor.config.ts file and change the package name, which is very much necessary. So, com.techniques. Let me give a flash and icon app. Any name you can just give it out here. And this one, let me keep it as custom app only. And now, let's add the platform Ionic. But before adding the platform, I need to run a command called Ionic build to get our www folder. Otherwise, this will not work.
Now, we have our www folder getting ready. Where it is actually? In the SRC folder, we have it. All right. So, once that is done, not in the SRC, outside of SRC only it is available. So, it is done. Now, I can simply go for Ionic cap add iOS. And you can see this is added. And out here, it is shown that the status bar is already plug-in is already added. So, we need to add the splash screen one for using the splash screen. All right. So, remember that. Okay, I'll do the same for Android also. Let's do it. Meanwhile, that is being done, let's see. Okay, I need to run these particular things to generate the resources for Android and iOS. All right, this is also ready. Now, what I need to do I need simply need to run this command. So, let me simply copy the first command at first and paste it out here. Hit enter. All right, generated 47 resources for iOS, 21 resources items to iOS. Copied. All right, that's done. Now, let's go for Android one. Copy it up. out here, paste it. Hit enter. Okay, there is an error. What is this error talking about? Error occurred while copying resources Android icon. Okay, let me try it again. Again, the error occurred. So, now how to get rid of this error? Well, in order to check the error properly, let's go to our Android Studio. So, I'll open it up Ionic cap open Android. All right, Android Studio is opening up. Trust project. Okay, now out here in the S resources folder in the drawable one, there are issues with the IC launcher background and foreground. If I just double click on this, what is wrong? It is not taking up.
Fixing Android adaptive icon errors in Android Studio
So, in order to resolve this problem, let me just do one thing. I'll right click on RES folder and go to new, then image asset. In the image asset for the foreground, okay, I'll have the same name only. Image I will collect it from from the location of my project. I have taken the icon and I'll select it up. Now, you can see it is selected, correct? Trim, yes, we can trim it up if you want. If you don't want, you can go for no. Trimming I think is a better option. We can change the color at the back end. Means the background color we can change. Background layer color you can change this particular color to the one which we have. I think this color is will be better. This is the hex code for that. You can simply type this hex code if you want to. So, I have taken this particular color and I'm happy with this particular color. Now, this is looking nice, right? So, let me just go for next. And if you want to do anything else, you want to zoom or something, you can just resize it up from here itself, okay? But, I don't think I need to do that. I'm happy with this stuff only. If you want, definitely you can just go for resizing it up in this particular manner. And there are a few more options. Well, you can just check it out. Okay, so I've just resized little bit. Let's go with this. And I can with the same name already exists and will be overwritten. We want that to be overwritten. That is why I'll just create that. Okay, let's do it. This will be the size. I'm okay with that. Now, sometimes what happens, you have to do it twice. At the first go, it is not taking it up. As of now, I don't think still it is taking it up. If I just hit on the run button also, it will give me error. If you want, let me just try it up. For the splash, there are no issues. I'll just show you that part also. Okay, do you want to add the following file to get? Well, not now. Let me remove it. All right, Android resource linking failed. It is saying that. So, when we get that error, definitely it is related to the image asset only. I'll go again to the image asset and out here, again I'll go to the background, change the color. Okay, let's go to next. And this time, you can see there are hardly some errors this time. Earlier, we had lot of red marks, right? This time, it is very less and I think this time it's going to work. So, let's go for finish and add this up. I'll hit on the add button. I suppose this time there won't be any problem. Let's go for it again. Let me hit this run button. Okay, add files to get. No, I think I should cancel it. And you can see build successful. So, there are no issues with the icons now. Everything is good to go. Now, let me just show you the drawable one. So, I'll just open it up in finder. Let's go for that. So, it has opened up and out here, you can see simply all the splash screens which are changed. You can just check click on this and you will be able to see properly everywhere, right? Everywhere this is looking fine. Correct? Out here, if you are not happy with this, you can simply resize that up little bit with the same dimensions which is given out here and you're good to go. So, this is what you need to do simply. I hope it's pretty clear how you exactly need to do all this stuff. So, this is the only thing you have to perform out here for the custom icon and splash screen and you're good to go.
Installing Splash Screen plugin and configuring Capacitor
So, now what I'll do, let's open this up again in our emulators and simulators. Let's see what happens. Do we get Do we able to see the splash screen or not? So, I'll just rerun it up. No, cancel. I don't want to terminate. All right, it didn't show any splash screen out here. Let's try for iOS at first. Let's see whether it works out there or not. So, I'll open it up in iOS. Okay, the Xcode has opened up. Let me maximize it and out here, what am I going to do? Let me just go to the app folder at first and within that we have another app folder and out here, assets. So, in this, if you click on the app icon, you will see all the app icons which are pretty nicely set up. And for the splash also, it is pretty nicely set up. Now, let's run it in iPhone 14 Pro. Let's go for that. Just focus if you able to see the splash screen or not because the icon will show up for sure. The important thing is the splash screen. Okay, it has opened up but no splash screen is showing up. Why is it so? Because we haven't installed the plugin for splash screen. Let's go for that and then see whether it works or not. So, let me open the code and in here, in order to work with the splash screen, let me just go to the plugin section and out here, just scroll down to the splash screen one. Install it simply to go ahead. Copy, paste it out here. Once that is done, we need to go ahead for the second one. Where it is? Too many things are opened up. Copy it and let me close it for the time being. Terminate. This one also, let me just close it. And even Xcode also, I'll just close it. Stop. Fine. Now, it is good to go. So, let me just run the second command. Okay, this is also done. Now, what I need to do next? Let me just scroll down. And there is one simple configuration which I'm going to apply out here, which will be this particular one in the TS file I'm going to apply. So, capacitor.config.ts file we I'll simply apply this stuff and we are good to go. So, copy this up till here. Copy I will go to this particular file and in here, {comma} and paste it. Now, in the splash screen one, launch show duration. So, it is going to show the splash screen for 3 seconds. If you want to reduce it, you can just have it out here. You can just go for 2 seconds or 1 second as you want. Then, launch auto hide. I've set it to true. Means, by default it is set to true out here. Now, the background color, well, you can simply change it or if you don't want to give it, don't give it any color out here. Now, the splash screen name, by default it is splash only, which we already have it. Then, scale type center crop. Okay. So, let me see the default one. So, out here So, Android scale type is by default fit XY. So, I'll keep it as it is. I won't change it. So, I'll just comment this up. Show spinner, I'll not do anything. I don't want I let me keep let me just have the show spinner as false. And spinner style, well, I don't need it. In fact, this one also I don't want. Color also I don't want because I'm not showing the spinner. So, why to give any other thing out here? And full screen true. Okay, fine. Immersive, let me keep it as it is. If you are not sure about anything, you can simply check it out here. You will get to know what exactly it means. Okay? Such as this one, hide the status bar on the splash screen. Doesn't work on launch when using Android 12 API. Only available on Android. Okay, fine. Immersive hide the status bar in the software navigation. Okay, that's the only thing. I'll just skip it. And the layout name, uh launch screen. Okay, fine. Use dialogue. Well, it's only available for Android I suppose. Only available for Android. So, even if you don't give by default, it is not taking anything. So, why to give any dialogue? Do we need that? Layout name also whether it is needed? Only available for on Android. So, let me just do one thing. I don't need this two. I'll simply comment this out because I'm using for iOS and Android both. So, I don't need that. Now, simply sync the project again using Let me go for Ionic cap sync. If in fact this that will also work. Ionic cap sync. Now, the syncing is done. Let me open the project in iOS at first. So, I'll just run this particular command Ionic cap open iOS and it has opened up. Let's go for the run button. Let's see this time what happens. Okay, it is launching and you can see the splash screen, right? So, the splash screen is showing up but it is not showing completely. Why? I just don't understand. We have given the proper size for it. Still it is not showing that up. I don't really get it. Maybe you can reduce the size or you can go for center crop. I think that will be better. Let's Let me just try it once, okay? What I'll do out here is full screen. Okay, that's fine. But, Android scale type center crop I think will be better and this background color let me just give the red color out here. Maybe that will be working for us. So, what was the configuration? I just completely forgot. For the time being let me keep it as FFF only. Later on you can change the red color one. The hex code. So, I have to just check it again. I don't want to do that right now. For the time being let's try with this particular stuff only. Let's go for syncing again and then I will open it up in iOS. All right, once it is opened up I'll run it again. Replace the application for sure. Okay, still not working properly. What should we do next? Now, meanwhile let's try for Android also at first.
Testing on emulators and device; iOS scaling issues
Okay, let me just cut this and run this particular one in the emulator. Let's see if it shows up out there or not. Okay, it is not showing up in the emulator. Let me check it in the real device. In the real device, I have already seen earlier also it works, but it doesn't work in the emulator. That's a big problem. So, I have to connect my Android device for checking that up. All right, now my Android device is connected. Let me hit the run button. This is showing up out here. So, let's see whether it gets installed properly or not and do I see that or not. So, let me just spin up the recorder also. So, now the iPhone is showing up and if I click out here, see what do what it shows. I still don't see this or do I see the splash screen? It is the smaller one actually. It is center crop. So, it is showing at the center. All right. So, if you just comment this up, then it's going to take XY fully and that that works for Android properly, but for iOS, I just don't understand why it is not showing up. I just need to see the documentation for that because the scaling one only available for Android. All right, that is why it is not working on iOS. I just covered that. But, for iOS, what exactly we can do? I just don't understand because these things works for iOS pretty nicely, but the iOS is taking different sizes which is not great at all. This one is also available only for Android Android this one Android Android. So, all of them are available for Android. For iOS, what exactly we need to do? I just have no idea regarding this because it is showing properly in our Xcode and I don't see any problem in the assets one for this flash. You can see that, right? Now, we have no other option, do we? So, guys, I actually found a solution out here. Let me just show you. You can see out here, we have now iPhone and iPad also. How I got that? Well, you just click on the splash screen and you will get this option along with the universal. Earlier, we only had the universal one. So, I ticked iPhone and iPad also. And when I did that, this were coming up, but the images I just kept it out there. Let me just show you how I did that. So, for doing that up, I went to the browser and out here I simply searched for image gorilla app tool. Now, in this, you can generate these splash screen and icons for different sizes for Android and iOS. So, what I did out here, generate your icons and splash screen and for the splash screen, you need to pass the size 4096 into 4096 and for icon, you need to pass 1024 into 1024. So, I simply changed the size from 2732 into 2732 to 4096 into 4096 because I already had that size. So, I just transformed it. I'm not sharing the code out here, guys, for this particular video because it is pretty simple to understand. I haven't done anything extra out here, so I won't share the source code. So, you simply do that up. If you have any query, let me know in the comment section.
Generating iOS launch images and final testing
So, out here I have simply selected this particular one which is having the same size. When I selected it up, you can see there are a lot of options that are coming up. I just went for the iOS one because for Android we have already uploaded all the stuff. We don't need to do anything for Android. If you want some other sizes for Android, definitely you can select that also along with the iOS one and you can go ahead with this, but I don't want that. So, I have simply selected and I'll hit on the cup out. So, when you hit that up, it will show you the downloaded button. If I just do that up again, now you see the downloaded button, right? So, when you get this downloaded option and you click on it, you the resources will get downloaded in a zip file. Once you do that up, when you extract that particular zip file, then you you will get something called the bundle folder. And within the bundle folder, we have the iOS ones and in here the launch images, I'll go inside that and you have a lot of stuff out here. So, I'll just select as list, okay? Now, what have I done for the iPhone, this is the iPhone one, iPhone 1X, I have passed this particular image, just drag and drop. Let me do it again, drag and drop. That's it. And for 2x, I have just paused this particular image. And again, for 3x also, I have paused the same image only. If you want to pause something else, you can just try it up. Now, for the iPad, I have paused a different one. And for universal, well, we have paused the same things only or we I haven't done anything. If you want to pause the same sizes, you can just do that up, which we did while generating the resources altogether. So, I haven't done anything out there. So, for the iPad one, well, uh which one did I pause for 1x iPad? iPad 2x? I just forgot which one I paused. Let me just check it again. All right, iPad 2x. I think this one I paused it out here. And for iPad, this is the one for 1x. So, these are the sizes which I have just drag and drop, and that's it. So, you This is how you can get the resources if you want to. Once that is done, everything is good to go. Now, I'll simply run this up in iPhone 14 Pro. Let's see what happens this time. I'll replace the application because tried it once, so that is why it is showing that up. And this time, let me just check it out. Okay, you see the splash screen is showing up really nicely in a proper size. So, there is no problem now. The oversizing or the stretching one is gone. So, this is how you can solve this problem and get rid of this particular stretch one. So, I hope you have understood this particular stuff. So, with this, our splash screens and icons are generated successfully for Android and iOS. And this is it for this video, guys. So, I hope you like this particular video. If you like this video, please hit the like button. Do subscribe to the channel if you haven't done. And do check my courses, which links are available in the description. And with this, I'll wrap up this particular video, and I'll see you in the next one. Bye-bye. Woo!
