Since Android 8, Google requires that new apps (or new icons for existing apps) are supplied with an adaptive icon . This is a new format of icon that uses vector graphics instead of pixel-based PNG images.
The highlights of adaptive icons are:
- Vector based, so scales to different sizes and DPI without taking up space for extra copies of the icon.
- Two part foreground and background, which enables Android devices to display the icons with different outlines and effects.
- Restrictions on the visual layout of the icon to provide flexibility to Android device manufacturers.
For more information on how to design the icon visually, see Designing Adaptive Icons.
Of course, the usual guidelines for designing icons apply, such as:
- using simple stylized shapes and colors
- avoid detailed or photo realistic images.
- avoid text
- not the same as a logo
Using Adaptive Icons in Umajin
The adaptive icons are delivered to Android as a special format called “VectorDrawable”. This is not the same as SVG. However, you can convert SVG to VectorDrawable using Google’s Android Studio application.
Please note, in future Adaptive Icons will be further integrated into Umajin Editor.
- Using your preferred vector design tool, such as Adobe Illustrator, make a background SVG and a foreground SVG file each at 108 x 108 dp.
- The foreground should have your icon inside a circle of the central 72×72 dp. The rest should be transparent.
- This circle should be considered to be your canvas, so the space outside this circle is not space that will show up on your icon.
- If you want space between your image and the edge of the icon you need to put this space inside the central circle. The space outside this circle is only used for special effects like parallax by the OS.
- Use Android Studio.
- Make a new application or open an existing unimportant test application.
- Right click on the “res” folder and go to “New -> Vector Asset” and add your 2 SVG files.
- In the android studio folder for this project your files will have been converted to xml files. Copy these into your project:
- Copy the editor file \manifest\preview\android\ic_launcher.xml to your project \manifest\android\ic_launcher.xml
- Save your project to sync these files to the cloud.
- Publish the app, and have Umajin build the app, it will use adaptive icons.