TLDR; Add adaptive app icon of your android app
Chaudhry Talha 🇵🇸
Posted on August 10, 2024
Weather you're building using native android (kotlin or java), or react-native and even flutter use this technique to add adaptive app icon for your android app. Adaptive icons will adapt to the device look and feel i.e. if it's a circle, or rounded square on others adaptive icons will adapt.
Open your android project in Android Studio. Go to /app/res/drawable
folder and right click New -> Image Asset
You'll see an Asset Studio window will open:
Here is the quick info about the options you have in this window:
Icon type depending on the type of app you're building it'll be generating the assets. Like if you're building an android app for the TV then it'll have it's own icon sizes. As I'm creating for mobile app so I'll keep the options selected Launched Icons (Adaptive and Legacy)
As the name is already written
ic_launcher
which is the name of the icon Android Studio has already set by default. Keep it as it isNext, you have three tabs, Foreground Layer, Background Layer and Options.
As the names suggest we're going to have a background layer which can be a colour or an image and same goes for foreground layer.
We'll keep theOptions
as it is, but you can explore it to see what options suits for your use-case.
Below is the icon that I'll be adding:
I've select the above PNG as foreground layer and adjusted the Resize option to make sure the layer is within the circles in the Preview
For the background layer I'll be adding white color.
After that press Next
and it'll show you which files will be created, overwritten or removed. As I kept the name same i.e. ic_launcher
so this is going to replace the current default Android app icon, so I'll just press Finish
It's completely safe to add all the files it has created to Git.
For my app icon, there were 33 changes in the git.
Clean and run the project and you'll see a pixel perfect logo, adaptive to all android phones.
Posted on August 10, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.