Android Themed Icons: A Complete Guide
Creating themed icons with Material You adds a personalized touch to your device. In this article, we’ll explore the exciting world of Material You and guide you through the process of crafting your themed icons.
During the launch of Android 12, Google Introduced Material You which added a new Design change to the Android ecosystem then they introduced Themed Icons with the release of Android 13 which makes the user’s home screen look more personalized, now the app icons adopts their theme from the user’s wallpaper.
fascinating! I know right 🥺
To get started, you must use Adaptive icons in your app, if you aren't using adaptive icons check out Cody’s Article. If you're already using an adaptive icon in your app then all you need to add is a Monochromatic element to your res/mipmap-anydpi-v26/ic_launcher.xml file.
just hold on, I’ll walk you through that 😅
First, make sure when you were creating your App Adaptive icon, you used a vector drawable with clean edges. The layers must not have masks or background shadows around the outline of the icon. Google recommends you use a foreground logo that’s at least 48x48 dp and it shouldn’t exceed 72x72 dp. In most cases, I just use a colour as a background when creating the Adaptive icon so I won’t have to worry about a background image but if you added a background image, it should be 108dp x 108dp. The space between the foreground and background is reserved for masking and creating visual effects such as parallax or pulsing when you move your app icon around on the home screen.
Dont worry, this is the last step
In your res/mipmap-anydpi-v26/ic_launcher.xml file add the <monochrome> element inside the <adaptive-icon> element just like below.
<monochrome android:drawable="@drawable/ic_launcher_foreground"/>
make sure it points to the adaptive icon you just added or your ic_launcher_foreground.xml file.
To preview your monochromatic icon, click the System UI Mode icon and switch between dynamic colours.
Hurray 🎉 you did it
Now go ahead and run the app, you should see the monochromatic app icon on your home screen if your launcher supports themed icons.
Just incase you don’t see the monochromatic icon yet, don’t panic😅
In your Manifest.xml file, if your app defines two icon drawable resources using android:roundIcon and android:icon attributes like below,
you need to add a <monochrome> element inside the <adaptive-icon> element of the res/mipmap-anydpi-v26/ic_launcher_round.xml just like you did for res/mipmap-anydpi-v26/ic_launcher.xml above.
Once you've done that, run the app again you should see the monochromatic app icon 🎉
Thank you for reading my article! I’m always open to feedback and corrections, please feel free to drop your thoughts in the comments section or reach out to me on Twitter(x). If you enjoyed this article, please click on the clap icon a few times and share it with someone too.
