Android Adaptive Icons

Android Adaptive Icons

One of the new features in the Android O developer preview is Adaptive Icons. While it will be a long time before may of us will be in a position to specify minSdkVersion 26, this is actually one of those feature that we can implement now and it will benefit users as and when they get Android O on their device, whilst having no impact on legacy users.

Moreover there are some new icon creation tools in Android Studio 3.0 which actually make developers’ lives a lot easier not only for creating Adaptive Icons, but also for creating legacy versions of those icons as well. In this article we’ll take a look at these new tools.

Android Adaptive Icons

There is already a good explanation of Adaptive Icons in the official documentation which give some explanations of why Adaptive Icons have been introduced, and hint at some of the ways that they will be used going forward. While the documentation already provides an explanation of the icon tools within Android Studio, it is these that we’ll focus on to see how they can provide assistance even for legacy icons.

Android Adaptive Icons, introduced in Android 8.0 (API level 26) can display a variety of shapes across different device models.

Before we continue it is worth pointing out that there a currently really big pain point with backwards compatibility which we’ll get to at the end. I would therefore suggest a quick read through of this article to decide whether it is worth your while implementing these just yet.

The main concept of adaptive icons is that the foreground and background layers are separate. This enables the launcher to do some funky effects. While the launcher doesn’t do anything yet, there may be some interesting stuff coming soon.

For the foreground of the adaptive icon I’m using the default Android Icon, in Android Studio 3.0. Next we have the background, and we will be using the ic_launcher_background.xml file in the drawable folder, in Android Studio 3.0 by default. You can however provide a different Icon and a background, if need be. I am keeping this simple for the sake of this tutorial.

To create the adaptive icon we right click on the res folder in the project view in Android Studio, and select New | Image Asset:

This brings up the all new image creation tools:

The icon type dropdown enables us to specify different types of icon that we may want to create, including ActionBar and notification icons. We’re interested in launcher icons so we’ll stick with the default selection of “Launcher Icons (Adaptive and Legacy)”. Next we’ll change the asset type to “Image” and select our foreground layer in the “Foreground Layer” tab:

You can change the Foreground Layer and the Background Layer to match your desired output. Feel free! Next we switch to the “Legacy” tab which allows us to control the legacy icon types which will be generated:

This is quite interesting because we can actually generate static legacy icons from our adaptive assets. That really simplifies the task of generating both square and round icons after round icons were introduced in Nougat 7.1. In this case I have no need for a Play Store icon (as I won’t be publishing this app to the play store) but I have still generated it. It is however optional.

The final stage is a check of which output files will be generated. The files shown in red are those that already exist and will be overwritten:

The default ic_launcher.png and ic_launcher_round.png icons which were the default from the project creation are those that will be overwritten.

That’s it. All of our assets have been generated. That’s it!

Conclusion

In this article, we have learnt how to easily generate our Adaptive Icons using Android Studio 3.0 (Not supported in earlier versions of Android Studio, consider updating first) and how the IDE helps us package the icons instantly without sweating.

This is one powerful feature of Android Studio, that I love using. Try this in your projects and leave comments or questions below if you get stuck!

Happy Coding!

3 Replies to “Android Adaptive Icons”

Leave a Reply

Your email address will not be published. Required fields are marked *