App icons that look real (adaptive, vector)

The one screen you do not control

You have built three apps. They run, they save, they survive rotation. And there is still one surface where all three can be spotted as homemade from two metres away: the home screen.

Everything else about your app is drawn by your code. The icon is not. The launcher draws it, at a size you did not choose, in a shape you did not choose, next to Spotify and WhatsApp. It is the only part of the app that people who never install it will see.

The good news: Dice Duel, Pocket Notes and Focus Flow already ship proper icons, and the entire thing is four small text files with no pictures in them at all. This lesson is a tour of those files, so you can make your own.

Two layers, not one picture

Before Android 8.0, an app icon was a flat picture with its own shape already baked into it — a legacy icon. Every app looked different, because every designer drew a different outline, and the launcher could not do anything about it.

Android 8.0 replaced that with the adaptive icon: two layers.

• A background layer, which fills the whole sheet. Usually a flat colour.
• A foreground layer, which holds the artwork, floating over the background.

The launcher lays one on top of the other, presses its mask into the pair, and gets a shape that matches every other icon on the phone. Keeping the layers separate also buys you parallax: on some launchers the foreground slides a little against the background when the icon is dragged or pressed. You get that for free, and only because the two layers are separate files.

Here is Dice Duel's, in full. Four lines of it are the whole idea.

The grid: 108, 72, 66

The sheet is 108 by 108 units. Not pixels — units, the same idea as dp. Android scales the whole thing to whatever size the launcher wants.

Of those 108 units, the outer 18 on every edge are reserved. They exist so the mask has something to cut into and so parallax has somewhere to slide. That leaves an inner square of 72 by 72 that no mask will ever reach past.

Inside that, there is a stricter rule. Masks are not all squares — a circle mask cuts the corners off the 72-square too. So the guaranteed area, the safe zone, is a circle of diameter 66 in the middle of the sheet.

Pocket Notes puts the rule in a comment at the top of its own foreground file, and then obeys it:

1<!--
2  An adaptive icon is 108x108, but only the middle
3  72x72 is always visible. Everything below stays
4  inside x=28..80, y=24..84 so no launcher shape
5  can crop it.
6-->

x from 28 to 80 is a 52-wide block centred on 54, which is the middle of the sheet. That is comfortably inside 72, and the page shape has rounded corners, so the parts that poke outside the 66 circle are corner radius rather than anything you would miss. This is the normal way to work: draw well inside 72, keep anything that carries meaning inside 66.

Why the foreground is a vector

Here is the file the foreground points at — the top of Dice Duel's die, with the shadow group left out for room:

1<?xml version="1.0" encoding="utf-8"?>
2<vector
3xmlns:android="http://schemas.android.com/apk/res/android"
4    android:width="108dp"
5    android:height="108dp"
6    android:viewportWidth="108"
7    android:viewportHeight="108">
8
9  <group
10    android:pivotX="54"
11    android:pivotY="54"
12    android:rotation="-14">
13
14    <path
15      android:fillColor="#FFFDFBFF"
16      android:pathData="M40,30 H68 A10,10 0 0 1 78,40
17        V68 A10,10 0 0 1 68,78 H40 A10,10 0 0 1 30,68
18        V40 A10,10 0 0 1 40,30 Z" />
19  </group>
20</vector>

It is a vector drawable: a description of shapes rather than a grid of coloured dots.

android:width and android:height say how big it is by default. viewportWidth and viewportHeight set the coordinate grid the shapes are described on — 108 by 108, matching the icon sheet exactly, which is why the numbers in pathData can be read straight off the grid above.

The <group> wrapper rotates everything inside it by 14 degrees around the point (54, 54) — dead centre. Rotating the die makes it look thrown rather than placed. One attribute, and no maths on your part.

The pathData string is the shape itself. M40,30 moves the pen to x 40, y 30. H68 draws a horizontal line to x 68. A10,10 0 0 1 78,40 sweeps a 10-unit arc to make the rounded corner. Z closes it. The die face is one rounded square; all five pips are a second path.

The four numbers 40, 30, 68, 78 are all inside the 66 circle. That is not a coincidence.

Vector against PNG, honestly

The alternative is a PNG — a fixed grid of dots. To ship one you need a copy per density bucket: 48, 72, 96, 144 and 192 pixels. And an adaptive icon has two layers, so that is ten files, plus a round variant. Fifteen pictures for one icon.

Three reasons the vector wins here, and only one of them is about file size.

It is sharp everywhere. Your icon is not drawn at one size. The launcher draws it small, the recents screen draws it medium, Settings draws it in a list, the share sheet draws it tiny, and the Play listing wants 512 pixels. A vector is re-drawn from its shapes at every one of those. A 96-pixel PNG stretched to 192 goes soft, and people can tell even when they cannot say why.

It is tiny. Dice Duel's entire icon — foreground, background colour, and both adaptive-icon files — is about 2.3 kB of text. Fifteen PNGs would be a couple of hundred kilobytes of your APK, for one picture.

You can build it on a phone. This matters more than the other two for you specifically. Making five sizes of a PNG needs an image editor, an export step, and somewhere to keep the original. A vector is a text file you can type in Pocket Studio and change with one edit. Making the background green is one character. Making fifteen PNGs green is an afternoon.

That is why not one of the three apps in this course contains a single picture file.

Why mipmap and not drawable

The foreground lives in res/drawable/. The adaptive icon itself lives in res/mipmap-anydpi-v26/. Both are resources; why two folders?

Because mipmap is treated as special. When an app is built into per-density downloads, unneeded drawable densities get stripped out — and a launcher sometimes asks for an icon at a higher density than the phone itself uses, so that icons look right in a bigger grid. Anything in mipmap is kept regardless. It is one folder with one job: launcher icons.

So the rule is simply: ic_launcher.xml goes in mipmap; everything it points at can live in drawable.

anydpi-v26, and one bit of luck

The folder name is mipmap-anydpi-v26. Two qualifiers stuck together:

• anydpi — use this at any screen sharpness. A vector has no sharpness, so one copy serves every phone.
• v26 — only on API level 26 and up. <adaptive-icon> did not exist before Android 8.0, so an older phone must not be handed this file.

Normally you would also ship a plain mipmap-hdpi/ic_launcher.png and friends, as the fallback for phones below API 26. All three apps in this course skip that entirely, and it is legitimate rather than lazy: minSdk = 26. The lowest Android version any of these apps will ever run on is exactly the version that adaptive icons arrived in. There is no older phone to fall back for.

That decision was made back in Part 2, and this is one of the places it pays.

The round icon

Look in the manifest and you will find two icon attributes, not one:

1android:icon="@mipmap/ic_launcher"
2android:roundIcon="@mipmap/ic_launcher_round"

roundIcon is a leftover from the year adaptive icons launched: some launchers always draw a circle and wanted artwork designed for one. If you name it in the manifest, the file has to exist, or the build fails.

In Dice Duel, ic_launcher_round.xml is byte-for-byte the same adaptive icon. That is fine, and it is what most apps do now — an adaptive icon already handles a circular mask properly, so there is nothing to design differently. Ship both names, point them at the same two layers, move on.