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.
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
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
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
xxxhdpi variants of the background and foreground icons to their respective
mipmap directories. I named mine
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
drawabledirectory for the launcher icon, instead of
mipmap, I recommend reading a bit about them here.
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
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
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:
Similar to the launcher icon, I went ahead and added these
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!