Android O: Creating Adaptive Icons

adaptive header for source

One of the major launcher-related changes for Android O is adaptive icons. These could have a big impact on how your users perceive your application. Avoiding them may force user's to remove your app from their home screen, which could be catastrophic for user engagement and retention.

At Klinker Apps, we do our best to stay up to date on all the latest practices, designs, and APIs, even if barely anyone can use them. While these adaptive icons might not be very main-stream for a few more years, planning and implementing them now could give your user's that boost of confidence that your app desperately needs.


Designing the icons

These icons are pretty basic to design. They come with two different components: a foreground layer and a background layer.

pulse separate

The two parts to an adaptive icon. This one is for our app, Pulse.

Each layer should be 108dp x 108dp and you should continue to make the mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi variants that you always have. When the icons are displayed to the user, anything within the center 72dp x 72dp will be displayed in the mask, while the content outside of that could be clipped, depending on what mask the user chooses to apply.

So, when designing the icons, make sure you keep any branding content within that "safe zone" of 72dp.


source separate

A first draft of Source's icon has content that extends outside of the 72dp "safe zone". This means that different masks will show more or less of the content on the icon.


For me, the design of these icons was definitely the difficult part. If you have any designer friends, now is the time to give them a call!


Integration in your apps

Adding the adaptive icon to your project is straight-forward.

First, go ahead and add your mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi variants of the background and foreground icons to their respective mipmap directories. I named mine ic_launcher_foreground.png and ic_launcher_background.png.

Next, create a ic_launcher.xml in the /res/mipmap-anydpi directory. The name of this file should match whatever name you are currently using for your launcher icon. Within that file, you will be defining the adaptive icon foreground and background. It will look something like this:

<?xml version="1.0" encoding="utf-8"?>  
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">  
    <background android:drawable="@mipmap/ic_launcher_background"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>  

And that's it. Within the AndroidManifest.xml, you should already have the android:icon="@mipmap/ic_launcher" in your application tag, so it will use the new adaptive icon on Android O, and your older icon resources on older versions of Android!

If you were using the drawable directory for the launcher icon, instead of mipmap, I recommend reading a bit about them here.

Your final application tag within the manifest will probably look something like this:

<application  
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"
        android:appCategory="news"
        ... >

Round icon support

pulse round icon

Above, you may notice that I still have the android:roundIcon attribute in the application tag. If you were one of the, seemingly few, developers that implemented round icons into your app, you should keep those around as well, since the adaptive icons won't be implemented in Android Nougat.


Adaptive icons with launcher shortcuts

Source shortcut preview

Since you can drag and drop launcher shortcuts directly onto the home screen, it might be advantageous to add adaptive icons for those, as well. These pretty much work the same way as the adaptive launcher icons.

For Source, we created a shortcut for "Saved" articles. To start, I already had a round shortcut icon for the saved articles, defined as ic_shortcut_saved.png, in each of the mipmap density directories. While creating the adaptive icon, the background was just a plain color (#f5f5f5), while the foreground was a star icon:

source shortcut separate

Similar to the launcher icon, I went ahead and added these ic_shortcut_saved_background.png and ic_shortcut_saved_foreground.png to the respective density folders. Then, I created the /res/mipmap-anydpi/ic_shortcut_saved.xml file to define the foreground and background:

<?xml version="1.0" encoding="utf-8"?>  
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">  
    <background android:drawable="@mipmap/ic_shortcut_saved_background"/>
    <foreground android:drawable="@mipmap/ic_shortcut_saved_foreground"/>
</adaptive-icon>  

And again, that's it. Within my static shortcuts.xml definition, I already had it pointing to @mipmap/ic_shortcut_saved. On Android O, it will now pick up the adaptive icon instead of the static icon.


After the design process, adaptive icons are very easy to create and use in your app. Have fun with them! I, for one, am very excited to see where they go, and what types of animations that Google uses them for.

To learn more about adaptive icons, I recommend heading over to the Android Developers site for them.

Feel free to share any adaptive icons that you have made!

homescreen