Implement Material You Themed Launcher Icons

Google recently announced it’s new design system Material You.
Basically, it generates a color palette based on your wallpaper, or by choosing static colors.

Material3 dropped and it enables developers to make use of the color palette generated from Material You. You probably have seen a lot of screenshots and videos at this point which show a preview of the home screen and how it looks like.

Source: Google

As you can see, launcher icons are adapted to the theme. I’m writing this to show you how we can “achieve” this. Let’s see how.

This needs to happen on XML-level, so we gonna need Google’s Material library. I’m gonna use the 1.5.0-alpha05 version. Add it to your app module gradle.

implementation 'com.google.android.material:material:1.5.0-alpha05'

By including this version of the library we can now access new theme properties. The ones we are interested are the color ones.

I made an empty project and I used the default ic_launcher_background.xml and ic_launcher_foreground.xml.

First we gonna need to know the palette of our device, to find out which color we need to use for background and foreground. In order to explore the theme palette applied on the device we need to enable the Android S Easter Egg widget. Here is a screenshot of Sv2 emulator image palette.

We will be replicating what Google apps have done.

Background

Seems like they have chosen the A1_100 for their background color.

Navigating to the ic_launcher_background.xml we locate the fillColor of the default green color.

We can see on line 8 the default green color. That’s what we need to modify. Let’s start exploring the colors.

By typing @android:color/1_100 and making use of the autocomplete we can find something interesting.

That means that there are many system_ colors.

Isn’t that lovely!

So let’s set the background to system_accent1_100. It will prompt us to override the resource for version 31.

So overriding the resource and launching the application we should see on our device the icon’s background is now themed accordingly!

You can see the launcher icon of the “test3” app is now adapted to the theme. Now let’s move on to adapt the ic_foreground_xml too.

Foreground

We should again override the resource for v31.

We need to find the color again. By looking again at our device color palette I can tell that our color is N1–700 or N1–800. To find that color we need to search for @android:color/system_neutral1_700.

Let’s launch our app and see what we got!

Seems like we nailed it!

Dark theme

Now let’s switch our theme to dark theme.

Seems like something is wrong. But that type of problem is too familiar though..

Night Resources!

As we know from the dark theme implementation on Android, we can have values and values-night resource directories. We can do the same with our drawable resource directory.

By navigating to the drawable folder in our file manager, we create a drawable-night folder and we place the night themed drawables in there.

So in the project structure it will look like this:

Now, we can observe from the Google apps that background and foreground colors are pretty much inverted, so let’s try it out!

Seems like our background color is a bit brighter than the Google apps.

That means that our inversion (background color: @android:color/system_neutral1_700) isn’t working exactly.

So let’s try to use @android:color/system_neutral1_800.

That seems much closer!

Here are some screenshots without the grid on the background for both dark and light theme.

Dark theme without the default grid on the background

Light theme without the default grid on the background

Buggy-bug

Now, there’s an issue. When I switch the theme of my device, the icon does not get switched.

Switched from dark to light theme.

There’s seem to be an issue or something is undocumented and I can’t find it.

I tried moving the still dark themed icon from the above image and the light themed icon launcher appeared, but when I “dropped it” it went back to dark theme.

Light-themed icon seems to appear when it’s dragged, but goes back to dark-themed icon when dropped.

Conclusion

This isn’t the only approach we can have to customize our app icon. We have many combinations of our palette to choose, as long as it makes our icons accessible!

As for the bug when switch theme, I’m not very concerned about it. Probably there’s something wrong about my approach as it’s very early in the Material You days! Google will soon address on how to do this properly.

Thanks for joining me on that nice journey of even more customization with Material You, as it was my first article. Hopefully more to come!