App launcher icons, the very first interaction that someone has with your app is something that we make quickly and soon forget as the more fun and complex features are prioritised. With new developments in Android 13 and other useful techniques you can make sure users like seeing your app take up some valuable home screen real estate!

Themed App Icons

Sorry anyone not yet on Android 12 or 13 Pixel device. (Source: https://developer.android.google)

The release of Android 13 has brought even more awesome styling and customisations to the Material You interface. One of the features that will make your home screen look beautiful and consistent is the implementation of themed app icons. These were around in Android 12 for some Google built apps and some Samsung specific apps, but Android 13 is the first time third party apps can implement them.

If you haven’t yet checked out themed app icons, you can easily enable them by long pressing on your home screen, going to Wallpaper & style and selecting Themed icons. If you are not using a Pixel device or using a custom launcher, your milage may vary.

I was reading an article from 9to5Google that lists all the apps that support themed icons and I was surprised how relatively short that list is (I am aware they are only listing the top apps that are popular in the US market — they can’t go and check every app out there), given how easy themed icons are to implement. When I checked my own home screen I was so disappointed on how few of my frequently used apps implemented the. So I thought I would share the steps on how to do this in the hope that more apps get on board and give their app icons a makeover!

There are official docs on the topic, but the best place to start is by making sure the icon you are using is an AdaptiveIconDrawable and ideally uses a vector image (although, this is possible with a png as well).

Create a Adaptive App icon

Something to note before you start, the full colour adaptive app icon can be completely different to your monochrome, themed, icon that we will discuss below, this could be useful if your app icon is a complex graphic comprised of many colours that may not be appropriate when themed as one colour.

This could cause a problem for your users when they are trying to find your app when the icon is themed so it should be a consideration when you are designing your app icon so that the differences are minor and a monochrome icon still makes sense for your app.

To create your adaptive app icon:

1. Navigate to the Asset Studio in Android Studio by opening File => New => Image Asset. Make sure Launcher Icons (Adaptive and Legacy) is set for the Icon Type.
2. Foreground Layer:
   Choose the svg you want to be at the centre of your icon by selecting the Path in the Source Asset section, you can then resize it as needed using the provided slider.
   Make sure you look at how your graphic is represented here, I have found that some svgs when exported don’t import well and you may need to adjust them in your graphics program (or get a friendly UI designer to help).
   When using Figma I found that using Outline Stroke before exporting will help fix some of these issues.
3. Background Layer:
   Switch to the Background Layer tab and select a colour or an image for the background. I am going with a simple colour.
4. Once you are happy, select Next and Finish on the next two screens, you will see that the tool will override any existing launcher files (if you have used the default names).

Please excuse the colours…I’m no designer if you can’t tell!

Test it out! You will see, when you have themed icons selected your icon is still coloured.

This is fine I suppose…

Theme your icon!

Let’s take a look at how the icon is defined, if we look at ic_launcher.xml (and ic_launcher_round.xml if your device is using round icons like in my screenshot above — all the below changes need to be made to both files).

Here we can see there is a background and foreground item. To make a themed icon, all you have to to is add a monochrome item to the adaptive-icon object. And what should this monochrome icon be? Simply your existing foreground icon just using a single colour. For a themed icon the background will be ignored completely.

Note — if you had to do some scaling for your adaptive app icon you will need to do the same for your monochrome version

This can be added into ic_launcher.xml like so:

Now try it out! Looking so much better!

Yay! Nice and neat.

But what about some style? What if my icon has a lot of colours or a complex shape?

Transparency and gradients in themed app icons

You can use semi-transparent elements or gradients in your monochrome icon to add a little more interest or help your users see your icon shape a little more. Just add the icon in just the same way:

Sorry, I didn’t get very creative here!

Looking cool now…

You might then find yourself asking:

If we can have gradients, can I just use my regular coloured icon?

The way this works is that if you have multiple solid colours they will be treated as the same for your monochrome icon and you will just end up with a silhouette of your shape (which might indeed be okay depending on what your app is!). If you look at the YouTube icon in the screenshot above, if the coloured version of that icon was used we would just see a solid rounded rectangle without the recognisable play button to tell us which app it is. So make sure you test out your icons in all modes to make sure they look the best they can be!