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:

7 Comments

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

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.