Initial Setup & Asset Preparation
Hello friends, a very warm welcome to Coding Techniques again. Today I'm going to teach you how to work with the custom icons and splash screen in Ionic 7. So the package has changed a little bit. Let's dive into that.
Take a look here. This is the thing that we have in the latest version of Capacitor because Capacitor 5 is also launched. Well, I am into the capacitorjs.com in which I've gone to the documentation, docs one, and then I have to scroll down and get into the splash screen and icons one where I find all this stuff. Now, I have already created a new project and I have already set up a lot of things here, but I'm going to show you in short what exactly we need to do. At first, you need to install it. So simply copy and paste it here, okay, in this particular manner. This will be installed. After that, you need to create this resources here where you need icon only, icon foreground, background, splash, and for the darker on the dark... if you're using dark theme, then I think for that, Splash dark is being used.
Now, these are the size for splash screen and icons which you need to have. Okay, so you can even generate for PWA file also because the icons will also be there in PWA, that is why. Now, this is how you can generate all these things.
Now at first, let me just show you the resources that I have. So I have created a resources folder here automatically, means I have created it manually, and within that I have all these five files. So I have just kept only one file for the icon and just renamed it twice, similarly for the splash screen also. If you want to change it, definitely you can. Now, I'll just show you the sizes here. So I'm going to move to this particular one and you can see the sizes here. This is the size for the icon one. This is the size, okay? And this is foreground one. These are the sizes. So I have kept proper sizes for each and every one, so we are good to go. After that is done, I'll simply copy because I don't want for like iOS, Android, or anything else. I want to put all of them.
Generating Icons & Splash Screens
Ladies, so I'm just going to pass it. I'm not going to use 'stage test' in here. So copy it and simply paste it here. Now, before that, remember you need to add the platforms also. So I have already added the Android and iOS platform using the command ionic cap... let me just show you, ionic cap add then iOS or you can go for Android. Okay, so just add both of them if you can, otherwise go for the respective platforms. Once that is done, I'll simply generate it, everyone. So it is going to generate for iOS, Android, and PWA. That's going to be done. As you can see here, it is being done. All right, so this is how it is able to generate all the files for each and every one. That's great, in fact. All right, so once that is done, what else we need to do?
Understanding Android 12+ Splash Screen Behavior
For Android 12 plus, it is said that it is going to show up not the full screen of this splash screen one, it is going to show a circle one, a small icon one with a colored background. That is what it's being shown. And Android 11 and below, it can show the full screen works. That is what it's being said here.
Now, there is an important thing which I want to highlight before I go ahead, for which I have gone to this splash screen plugin of Capacitor. This is the one where for Android 12 something is mentioned because many of you are facing problem with the Android 12 one. And it is said here, where it is... this is the one. This is the note that is being given by the Capacitor team, in which it is saying that on Android 12 and 12L devices, the splash screen image is not showing when launched from third-party launchers, because you have launchers by default in many mobile phones. That is why this is a problem that is coming up.
And in order to resolve that, well, you can simply talk to Google regarding this because they don't have any fix in Android 12. That is why Android 13 is being launched with this resolution. Okay, they have said that. So they won't, and Google won't be backporting the fixes to Android 12. Launchers can do something, but there is no such thing that even Capacitor team can help in fixing this issue with Android 12. Now, moving back to our application or the stuff that we were doing.
Configuring Splash Screen Options
So this is the stuff which we need to implement, but I will show you the capacitor.config.ts file where I have already set up this splash screen configuration, in which I have given the duration of two seconds. The launch duration is it will stay for two seconds and then it will go away. Background color I have given, and some I've just hidden the spinners and other stuff. So you can just look into all of it in the documentation of splash screen if you want to know more about it. But the most important thing which we have already implemented as of now, it's time to check it for each and every platform because we don't need to give anything else for Android and iOS, I suppose, right? So... okay, capacitor code.
Now here it is said that we need to pass this stuff in our styles one, but I think we already have that. Let me just search for 'styles'. This is the one in which we already have it. If you don't have it, you simply pass it there. Okay, copy and paste it here. Well, name is, I'm just keeping it as 'splash', I don't want to change it. If you want to change it, definitely there is the process to do that. You will just slowly give your documentation regarding that, it is given. Okay.
Now we don't need to do anything else. I think we are good to go ahead with this. So let's move ahead. Now, in fact, you need to remember that useDialog... I have already explained in the earlier custom icon splash screen video, but I'll just explain it again if you are a newcomer. That useDialog cannot be used. Well, it, first of all, it is only available for Android and it doesn't work on iOS, remember that, only for Android. And you cannot use some of the things parallelly. So you need to just check each and every feature explanation that has been given before applying it up, otherwise it might face some problem. So after doing all these things, I think we are good to go. We don't need to set anything.
Testing on Android
Let me just check the iOS one also, whether everything is fine there or not. Let me just search for info.plist file. I haven't done anything here, so I think everything is good to go. Now, let's sync up everything. So ionic cap sync just in case we missed out something, that is why. And you need to remember before adding the platforms you need to run ionic build. So if you haven't run that, you can still do it, okay, before syncing it once again. If you face any error, definitely run ionic build at the very beginning. Now, ionic build if you haven't run, you can simply write... because I already have the www folder here, I didn't run it. But if you don't have, run ionic build and then again sync the project in this particular manner, then the resolve will be done. Now I'll open up in Android one, so ionic cap open android. Let's do it. So the Android Studio is opening up. Let's check it out whether it works here or not.
So let's try to run it up. I have Pixel 3, okay, let me run it here. I think this is Android 13. Let's run it. All right, okay, you can see the splash screen is coming up, but the background is not showing. So if I just close it, you can see the app icon is also showing up. So in Android, it is working fine.
Testing on iOS
Now let's go for the iOS one and check it out there. So ionic cap open ios, check it there also. Okay, the Xcode has opened up. I'll just hit the Run button. Now, sometimes it doesn't show in this simulator for iOS, but I think if I run it in a real device, then it's going to show up. So that happens sometimes. Let's wait for it and see whether it works there or not. Okay, the build is done. It is launching the application. All right, the app is opening up, and you can see the splash screen is coming up. That's great, actually. So if I just check the icon, you can see the icon is working fine. I think this package is smoother than the earlier one because in the earlier package with Capacitor 4, I think we had certain things which we need to do ourselves. So I think in the latest package, it is much more easier to work with, right?
Workaround for Android 12 Splash Screen Issue
And for Android 12, well, if you just want to check where it is... Android Studio. I think I have some of those in Android 12 maybe. Let's check in all of all the emulators which I have whether everywhere it works fine or not. You can see I see a blank one. That means it is Android 12. How do I confirm that? I need to go to the device manager where you can see this is the one which I ran, which is 12L. Okay, Android developer, that is why it is not showing up there. And in the Android, I want to show you very interesting things for Android 12 and Android 12L. So let me run the application here. Now let me hit on the Run button, or should I run it directly from here? Because I need to run the application, right? And let's minimize it. Okay, the application ran and you don't see any splash screen, right?
Now what am I going to do? Let me just remove this application or just cut the application, okay, from the stack and you open it up directly from this icon one, that is from the launcher one. If you do that, you see the splash screen is showing up. That is how you can work around with this particular one, because there is no other option to work with it. Okay. Now again it is working. So this is how Android 12 problem can be solved. Well, you need to close it once and then open it up again using the launcher. The problem might go away. So that is one of the things which you can try. I think that might work because I was just trying it up and it suddenly worked for me. So this is one of the things which you can try, okay, for Android 12 and Android 12L.
Fixing iOS Splash Screen Sizing
So now for Android you have seen how exactly we have worked, for even Android 12 also. Now I'm going to show for iOS one what exactly I have done to resize the images and everything. So after generating all the resources, what I have done, I went to the website called Image Gorilla, and this is the link that you are getting. At first, open it up. It's going to show it in this particular manner. Click on the 'Generate your icons and splash screen'. Then you will come to this particular one where you need to select your icon and images. Oh sorry, icon and splash screen. I have only gone for splash screen because we had a problem with splash screen only, that is why. So I have just passed this splash screen which we had, okay? And then what I have done, I have selected which all resources I need. So I've gone for iOS and iOS Ionic just to check whether the files are same or not. So I just checked that and there was a button called 'Kapow'. Click on that and it's going to start generating and you will get a download button afterwards. Click on that and the files will get downloaded.
Now I have already opened up the files here. This is the one where I have the ionic folder and the iOS folder. Okay, within the iOS folder, I have these images from which what I have done, I have just passed this particular one to be on the 1x, any appearance, okay? Then this is for 2x one, same for the dark mode also. And for the third one, well I have passed, which was the one? I think I have passed any one of those. Okay, so this is how I have designed it up. And now I think it's going to look nice. Now let's check for... I think also, what exactly do we have in the resources one? So you have all the files here also for 2x iPhone, then you have for 2x iPad, iPad and everything. So you can design for iPhone, iPad differently also if you want to. But I am just going for iPhone right now and there is a launch screen which I can see how it's going to look like. This is how it's going to look like right now, which is great in fact. So that's what we need.
Final Verification & Conclusion
Now if I click on this play button, let's see what happens, whether do we get the same thing or not in this simulator. Let me open it up. All right, it is showing us a proper size of the splash screen. That's what we needed, right? So it is working as expected, I suppose, and I am happy with that. All right, it took some time, but I think next time it's not going to do that. Close it and run it again. Now this time it is fine. So this is how I have shown how to work with the Android and iOS for custom icons and splash screen with specific sizes, even for Android 12 also. You can work with a launcher one directly by clicking on the icon. That is also I have shown, it works. Okay, you can just try it up. Let me know in the comment section.
So I hope you like this particular video and it was helpful to you. So with this we have successfully implemented the icon and splash into our application. So I'm going to sign off for the day. And if you're new here, please do subscribe to the channel if you haven't done that, and hit the like button if you like this video, friends, if you haven't done that. And I'm going to see you very soon. Till then, stay safe, stay healthy.
