Android Adaptive Icons: Complete Developer Guide

What are Adaptive Icons?

Introduced in Android 8.0 (Oreo), adaptive icons are a format that allows your app icon to change its shape based on the device manufacturer's preference. This means your icon can appear as a circle on a Pixel device, a squircle on a Samsung device, or a rounded rectangle on another.

The goal is to bring visual consistency to the user's home screen. Instead of a chaotic mix of shapes, all icons conform to the same mask profile set by the system.

Anatomy of an Adaptive Icon

An adaptive icon is composed of two separate layers:

• • Foreground Layer: This contains your app's logo or main symbol. It should have a transparent background.
• • Background Layer: This is a solid color or pattern that sits behind the foreground.

The Android system applies a mask to both layers to produce the final icon shape. Because the layers are separate, the system can also apply visual effects like parallax when the user interacts with the icon.

Design Specifications

To ensure your icon looks good in any shape, you need to follow specific size guidelines:

The "Safe Zone" is critical. You must keep your main logo or symbol within the central 66dp circle to ensure it never gets clipped, regardless of the mask shape applied by the system. The extra space (from 72dp to 108dp) is used for parallax effects and bleed.

Creating Adaptive Icons

You can create adaptive icons using Android Studio's Image Asset Studio, or by manually defining the XML resource.

XML Definition

Adaptive icons are defined in an XML file in the res/mipmap-anydpi-v26 directory:

<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

Best Practices

• Keep it Simple: Complex details get lost at small sizes. Focus on a strong, recognizable silhouette.
• Check the Safe Zone: Always verify that your critical content fits within the 66dp safe zone.
• Use Vector Drawables: Whenever possible, use vector graphics (SVG/XML) for your layers to ensure they look crisp on any screen density.
• Avoid Shadows on Foreground: The system adds its own shadows. Adding your own can create a weird "double shadow" effect.

Common Mistakes to Avoid

"The most common mistake is baking the background shape (like a rounded rect) into the icon image itself."

Never include a background shape (like a circle or square) in your foreground layer. The system provides the shape. If you include one, you'll end up with a "shape within a shape" (e.g., a circle inside a squircle), which looks unprofessional.