How to create and use Adaptive Icons on Android
Starting fom LiveCode 9.6.6. RC-1, your Android app can use adaptive icons.
- What is an adaptive icon?
An Adaptive Icon is made up of two layers, a foreground and background. The foreground layer can be a PNG image, a vector asset, or a text. The background layer can be a color, or a PNG image.
Android will apply a mask to both layers and clip an area around your icon. Different OEMs will apply different shapes of masks. For example, an adaptive launcher icon can display a circular shape on one OEM device, and display a squircle on another device. Each device OEM provides a mask, which the system then uses to render all adaptive icons with the same shape. Adaptive launcher icons are also used in shortcuts, the Settings app, sharing dialogs, and the overview screen.
- Why my app needs an adaptive icon?
The benefits of this is it offers a more unified home screen for Android users as all of the app icons will take the masked shape. The downside for not implementing adaptive icons is your application will stick out and its icon will look unprofessional on newer devices, compared to the other icons.
- How do I create adaptive icons?
You can generate them using the Image Asset Editor in Android Studio and then choose the resulting res folder in the android standalone settings pane.
Steps:
1. Open Android Studio and choose New Project:
2. Then choose Empty Activity and click Next:
3. Provide a valid "Save Location" - or leave the default one - and click FInish:
4. Wait until Android Studio opens your new project. In the left pane, expand the project tree view and right-click on "res" folder:
5. Choose New -> Image Asset:
6. The Asset Studio window will open:
7. Choose an asset for the Foreground Layer. This can be an "Image":
or a "Clip Art", where you can choose from several SVG icons, and also set the main color and resize the icon.
Or you can choose "Text"
8. Now click on Background Layer. You can choose a solid color as the background layer:
Or you can choose a background image:
9. Then, go to Options section, and ensure you have chosen to generate a Legacy Icon as well. This icon will be used on devices running Android version < 8:
10. Click Next, and then Finish. The resources folder ("res") that includes all the adaptive icons has been created.
11. Now, all you have to do, is to select this "res" folder in the Android standalone settings. While you're still on Android Studio, right click on "res" folder and choose "Open In" -> "Finder". The default place where this folder is stored is:
/Users/<username>/AndroidStudioProjects/<projectName>/app/src/main/res
12. Go to Android standalone settings, choose "adaptive" icon type, and then select the path to the "res" folder above:
13. Deploy to your Android device. Now your app has a professional, adaptive icon, that adapts nicely to any shape:
simon
Hi Panos, many thanks for this very clear and useful lesson. Just a remark, in my case if the "res" folder is inside the iCloud Drive the APP does not install (it throws a long and strange error message about folder not found), Placing the folder in the "real" hard drive fixes the issue. Is this to be expected? Regards
Panos Merakos
Hello Simon,
Hmm interesting. Well, in general, we suggest putting things that the standalone builder is expected to find into "real" folders, to avoid such issues. However, I do not see why it would fail in this case. If you don't mind, could you file a bug report, and include the full error message?
Cheers,
Panos
Simon
HI Panos, false alarm, when reproducing the issue in order to capture the error message to attach to the bug report I realized I was pointing to the wrong folder. It works fine no matter where the folder is located. Sorry for that
Panos Merakos
No worries, that's rather good news, thanks for the update, Simon :)
Scott Morrow
Great lesson. Thanks so much for doing this!
trevix
Hello.
I noticed that using the adaptive icon type, while it shows well on Android 10 devices, on android 7 is replaced with the default Android robot like.
Is there a way to have an icon on both OS versions?
Thanks
PS on Safari the reCAPTCHA is giving me problems, always showing th verification failed. What is going on?
Panos Merakos
Hello Trevix,
Adaptive Icons are supported on Android 8+. However, on Android < 8 you should see the legacy icon, that is created automatically in one of the "res" subfolders. Have you seen step 9 of this lesson? Did you choose "Yes" in "Generate" in the "Legacy Icon (API <=25)" in the "Options" tab?
Cheers,
Panos
trevix
Yes I did, since up to a few weeks ago the icon on <8 were showing fine.
In the res folder, the icons are named "ic_launcher_foreground.png" and they populate the various "mipmap-hdpi","mipmap-mdpi", etc folders.
The only folder that is empty is the one name "drawable", but I tried to put on it the legacy icon and it does not work.
I guess I will have to redo the all process...
Thanks
Trevix
David White
Panos,
Excellent Tutorial!!
Very informative and concise.
Jermiami
I think that I followed this correctly. But, I was only successful in achieving a "newer" lighter green default android icon, and not the one I made with two .png files, one for the foregound (transparent with white text) and one for the background (purple abstract image). Any thoughts on why I get this newer (lighter green) android icon? I checked inside of the res folder and it is indeed the light green android icon, with no sign of my icon.
EDIT: There is now an extra step on the "Finish" page. You must switch from "Debug" to "Main." Fixed.
Panos Merakos
Hello Jermiami,
Thank you for the update. We will check again to see if the steps are up to date, and update the lesson accordingly.
Kind regards,
Panos
Vikas
Thank you so much for this tutorial. However, I am not a developer; I use no-code software to build my apps; then, I export my application and run it into the android studio to upload on Google Play. So I am still trying to figure out where to find these Android standalone application settings or any other way I can achieve this. Can you guide me on that? Thank you so much
Heather Laine
Vikas, these lessons are for use with LiveCode. The Standalone Application Settings will only appear within the LiveCode IDE. If you are using a different no-code tool then we wouldn't be able to help you with finding where you need to apply these icons.