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.
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:
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: