Android 8 adaptative (vector) icons


Once we change the target android version to 26 or higher, the app icon suddenly gets messed up, from a full size icon to a tiny, hard to notice thing inside a white shape (a circle on the default Google launcher). I delayed upgrading to 26+ because of this, and also beacuse I didn´t understand how the new adaptative icons work. But it´s about time, so here we go.

How do I create it?

I´m assuming your launcher icon (app icon) is called ic_launcher, but it can be any name actually. Just make sure it´s the same name you set on your main launcher activity:

[Activity(
        Label = "YourApp"
        , MainLauncher = true
        , Icon = "@mipmap/ic_launcher"]
public class YourInitialActivity : AppCompatActivity {}

Create the folder YourAndroidProject/Resources/mipmap-anydpi-26.

Inside that folder create an xml file with the exact name of your launcher icon. For instance: ic_launcher.xml:

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

Replace ic_launcher_background_color with any color you like.

Now create an SVG file with the vector tool of your choice, like Sketch, Illustrator, InkScape, etc. The canvas should be a square of 108 x 108. However the size doesn´t really matter as we can change it later on the xml, but it´s handy to set it right for design purposes. For that I would suggest you download a template from link (Resources and tools). I used the Illustrator template and placed my icon inside the gray circle in the middle.

Here you can see the same with the template grid:

Exporting the SVG:

This will be the foreground graphic of your adaptative icon, so apart from the icon, everything else should be hidden, BUT YOU NEED an square shape for the icon to size correctly. The trick is to make that shape invisible, setting the alpha to 0, as per the screenshot above.

Export it to SVG, and then convert it to an android vector xml file. Call that file foreground.xml and put it on the mipmap-anydpi-26 folder.

Now open foreground.xml and make sure the width and height are 108:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">

    ...

</vector>

That´s it, really.

TL;DR

Take a look at the Official UI guideline, a blog post about Understanding Android Adaptive Icons and another about Implementing Adaptive Icons

IMO, the most remarkable improvement is that the launcher icon can now be an android vector xml. That means you can take any SVG file, convert it to the android xml format with a tool, and then use that single file in all 26+ devices.

Can I get rid of the former drawable/mipmap_[density] versions?

NO. Any device using an SDK less than 26 will ignore your new adaptative icon, so you still have to provide images for the different pixel densities for those devices.

So what´s the point then?

  1. As I said earlier, your icon will look bad on API 26+ without an adaptative icon.
  2. Device OEMs can now consolidate the appearance of all icons on the launcher. This means that your icon can now adapt to different kind of shape masks, and even be animated, looking good everywhere. One device OEM can set a circle mask on them, while another OEM can use rectangle with rounded corners.

Related Posts

Fixing push notifications on Android 8. Aka channels

UIStackView magic

When Apple realized a LinearLayout could be useful for developers...

Getting fancy with UIView anchors and state changes

A simple page-indicator for your android view-pager

A bit of xml and C#. No 3rd party libs required

Large file downloads on Windows 10 mobile

Download safely in the background with progress feedback

UWP mobile side loading

SQLite.NET > async VS sync

Or how we (developers) love to complicate our code base

Making iOS forms usable

Prevent user frustration by implementing good practices with Xamarin.iOS

Easy and cross-platform localization (Xamarin & .NET)

Share locales from a PCL. Get up and running in no time

Going back to the nineties

Or how to make a blog without a database