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 two parts, a foreground and a background. The foreground can be a PNG image, or a special vector graphics.
- Vector based images allow scaling to different sizes and DPI without taking up space for extra copies of the icon.
- Two part foreground and background, 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
PNG (pixel based) icons
You can produce a PNG-based adaptive icon using tools like EasyAppIcon.
Place the result into your project folder:
Vector (scalable) icons
If you want to use vector graphics, 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.
- 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:
- Save your project to sync these files to the cloud.
- Publish the app, and have Umajin build the app, it will use adaptive icons.