Setting Up Your Ionic Project
If you guys are looking to generate icons and splash screen for your Ionic application, then this video is for you. You're going to learn everything in a single video with the help of which you don't have to look anywhere else ever after. So let's get to our computer screen.
At first let me explain you how to install Ionic CLI and to create a new Ionic project. This is the command to install the Ionic CLI if you are new to Ionic. And to create a new project, you can run this particular command. After running this command, a blank project will be created. You have to go inside the project folder and run ionic serve. If you do that up, it will open up in the browser. And all of the things you have to do it in your terminal, like the way I'll be doing right now. ionic serve and the project opens up in the browser.
Capacitor Docs: Icons & Splash Screens
If you're new to Ionic, you must be watching it for the first time. Now what I'll do, I'll go to the browser and go to capacitorjs.com by just searching capacitorjs in my browser. The first link that I get, that is capacitorjs.com. I need to go to the documentation, open the documentation. In the documentation, you will see if you just scroll down a bit, in the concept part, there is something called Splash screens and icons. You need to open that up. I have already opened it up.
Now here in order to generate the splash screen and icons for your Ionic application, whether it's for iOS, Android or PWA applications, it can be done using the @capacitor/assets tool. Now how to use it? We need to actually install it and have an assets folder. Earlier it was resources folder, now they have changed it to the assets folder. You need to have it in your root folder with this particular files whose size is going to be, for the icon it's 1024 into 1024 pixels, and for the splash screen it should be 2732 into 2732 pixels. And the format it can accept is jpg or PNG. So you need to take care of all these things and you will be able to generate all of it by using the command npx capacitor assets generate. We are going to look into this.
Installing the Splash Screen Plugin & Android 12 Caveats
But before generating it up, we are going to check how to work with this splash screen. For that, I need to go to the plugin section. If I open it up in new tab, you will be able to see that. Now here, if you just scroll down, you will see splash screen. You need to open it up. I have already opened it up. So I'm going to show you that part.
Now you need to simply install it. Once you install it, you are good to go with this. I'll open up another terminal here and paste it. Meanwhile, I'll get back and there is some information given about Android 12 splash screen API. Well here nothing much you need to do. This is just for Android 12. Mostly it is said that Android 12 splash screen API can be disabled on Android 12+ as is part of the Android OS. So you can just check this little information that is given here, which is not of much of a use. We are not going to implement that part.
But the below note is very much important because if you're using Android 12 and Android 12L devices, then splash screen image is not showing there. Why? Well, that's because if you're using any third party launcher like Nova Launcher or MIUI, Realme launcher, Oppo launcher, etc, then you might be facing those problems. In that case, you have to launch the app from the launcher itself. That means you have to open up the launcher and from there you will find the application icon. You need to click on that and then the splash screen will show up. That's what you need to do in order to play that. And why this note is given? Because the Android team cannot fix this problem. This is a problem with the launcher. So it can be fixed only by the launcher update, not by the Android team. And they have already fixed the problems in Android 13 onwards. So that's what you need to figure it out if you're using Android 12 and Android 12L devices.
Exploring Splash Screen Configuration Options
Moving on, this is how we use a splash screen: to hide, to show, and to show with a duration. Also, autohide option is also there. Apart from that, you can see all this informations that is given regarding spinners and all of the stuff. But the configuration is the most important part because we are going to work with the configuration part into our capacitor.config.ts file. And about each and every configuration, it is already mentioned here that launchShowDuration, for how much duration you want to show the splash screen in your application. By default it is 500 milliseconds. You can increase that if you want to. Then launchAutoHide. By default it is true. There are lots of features you can simply check out.
But the main is, okay, backgroundColor. Well, you work with the background color but the background color doesn't appear properly from Android 12 onwards because it will be a circular shape and with a white background behind that. That's a new way of showing the splash screen in Android devices, but the background will work pretty nicely in your iOS devices. And I think below 12 also it's going to show in the same way.
Now let's see the other things like androidScaleType. You want to center it, you want to center crop, you can fix it like the way it is mentioned here that it's used to scale the splash screen image. Does not work if useDialog box is true or on launcher when you're using Android 12 API. Only available on Android. So if you're using the dialog box, basically useDialog feature is also here available, if you're using this then that feature won't be available. So you need to make sure what things are you using which are most important to you. So these are some of the important configuration which I talked about.
Implementing Configuration in capacitor.config.ts
Now let's look at the implementation. This is how we can implement it into our application. Let's look into the main ones which we actually want to implement. So I'm going to show you directly by implementing it up. Let's go to our capacitor.config.ts. In the SplashScreen will be there where launchShowDuration I'm just giving two seconds with a background color of greenish color. Well you can change that. Let me give it to a reddish color because our icon is somewhat different, so I think this will be good. Now showSpinner I don't want to show any kind of a spinner. Small spinner will be there in Android devices. I want to show that along with that androidSpinnerStyle. Well I've just given small, small but actually if you don't show the spinner these things won't be appearing, so you can just avoid these two.
Apart from that, splashFullScreen to true and splashImmersive to true. Well splashImmersive basically means it hides the status bar and the software navigation buttons of the splash screen. Doesn't work on launch when using Android 12 API. This is also important because it's going to hide the status bar. And full screen, you can simply check it here where it is: 'Hide the status bar on the splash screen'. So it is going to hide the status bar and the software navigator buttons on the splash screen. So both have some different, different tasks. You can use any one of those if you want to, but I have given both to be true. That's okay. This is the configuration which I have done in my application.
First Asset Generation Attempt
It's time to look into the generating part because I already have the assets folder in my root folder of the project. And where I have this particular images for the icon background, icon foreground, same images I've given. You can just change it if you want to. Icon only, then splash dark and this is splash screen PNG. All right, so these are ready. It's time to generate it. Let's go for it. What do I need to do? I need to install @capacitor/assets. Let's copy it and install it here. Let me hit enter. All right, this is installed. Let's look into the next part which is to generate it. Copy it and just have it here. For installation you don't need the assets folder, but for generating you definitely need the assets folder. After running that, well we got some warning that iOS platform not found.
Well, because we haven't added the platform yet. It's time to add the platforms. And before adding the platform, what I'll do, I'll go to capacitor.config.ts, appId. You need to give a domain name in a reverse manner. Let me give techniques.com, then dot and your app name should be there. Like in this case let me give ionicSplash. There should not be any space or something. App you can give any name but it has to be a unique one. After that you can change the app name also if you want to here itself. You can change it later on also but it's a good practice to do it at the very beginning before adding the platform so that you don't face any kind of a trouble. Now this is ready. I don't want to change the name. Let me go for ionic build.
This is a command you need to run before generating the platforms in order to have the www folder here for the PWA part. This is a very important folder which is just created because this is going to be copied for our platforms in Android and iOS as it has all the JS files in a minified format because it contains all the files which we need to upload in the browser actually. All right, so now what I'll do npx cap add ios. This is going to add the iOS platform into our application. After doing that, I will also add the Android platform by just changing the platform name.
Now both the platforms are added. Let's check into that. These two are the platforms which are added, iOS, Android. We don't have to do anything here because in our project we don't need any permission or something of that kind to work with. So we can directly move ahead to the next step, which is nothing to do here. But yes, I want to tell you one more thing that if you want to generate for a specific platform, you can do it in this particular way along with this npx capacitor assets generate --ios or --android or --pwa, whichever you want to. And the sizes which are shown here, I have kept the same sizes for the splash screen and icons.
Let's get back to our application. It's time to check it into our Android and iOS devices. So I'm going to run npx cap open ios. It's going to open the application in our Xcode. Let's wait for it to open it up. Okay, the Xcode has opened up. And now let me select any device from here. Let me select iPhone 15 Pro Max and I'm going to hit the run button. Or you can wait for it to complete, but let me just try to hit the run button and see what happens if I do that up. Make sure you check each and every documentation if you're adding some more stuffs into your project like the plugins or something. Then you need to go to each and every plugin and check it out if you need any permissions for Android and iOS separately. Like in this case I missed out one thing for the splash screen. This is important: coreSplashScreenVersion which I need to pass. So I've copied it and I'm going to get back to the application. I'll go to variables.gradle. Just type Command-P or Control-P for Windows and go to variables.gradle file where you need to pass this. I'm going to search for it at first. We already have it. Okay. And what is the version? 1.0.1. So we have it actually by default, so we don't need to do anything else. If you don't have these things then you need to add it up. Make sure you follow the steps properly.
The Fix: Re-generating Assets for iOS
Meanwhile, I think our application is already opened up and it is up and running. Let me do one thing, close it and run it again so that we can see the icons and splash screen. We don't see the icon and splash screen here. Can you guess why? Because we actually run the command for generating it before building the platforms for Android and iOS. We need to run this command again to generate it properly for Android and iOS. Now it's going to generate it. There you go, look at this. This has generated the necessary things for Android, iOS and PWA.
It's time to check it once again. So I will run the same command once again and hit the Run button. Now if I do that up, I'm sure I'll see this icon for the application. This is the application which is almost about to launch and you see the splash screen here right? Also the icon is showing up. This is how the icon will show up in our iOS devices.
Building and Testing on Android
It's time to check for the Android one too. Let's get back to our application and run the same command but for a different platform. Let me trust the project, wait for the Gradle build to finish up. Now it is ready. I just need to select an emulator here and hit the run button. This is API 34. So the installation has finished up and our project is up and running. Now I'm going to show you the icon here. This is the icon for our application. If I click on it, you see this is how it is showing up with a white background actually. So that's how it works in Android devices.
Conclusion & Final Tips
And for Android 12 and Android 12L devices you simply need to go to your launcher, which is going to open up in this particular way, and you need to click on the icon. because if you open up directly from here itself, it won't show up this splash screen possibly. But if you open it up from the launcher you will be able to see something of this kind. So that's how it works. You can try the same things for your real devices also and it's going to work in the similar manner.
So you have seen how to integrate the icons and splash screen into our Android and iOS applications using the Ionic framework. You now have got the skill to integrate this in any of your application without having any trouble. Do hit the like button, share with your friends, and let me know in the comment section how you like this particular video. With that being said, I'm going to wrap up this video for the day. Thank you so much for watching and I'm going to see you next time.
