TLDR; Add adaptive app icon of your android app

thechaudhrysab

Chaudhry Talha 🇵🇸

Posted on August 10, 2024

TLDR; Add adaptive app icon of your android app

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

o to app/res/drawable folder and right click, then select new and then image asset

You'll see an Asset Studio window will open:

Asset Studio window

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 is

  • Next, 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 the Options 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:

Moonect Logo

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

Asset Studio Foreground Layer

For the background layer I'll be adding white color.

Asset Studio Background Layer

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

Asset Studio Final Review

It's completely safe to add all the files it has created to Git.

Android Studio Git

For my app icon, there were 33 changes in the git.

Github Preview

Clean and run the project and you'll see a pixel perfect logo, adaptive to all android phones.

💖 💪 🙅 🚩
thechaudhrysab
Chaudhry Talha 🇵🇸

Posted on August 10, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related