Adaptive Icons: Kotlin XML Guide for Modern Android Launchers

In the realm of Android app development, the visual appeal of your application starts right from its icon. Adaptive Icons, introduced with Android 8.0 (API level 26), have become the standard for providing a consistent and customizable look across different Android launchers. These icons are designed to adapt to various shapes and sizes dictated by the device’s theme or system settings. In this comprehensive guide, we will explore how to implement Adaptive Icons in your Android applications using Kotlin and XML.

What are Adaptive Icons?

Adaptive Icons are launcher icons that support multiple layers and scaling. They allow the launcher to customize the icon’s shape, and the system to apply visual effects for a more polished and uniform look across devices. Prior to Adaptive Icons, app developers had to provide multiple icon assets for various screen densities and device configurations. Adaptive Icons streamline this process by allowing a single set of assets to be adapted dynamically.

Why Use Adaptive Icons?

• Consistency: Ensures your app icon looks consistent across different Android devices and launchers.
• Flexibility: Adapts to various shapes (circle, square, rounded square, etc.) specified by the device’s theme.
• Modern Look: Provides a modern and visually appealing look that aligns with current Android design standards.
• Reduced Asset Management: Simplifies the process of providing multiple icon assets, as only a few key layers are needed.

Implementing Adaptive Icons in Kotlin XML

Step 1: Project Setup

Make sure you have an Android project set up with Kotlin support in Android Studio.

Step 2: Create Icon Assets

You’ll need two main assets for your Adaptive Icon:

• Foreground Layer: This is the main part of your icon that is visible to the user.
• Background Layer: This provides the background for your icon and can be a solid color or an image.

These assets should be high-resolution PNG or vector drawables. Aim for a size of 512×512 pixels to ensure they look crisp on high-density screens.

Step 3: Add Vector Drawables (Optional but Recommended)

For scalability and efficiency, using vector drawables (.xml files) is recommended. Create these in your drawable directory.

Foreground Vector Drawable (ic_launcher_foreground.xml):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
  <group android:scaleX="2.62"
      android:scaleY="2.62"
      android:translateX="22"
      android:translateY="22">
    <path
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"
        android:fillColor="#3DDC84"/>
  </group>
</vector>

Background Vector Drawable (ic_launcher_background.xml):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108"
    android:tint="#3DDC84">
  <group android:translateX="23.06153"
      android:translateY="23.06153">
    <path
        android:fillColor="#000000"
        android:pathData="M0,0h61.877v61.877h-61.877z"/>
  </group>
</vector>

Step 4: Create ic_launcher.xml in mipmap-anydpi-v26

Create a new XML file named ic_launcher.xml inside the mipmap-anydpi-v26 resource directory. This directory is crucial for Android 8.0 and above to recognize Adaptive Icons.

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

Step 5: Update AndroidManifest.xml

Ensure your AndroidManifest.xml file references the ic_launcher.xml for your application icon.

<application
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

You may also want to create mipmap-anydpi-v26/ic_launcher_round.xml with similar content to ensure round icons work correctly:

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

Step 6: Legacy Icons for Older Devices

To support older Android devices, provide traditional icons in the mipmap directories (mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi). Android will use these icons for devices that do not support Adaptive Icons.

Testing Your Adaptive Icon

Run your application on an Android device or emulator running Android 8.0 (API level 26) or higher. Observe how the icon adapts to the device’s theme. Test on multiple devices and emulators with different launcher settings to ensure consistency.

Example Code: Animating Adaptive Icons with AnimatedVectorDrawable

Adaptive Icons can also incorporate animations using AnimatedVectorDrawable. Here’s how you can add an animation to your Adaptive Icon:

Step 1: Create Animated Vector Drawable

Create an AnimatedVectorDrawable in your drawable directory (e.g., animated_icon.xml):

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <drawable android:drawable="@drawable/ic_launcher_foreground"/>
    <target
        android:name="rotationGroup"
        android:animation="@anim/rotate" />
</animated-vector>

Step 2: Create Rotation Animation (anim/rotate.xml)

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName="rotation"
        android:duration="2000"
        android:pivotX="50%"
        android:pivotY="50%"
        android:valueFrom="0"
        android:valueTo="360"
        android:repeatCount="infinite"
        android:valueType="floatType"/>
</set>

Step 3: Modify ic_launcher_foreground.xml to Support Animation

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
  <group
      android:name="rotationGroup"
      android:pivotX="54"
      android:pivotY="54">
    <path
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"
        android:fillColor="#3DDC84"/>
  </group>
</vector>

Step 4: Update ic_launcher.xml to Use the Animated Vector Drawable

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

Best Practices for Adaptive Icons

• Use Vector Drawables: Prefer vector drawables for scalability and smaller app size.
• High Resolution Assets: Ensure your assets are high-resolution (512×512) to look crisp on all devices.
• Test Thoroughly: Test your Adaptive Icons on different devices and launchers.
• Keep Foreground Simple: The foreground layer should be simple and easily recognizable.
• Consider Background Color: Choose a background color that complements your foreground and fits your brand.

Conclusion

Implementing Adaptive Icons is essential for providing a modern and consistent look for your Android applications. By following the steps outlined in this guide, you can ensure that your app icons adapt seamlessly across various Android launchers and devices. Leveraging Kotlin and XML to implement Adaptive Icons will significantly enhance the user experience and visual appeal of your app.