Making Oneflare Adaptive

Adaptive app launcher icons for Android

An image with variations of Oneflare icons
Making Oneflare Adaptive

The freedom of Android is often a double-edged sword. On one hand, it can open up opportunity for creativity and uniqueness. On the other hand, it can sometimes leave the end user with a in-cohesive user experience.

Take app icons for instance. I really loved how Android didn’t box app developers in to a rigid shape for their app launcher icons. Their guidelines specified that app launcher icons should represent a real world object and have consistent shadow and other attributes. They looked great. They looked unique. They looked lively.

But there were some problems…

  1. Many developers didn’t follow the guidelines. Perhaps, they were told to use their iOS icon. Perhaps they wanted their icon to stand out. Perhaps, the developer was assigned the task of creating the app icon (cringe).
  2. The manufacturers wanted control over icon shapes. They wanted a unified look across their launcher skins.

So, whenever you’d look at your home screen, there’d be some gorgeous icons, some that didn’t quite look right and a few so ugly, they could ruin your day.

Enter Adaptive Icons

Starting from Oreo, Google introduced a solution to these problems — Adaptive icons. Basically, it consists of background and foreground image assets. The image can be masked however the manufacturer wants within guidelines. This gives app developers control over how their icon will look with various shaped masks and allows manufacturers to maintain a consistent look and feel of all the icons. I’ve started to see quite a lot of apps updating their launcher icons to be adaptive. It’s great to see.

It’s pretty easy to do. Firstly, make sure your target sdk is at least 26. Then send your designer a link. Perhaps something like this one by Nick Butcher. Next, go to your designer and say ‘Can you make an adaptive icon pretty please?’ If no luck, you may have to add a cherry on top. Then you’ll receive background and foreground image resource files 108dp x 108dp.

Then create an ic_launcher.xml file like below and stick it in the mipmap-anydpi-v26 resource directory. Your app will use your standard icon resource for un-Oreo’d devices.

 

Easy as that. Here’s our Adaptive Oneflare for Business app launcher icon fitting in nicely with its neighbours.

Oneflare launcher icon circle
Circle
Oneflare app launcher icon - squircle
Squircle
Oneflare app launcher icon - rounded square
Rounded square
Oneflare app launcher icon - square
Square
Oneflare launcher icon - tear
Teardrop

 

Leave a reply:

Your email address will not be published.

Site Footer