Support Modern Emoji

Emojis! They are everywhere! Since their release they have become a huge part of our language. They are a way to efficiently express yourself in a way that words cannot. While you may not think a banking app, fitness app or meal delivery app would need to support emojis they do! Emojis have transcended texting or messenger apps and now are a common part of our language. If your app has any text views then it should support emojis, read on to see why. 🥳

So what’s the problem? 😖

When your app doesn’t handle emojis, older versions of Android may not know how to render them. Most commonly, what will appear is a blank box, which we refer to as a tofu. This can cause confusion in cases where an emoji is displayed in an app that is not correctly set up to handle emojis. When a user adds a 🐶 emoji to a task in a todo app in an EditText, the user would be very confused to see a tofu instead of a dog, and they’d think your app has a bug.

To make emoji more interesting, in many cases, an emoji will be a combination of other emojis. For example, 💪🏾 is a combination of 💪 and 🟫.

If you try to type the flexing arm and it displays an arm and a color box it is not only an issue about confusion but also misrepresentation around various skin tones which contributes to a poor experience in your app.

As language changes, so do emojis. New emojis are added by Unicode yearly as part of the new Android release, but unfortunately, there’s no way to ship new emoji fonts to old versions of Android prior to S.

So what’s the solution?

The emoji2 library is integrated into AppCompat 1.4 meaning all you have to do is update to AppCompat1.4 and you can display modern emojis on API 19 and higher! All TextViews in AppCompat work by default because we added automatic configuration, so it can configure itself to load the correct emoji font. If needed, you can disable it for a specific text view in XML or code.

Let’s take a look at how these emojis render in AppCompat 1.3 vs AppCompat 1.4.

In simple terms, a graphical emoji is really just a 🖼️ that displays inside text. It is represented by a unicode codepoint(s), just like the letter ‘e’, but unicode specified that when these codepoint(s) display they should show an emoji-image instead of an ‘e’. The picture is really just a png in a font file (you can find the emoji font we make for Android here). Normally you might think of fonts as containing the character ‘e’, which is defined with strokes, but fonts are actually pretty powerful and can contain bitmaps, pngs, svgs, or even full programs — someone even made a game entirely in a font 🤯.

When new emojis are added by Unicode, a new emoji requires a new glyph, or printable character, be added to the emoji font — and updating tables so the font knows which codepoint(s) display this glyph.

When the platform gets an input string, EmojiCompat.process needs to transform it to have an EmojiSpan which basically tells Android to not render a portion of the string. The EmojiSpan understands how to render the emoji.

EmojiCompat.process iterates over the string and finds all emoji, adding EmojiSpan for any emojis. An EmojiSpan basically tells Android to not render a portion of the string, and instead call the draw method. The EmojiCompat.process uses a trie to find all substrings that match a known emoji.

A trie is a fun data structure that is really good at looking words (or emojis) up in a dictionary efficiently. EmojiCompat iterates through the string, checking each codepoint against the trie. Whenever it finds a complete emoji in the trie, it checks to see if the platform doesn’t know how to render that emoji and adds an EmojiSpan. You can think of EmojiCompat as using a dictionary to find emoji in a string, and the definition is how to render the emoji using an EmojiSpan.

Now that we know how EmojiCompat retrieves an emoji, let’s talk about how to render the string “Hi.”

A string is just a set of codepoints which are numbers that represent glyphs like the letter ‘m’ or the number ‘1’. Emojis are also assigned codepoints — you can see them all on Emojipedia, including the waving hand emoji that we are rendering now.

Lastly, the draw function is called and paints the emoji directly from the font file and there you have it — your string! 🥳🥳🥳

In closing…

Emojis are not only great, but also an essential part of our language. To give your users the best experience including modern emojis — use AppCompat 1.4.

Take a look at the new Play policy around emoji here.

Keep calm and emoji on 🥳 🦄