How to Create App icon in Ionic - Capacitor & Android Image Asset Studio

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 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 [Music] 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 [Music] and we're going to select angular for our framework but it doesn't really matter whether you use angular react or view 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 view 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 [Music] 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 [Music] okay and after running iron 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 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 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 gonna 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 dot png so let's head back to android 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 dot 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 um 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 there abouts 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 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 acid 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 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 gonna 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 [Music] time

Channel: Code Swag

Views: 10,361

Keywords: ionic app icon, ionic app icon change, custom ionic app icon, change ionic app icon, ionic splash screen and icon, create ionic app icon, how to create app icon in ionic, android app icon change, how to change ionic app icon, how to change app icon in ionic 5, how to change app icon in ionic 4, how to change app icon in ionic 4 capacitor, how to change app icon in ionic 3, how to change app icon in android studio, android image asset studio, ionic 5 app icons, ionic 4 app icon

Id: 2Ce09by4qFE

Length: 12min 36sec (756 seconds)

Published: Mon Sep 28 2020