Beautiful iOS & Android Adaptive Icons Generated in Minutes

today we're going to take a look at how we can make beautiful app icons in seconds and import them into any ios and android application so tune in [Music] hey everyone i'm james montemagno i'm a mobile developer and i've been building out a xamarin application to track coffee consumption here on my youtube channel every single week i put out new videos showing how to get started with xamarin and creating a full application from start to finish now one of the most important things in an application is that app icon it's the thing that you see in the app store it's a thing that your users launch is on the app on your ios or android device and it's really really important it's the identity of your application now if you have a professional graphics team they're probably going to go ahead and put together everything for you so you can easily import them into your application but if you're like me and you're a solo developer you need a little bit of help and that's where an awesome website comes in called easy app icon that lets you generate responsive app icons in seconds so let's go over and check it out now like i said i've been building out this coffee application we've been going ahead and doing this here and this is just the default template so actually we can see that there's this my coffee application uses the xamarin logo here i have a few other app icons on here as well this is the peloton clone that i've also been building out too now this is responsive so as you sort of move around you can see it kind of move inside of there which is kind of cool and that's the adaptive icons on android ios all the icons are just static images and an asset catalog that you can put together but let's go ahead and spice this up let's go ahead and make this better so i'm going to do is head over to the browser and of course this is where i've been building out this application so if you're interested check out up over there for links to all the other playlist items but we're going to go to easyappicon.com that's it that's the one place you go for ios and android legacy or adaptive icons all in one place so you can come in and you can pick anything you want any foreground image you can adjust the padding you can adjust the background color so let's go ahead and do it now the thing that you'll need is some sort of icon here i have a coffee cup which we can see right here here it is and it automatically tries to detect a background color for me so we see the different images here on on legacy on round on full bleed that's going on here and we can adjust the padding so we want a little bit more padding here that looks a little bit better and we could adjust the background color too we could have a picker come up over here so we could say you know i actually use white for example or maybe we want a different purple here that looks pretty good so that's it i've just pretty much set up my app icon everything's kind of good to go right i chose an image this image is from emojipedia but you know you would have your own graphic that your app icon logo would be so choose that and then you know your actual uh name of the icon you want now like i see launcher that's how i've always been now what's cool here is that you can see it specifically on an ios and android device you can get kind of that real you know what it's going to look like and you can just download it and we're going to download ios and adaptive icons for android if you want legacy icons you can totally do that but it'll generate our icons and give us everything we need let's go ahead and save that right into our download folder done now what's nice here is that there's also android instructions and also ios instructions so we'll take a look at that in a second here but it gives you everything you need let's go and open up that folder i'm going to go into my downloads let's go ahead and extract this here and we'll go in and we'll see that we have an android folder we get all of our mipmaps so all of our launcher icons here here's this we got foreground round icon and our launcher icon gives you everything you need so back compat and forward compat it also gives you an app store logo and also a web icon too so if you want to upload those to google play and gives you some values for ios you get a simple app icon app icon set and then also itunes artwork which is kind of cool here so if you want those different sizes you can have them so they're all there and they're ready to go so here's what we're going to do is we're going to come in to visual studio because i'm using xamarin here but you would import this into your ios or android application accordingly i'm going to import android so i'm literally just going to take all of these folders and drag and drop them into my resources here and i'll say apply to all because there's already you know images and icons in here you could then delete those the nice thing here is that those were called icon and now we see over here ic launcher ic launcher round and we get you know new icons that are inside of here the next thing we need to do is delete from our main activity the icon we don't need it at all because it will use the applications app icon for our launcher and that's all you need to do is just delete that from the main activity there's a few other things that you need to do so if we go over to our instructions we'll see that over in our application node we're going to go ahead and set these two so this ic launcher icon and round icon this xml here is also set up that you don't need to bring it in it's already it's already there for you but it's the adaptive icon and we can take a look at that file that got brought in inside of our values there's our background color and then here is our launcher and launcher background so it automatically sets it up so it's showing you what it's going to go ahead and map to so if you want to change that color you can do that later too so let's go into our properties our android manifest and under the application node is where we're going to want to shove these so let's go ahead and just paste that in there and as we see we have our theme we have our icon and our icon round the round icons were for somewhere in the middle android set i would say for the os versions and then the old launchers for way back if you're doing kitkat or or something like that so let's give this a few seconds to compile up but literally that's it you just drag and drop the files in there and you're good now note though that i still have my old icons in here i could have named it icon that would have been pretty good and it would have given me the same exact files to override it but we can kind of see that we have all these things here all right now our application is launched again and once it's up we should be able to go here and there it is there's the coffee right there you can see as i drag it around on here we get the new my coffee right here so we have multiple on the home screen there we go it's all adaptive and totally ready to go 100 now over on ios it's even easier actually if you come into your ios project you'll see asset catalogs and assets here there is an existing asset called app icon so one thing i like to do is rename this first and call it app icons here or maybe like old and save it in here you can then come in and say add app icons and you can add a new app icon set but there's this import option here so if you hit import this will let you browse for it so i'm going to go and find my folder so here's downloads um there we go downloads there we go launch icons ios i have icon set there it is select it and that should import it into visual studio you can do the same exact thing over on visual studio for mac there so i like to keep the old ones around i found that sometimes it's a little bit weird if you delete that and you don't have anything imported there this will give you all of the different icons that you need that are modern inside of it after that you can open up your info p list you can make sure everything is set inside of here i usually like to double check my app icon so now we'll see that there's multiple app icons inside of here and we should be able to set it and now what i'm going to do is i'm going to go ahead and open up visual studio for mac actually and launch this on an ios simulator so we can take a look so let's hop over there all right now here we are over in visual studio for mac and here we can see our old app icons and we can see the new app icons right here and of course you can come in and you can select if you want other app icons in here and update those too this gives you kind of everything you need inside the info p list we'll see right down here under application and app icons i have that app icon selected let's just go ahead and run it and see what it looks like now of course the you know ios simulator comes up and what we should see when i hit the home is the new app icon there it is perfect purple and my coffee cup are right there there it is on ios all right there you have it in just moments we have our application up and running with beautiful new app icons for ios and android if you are doing windows uwp applications you can take that same exact app icon that you have and actually you can just import it into visual studio and it'll generate all the assets that you need automatically so no need to worry about what about my windows application you can just use that super duper nice you can also leverage some of these assets if you're doing mac os applications as well you probably want to go ahead and tune those up a little bit more for your application and what you want to see in the app drawer anyways there you have it i've sober hope that you enjoyed this dev tip how to get beautiful applications that are adaptive and responsive into your apps check out my youtube channel for more dev tips and xamarin 101 videos but if you like this video give it a thumbs up that goes in the google algorithm of goodness and recommends it to other people and of course don't forget to subscribe and click that notification bell to stay up to date with all the videos i put out here on my channel and thanks for watching [Music] you

Channel: James Montemagno

Views: 12,955

Keywords: app icons, adaptive icons, legacy android icons, icons, app logos, app icon, android, ios, xamarin.forms, xamarin.forms icons, responsive icons

Id: XEAyAf3_MpU

Length: 10min 45sec (645 seconds)

Published: Thu Apr 29 2021