Android Question How to convert existing app icon to adaptive icon?

[Inman]

I have an existing app that needs to be updated to support Adaptive Icons. I have the launcher icons currently in HDPI to XXXHDPI resolutions. What should I do to make the current icon look adaptive in Android 8.x (as in have a border around the icon so that it does not look out of place with other app icons in the launcher)?

I tried the example. There are two files - foreground and background. Which file should I change such that the present launcher icon gets a color (say red) filling around its irregular shape?

 

[Erel]

Have you ran the example?

The two layers are explained here: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

 

[Inman]

I did. The example runs fine. But I don't know how to convert my existing project. Like, I have my own icon.png file designed for pre-Oreo devices. What should I do next? Should I make background.png by filling a color around icon.png? And is foreground.png necessary if I don't need any fancy parallax effects on the launcher icon?

I see plenty of tutorials on the net on how to create adaptive icons. But all of them are about creating a new icon using Android Studio; none of them talk about converting an existing icon without using Android Studio.

 

[Erel]

Keep the current icon file for older devices.

Should I make background.png by filling a color around icon.png?

No. The background should be similar to your current icon. The foreground is a mask that is applied over the background.

Try it and see what happens...

 

[Inman]

I tried using my own icon as background and your blue color foreground.png as foreground. And it worked - I could see my icon through a circle with blue color around, which I think is the intended behaviour. I even tried changing the blue colour in your foregound file using paint.NET to grey and it worked great.

Now I need to make the circle in your foreground.png bigger so that my app icon is properly visible. Since my designing skills are bad, I asked a friend of mine who used Photoshop to make a PNG file with bigger circle in the center and grey colour around it. But when I used that file, icon shows only background.png. That PNG file is just like yours - 108x108 with transparent circle in the center. And yet it won't work.

I again changed back to your blue PNG file and it works fine. I am stumped. This is the file my friend made for me. Could you please take a look and let me know what is wrong with it?

https://drive.google.com/open?id=10QLRe716tue4FjiRQkPrQ2tTeHuTgcEs

Also did you create the file in Photoshop or Android Studio? Any particular settings used? Your file is under 1 KB while my file is about 3 KB although both are identical PNG files with same 108x108 size.

 

[Inman]

Ok I could finally get it to work but what I did is different from your approach. Here is how:

I used the current icon as foreground and the filling color as background.

Foreground

• I created a 108x108 dp PNG file and placed the current icon in center
• I resized the current icon to 53x53 so that it has enough transparent background remaining in the 108x108 canvas
• I saved this file as foreground.png

Background

• I created another 108x108 dp PNG file
• I filled it with grey color
• You can use any color, even gradient
• I saved this file as background.png

That's it. I put both these files in mipmap folder and followed Erel's example. Adaptive icons appear beautifully on Android 8 and above devices.

Legacy Icon (for devices running Android 7 and below)

• Similar to drawables-xxhdpi and other folders, you need to create mipmap, mipmap-hdpi, mipmap-xhdpi etc.. folders
• Copy the icons in drawables folders to corresponding mipmap folders (i.e. drawables-xhdpi to mipmap-xhdpi etc...)
• Make sure to set read only

Now on Android 7 and below devices it will use the icon.png in the corresponding mipmap folder.

 

[leitor79]

Hi, Inman!

Very nice of you to put your solution, thank you very much!

I've done as you say and I'm ok with the adaptive in android 8, but it fails the legacy mode. I still see a green droid icon (that's nowhere in my res folder) when using android 7.1.

I've put the icon.png file in res/drawable, res/mipmap and res/mipmap-anydpi, with no luck. It's set as read only. I don't know if I'm missing a folder or some manifest entry, mabye?

Thank you very much!