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:
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.
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!
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:
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.
