Supporting Themed App Icons in Flutter Apps for Android 13 and Beyond

What are Themed App Icons?

From Android 13 onward, there’s a feature that changes the color tone of an app’s icon based on the user’s chosen wallpaper, light mode, dark mode, or other themes.

Here’s the official documentation:

Features and APIs Overview  |  Android Developers

Learn about the new features and APIs for developers in Android 13.

developer.android.com

I tried supporting themed app icons in my personal Flutter app, subskun.

Here are the traditional icons:

And these are the icons supporting themed variations, for both light and dark modes:

If you set the wallpaper to have green or red tones, the icons will look like this:

In this post, I’ll outline how to set up themed app icons for Flutter apps.

Prerequisites

It’s assumed that you’re already supporting Android’s adaptive icons with the flutter_launcher_icons package.

flutter_launcher_icons | Dart package

A package which simplifies the task of updating your Flutter app’s launcher icon.

pub.dev

Also, the adaptive icon’s foreground image should be monochromatic (we’ll cover non-monochromatic images later).

By the way, while flutter_launcher_icons doesn’t yet support themed app icons, there’s an existing issue for it and it’s included in their roadmap. Looking forward to its support!

[FEATURE REQUEST] Support for android 13 themed icons · Issue #419 · fluttercommunity/flutter_launcher_icons

Is it possible to add support for themed icons in android 13 by adding an additional monochrome icon version as a separate asset field?

github.com

Configuration

Once you’ve prepared the images, the rest is easy. Just add the <monochrome> element in android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml as follows:

<?xml version="1.0" encoding="utf-8"?>
<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" />
    <!-- Add this -->
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

Here’s the official documentation:

डिवाइस के मुताबिक बदलने वाले आइकॉन  |  Views  |  Android Developers

developer.android.com

If your regular app icon’s foreground image isn’t monochromatic, prepare a separate monochromatic image, place it in the drawable directory for each size, and replace the reference in the <monochrome> element with the one for the monochromatic image (for example, @drawable/ic_launcher_monochrome).

With this setup, when you build the app, it will support themed app icons as introduced earlier.

A Note to Myself

This might sound trivial, but when testing on an emulator, make sure the device has Android 13 installed.

I wasted a lot of time struggling with an emulator running Android 12, and browsing various sample apps on GitHub…

Conclusion

Not many apps support themed app icons yet, but those that do stand out, at least to a developer like me.

In the future, it’s not impossible that Google might make themed app icon support mandatory for app publication on the Store.

Considering this support when you have some free time might be a good idea.