Android 8.0 (API level 26) introduces Adaptive Icons, these icons have the capacity of displaying variations depending on the OEM specification.
To do this, Adaptive icons consist of two layers, the background, and the foreground, these layers are manipulated in different ways to show your app’s icon.
Adaptive icons must follow the following guidelines:
- Both layers must be sized at 108 x 108 dp.
- The inner 72 x 72 dp of the icon appears within the masked viewport.
- The system reserves the outer 18 dp on each of the 4 sides to create interesting visual effects, such as parallax or pulsing.
Fortunately, Android Studio provides a very simple way to add an adaptive icon to your app, here’s how.
Prepare your assets
To create adaptive icons, first, you need to have your assets ready, as I’ve explained, adaptive icons consist of background and foreground so you have to figure out this 2 layers for your app, typically the background being a pattern or solid color and the foreground an image with transparent background. For this example, I’ll be using a material icon vector and a solid color #26A69A.
Create your adaptive icon using Asset Studio
Open your project with Android Studio and launch Asset Studio going to File > New > Image Asset.
Select Launcher Icons (Adaptive and Legacy) on the Icon Type, this way Android studio will auto-generate the icons for new specification and legacy compatibility. Leave the default name and select your foreground and background layers.
You’ll be able to preview all the different icon versions on the right panel and once you finish, Android Studio will generate the required files and make the needed adjustments on your app to get your icon working.
There you go, now your app has an adaptive icon which will look great in every device and Android version.
