Adaptive Android App Icons: A Step-by-Step Guide
Creating App Icons Using Image Asset Studio for Your Apps Made Easy
Creating app icons might sound as easy as pie, but trust me, it’s not just about tossing in a random image and hoping for the best.
Before beginning you must consider the following:
Directory to place the icon.
Where to include the icon in the code.
How to create and place icons for multiple screen sizes.
Rounded and Square icons for different devices and place.
Image fitting and cropping to get the best icon placement results.
Image background and color.
OMG! I know it sounds like a lot but no worries, though.
I’ll be helping you through out and if there is anything you don’t understand.
Any step you missed.
Or anything that doesn’t work exactly.
Just ask below.
Image Asset Studio
The answer to all your problems in one place. Here we take our image and turn it into an icon worthy of an awesome app. Adaptive to all screen sizes with an icon for google play store for you to use later on. We will be using the image asset studio to get everything done by going through a series of steps below.
Lets begin by launching android studio.
Once your android studio is launched and gradle build completed successfully, You can get into your resources folder and into mipmap you will find your launcher icon.
res -> mipmap -> ic_launcher
If you open the xml anydpi file you will see its code on the left and design on the right like below. This is the default icon.
To open image asset studio we will right click on res folder. And place the mouse on the new option.
Step 1. Getting Started:
Find image asset menu item.
Step 2. Asset Studio Configuration:
Select Asset Studio menu item. Where we will be configuring our launcher icon image asset accordingly.
Step 3. Legacy Or Adaptive Icon:
You can select any of the icon types from the drop down. For launcher icon we have two options Adaptive and legacy or Legacy only.
For the sake of this tutorial we will be selecting Adaptive and Legacy.
As we want our icon to generate anydpi file so it will be adaptive.
Step 4. Clip Art Foreground
Incase you need your foreground image from a clip art you can select clipart option. Search icons to find the right icon for your app.
And press ok button to use the clipart as your foreground.
Step 5. Text Foreground:
To create a text icon you can select the text option and type any text or your company name here. And style it as you like.
Step 6. Background Color/Image:
You can pick any image for the background of the icon or if you prefer you can select the color option like below and choose any color that goes with your app theme.
Step 7. Foreground Image:
Now for the image that I like to use as my icon foreground I'll choose a path to where my image is and select it. Press ok to move to the next step.
Step 8. Resizing and Trimming:
Below you can see options for scaling. I used no trimming as my icon was large and won’t fit inside the safe zone around the icon.
I resized my icon to a 76% to get most of the characters face inside the safe zone.
This will be the area that will show once the app is run. The rest of the portion of the image will be cropped out.
So make sure you get the right position and amount of image inside the safe zone and the grids.
Step 8. Finalizing Icon:
Finally you are done editing. Just click the next option to get your icon created.
And you are done! Below you can see our final icon.
Congratulations you did it.😇😀
Between the themed icon option does not seem to work with custom icon pngs or clipart.
And there you have it, folks! we have our launcher icons ready for deployment. You can play around and test other options in the image asset studio if you like.
Image Asset Studio might seem like a labyrinth at first, but once you get the hang of it, creating icons becomes more addictive than binge-watching your favorite series.😉
So go ahead play around with those icons make them brighter and funkier. And most of all will play well on all screen sizes just the way you like it.
And that’s the secret recipe, folks! Image Asset Studio is your ticket to icon stardom.
But hey, creating these articles takes time and effort. ✍ If you’ve enjoyed this delightful journey through the world of app icons 😇 and want more enchanting articles in your life, consider following me here.
And on LinkedIn as dua awan.
Thank you for joining me on this adventure, and here’s to creating more icon-tastic moments together!
