Introduction
Hey guys, welcome to another Code Swag video. In this episode I'm gonna show you how to create a custom launcher icon on Android using Ionic Capacitor.
If you want to know how to do the same for iOS or using Ionic Cordova, then you can check out the links in the description below. But for this one, we're going to see how to do it using Ionic Capacitor. So we're going to create an icon like this one in the top left corner that you see here for my app called App Icons. And you can drag it and place it on the home screen, and that's gonna launch our app. So let's see how to do this.
Creating a New Ionic Project
Okay, so we're gonna start off in the terminal and we want to install a new Ionic project. So we're gonna do that with the command ionic start.
And we're going to select Angular for our framework, but it doesn't really matter whether you use Angular, React or Vue, it's going to be the same process for creating your icons. So let's call our project App Icons.
And also it doesn't matter what template we select. I'm just gonna go with blank. And it's gonna download and install the blank starter template. It's going to ask us as well if we want to integrate Capacitor with our app. We're going to select 'y' for yes and then the download is going to commence.
So once again, this process works using any framework—Angular, React, or Vue. It doesn't really matter because the process of creating an app icon is the same throughout. If you want to know how to install Ionic, you can check out the video link showing up in the top right corner of your screen right now, and I'll show you how to set up Ionic in the command line and also with Android Studio, which is what we're going to work with in this video. So if you haven't got Ionic installed and configured with Android Studio, check that video out.
We're going to be asked if we want to create an Ionic account. Not now, it's not necessary. And our application has been created. So cls is going to clear the screen, and then dir to see the folders. And there's our App Icons folder. So we want to change directory into App Icons.
Okay, so on to step two.
Which is we want to initialize a Capacitor native Android project inside our Ionic project.
So first we have to run ionic build. Okay, and after running ionic build, I'm going to clear the screen. And next I'm going to add Android to our Capacitor project. So we'll do that with the command: ionic cap add android.
And that's going to download and install the Android dependencies.
Okay, once the Android dependencies are installed, the next step is to open our project in Android Studio. We do that with the command ionic cap open android.
Running the App and Viewing the Default Icon
Okay, so our project is open in Android Studio and I'm just gonna open these files so there's our manifest. So this is our project in Android Studio. So the next thing is we want to run the application in the Android emulator. You can come up here and select Run and then Run App or click this play button right here.
And that's going to initialize the Android emulator and start up our application. If you need to configure the Android emulator, you can click in the top right of your screen for the link on the video to do that. Okay, so we have our application running in Android emulator. If I go back to my home screen, you'll see we have our App Icons application and it has the default Capacitor app icon. So this is what we want to change. We want to create a custom app icon for whatever we want. Okay, so that's the process that I'm going to demonstrate to you now.
Finding and Downloading an Icon Image
First, let's go to the internet and visit a website where we're going to get an image that we're gonna use for our app icon. Okay, so we're gonna visit a website called flaticon.com.
And flaticon.com is a great resource for giving us vector icons and all kinds of other images. Okay, so basically we search for whatever we want. I like ice cream. I think everyone should love ice cream, so that's what I'm going to search for. And our app icon is going to be of ice cream.
Okay, so our search returns 13,239 images of ice cream. And I'm going to select... I'm going to select this one. Okay, so this is the image that we're going to use for the icon. So you can download this in PNG or SVG format. I'm going to go with SVG format, and I want to have the size 512 pixels by 512. So it's going to be a free download, and you must remember if you're going to use it for free, then you have to credit the authors. So I should add this link as well in the description.
Okay, so we have our image downloaded. It's called ice-cream-stick.png. So let's head back to Android Studio.
Generating the Icon with Image Asset Studio
Okay, so from within Android Studio, you want to come here into our application and inside app we are going to look for this res folder. So you want to right-click on this and under New, you want to select Image Asset. And then there's going to be this Image Asset dialog window.
So you want to come here where it says Source Asset. The type should be Image and the path, you're going to click that and you want to browse to the location that we downloaded that image. So that image is in our downloads. So we need to go to our user, my user is Code Swag, and downloads. And inside downloads, this is arranged in alphabetical order, so we want to go to 'i' for ice cream. And where is it? Yep, here it is: ice-cream-stick.png. And then here is the preview window. It's going to show us what the icon will look like in all the different size and shaped icons for all the different Android devices. So this is what it's going to look like on the Play Store, the round icon, the legacy icon, all the different versions. So if you come down here to Scaling, there's an option to trim. Let's see, when we say yep. So if you say trim, it's going to make sure that it fits into that circle. If we say no, then it just shows the proper size. You can use this to resize the image if you'd like. So you can make it small, make it big, and all those different things. So let's just take this back to 100 where it was or thereabouts. And I'm just going to say trim. So trim will automatically make sure that it fits in the available space.
So we're going to click next and finish.
Adding a Background and Verifying the Final Icon
And that's going to update our application icon. So we want to make sure that we restart the Android emulator. The Android emulator was already open. And I'm going to power this off. And after powering off the Android emulator, I want to run the application again.
So it's going to recompile the application, restart the Android emulator, and we have our application running. I'm just going to minimize, and you'll see here we have our application icon. Let's close that again and look at some of the other options we have to editing our icon. So if we go back to res, New, Image Asset, here we are in the foreground layer. So our ice cream image is in the foreground. We can actually edit the background, and I'm going to choose a color for the background. So if we click this, then we have this color picker, and I'm going to go with this hot pink type color. So I'm going to choose that. And there we go. I think it looks really nice, looks like really delicious ice cream. So next, finish. And once again launch the emulator.
And our app is launched. Minimize. And there we can see we have our lovely background and our custom icon. So that's how you can create a custom app icon in Android using Ionic Capacitor.
Conclusion and Next Steps
If you want to learn how to do the same using Ionic Capacitor in iOS, then you can watch the follow-on video that's going to come. So in order for you to catch that video, make sure that you subscribe to this channel.
If you want to also check out how to do the same using Ionic Cordova, which is a slightly different process, then make sure that you're subscribed as I'm going to publish that video as well very soon. Thank you very much for watching. If you want to support this channel, make sure that you like, share the video. Also if you can contribute and be one of our Patreons, that will be great as well. Thank you very much and see you next time.
