aster.cloud aster.cloud
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
aster.cloud aster.cloud
  • /
  • Platforms
    • Public Cloud
    • On-Premise
    • Hybrid Cloud
    • Data
  • Architecture
    • Design
    • Solutions
    • Enterprise
  • Engineering
    • Automation
    • Software Engineering
    • Project Management
    • DevOps
  • Programming
    • Learning
  • Tools
  • About
  • Programming

Support Modern Emoji

  • aster.cloud
  • November 15, 2021
  • 4 minute read

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. 🥳

Emojis shown in different apps

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.


Partner with aster.cloud
for your next big idea.
Let us know here.



From our partners:

CITI.IO :: Business. Institutions. Society. Global Political Economy.
CYBERPOGO.COM :: For the Arts, Sciences, and Technology.
DADAHACKS.COM :: Parenting For The Rest Of Us.
ZEDISTA.COM :: Entertainment. Sports. Culture. Escape.
TAKUMAKU.COM :: For The Hearth And Home.
ASTER.CLOUD :: From The Cloud And Beyond.
LIWAIWAI.COM :: Intelligence, Inside and Outside.
GLOBALCLOUDPLATFORMS.COM :: For The World's Computing Needs.
FIREGULAMAN.COM :: For The Fire In The Belly Of The Coder.
ASTERCASTER.COM :: Supra Astra. Beyond The Stars.
BARTDAY.COM :: Prosperity For Everyone.

Emojis on one phone and the square blank boxes on the other

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.

Read More  Tips For Building A Quality App With Firebase

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.

Phone with emojis and the other with the blank box and two emojis put together

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.

Read More  Data Classes — The Classy Way To Hold Data

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.

Waving emoji in different skin tones

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.”

waving emoji

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 🥳 🦄

Read More  PyCon 2019 | A Snake in the Bits: Security Automation with Python

By Meghan Mehta
Source Medium


For enquiries, product placements, sponsorships, and collaborations, connect with us at [email protected]. We'd love to hear from you!

Our humans need coffee too! Your support is highly appreciated, thank you!

aster.cloud

Related Topics
  • Android
  • AppCompat 1.4
  • Emoji
  • Medium
You May Also Like
View Post
  • Architecture
  • Data
  • Engineering
  • People
  • Programming
  • Software Engineering
  • Technology
  • Work & Jobs

Predictions: Top 25 Careers Likely In High Demand In The Future

  • June 6, 2023
View Post
  • Programming
  • Software Engineering
  • Technology

Build a Python App to Alert You When Asteroids Are Close to Earth

  • May 22, 2023
View Post
  • Programming

Illuminating Interactions: Visual State In Jetpack Compose

  • May 20, 2023
View Post
  • Computing
  • Data
  • Programming
  • Software
  • Software Engineering

The Top 10 Data Interchange Or Data Exchange Format Used Today

  • May 11, 2023
View Post
  • Architecture
  • Programming
  • Public Cloud

From Receipts To Riches: Save Money W/ Google Cloud & Supermarket Bills – Part 1

  • May 8, 2023
View Post
  • Programming
  • Public Cloud

3 New Ways To Authorize Users To Your Private Workloads On Cloud Run

  • May 4, 2023
View Post
  • Programming
  • Public Cloud

Buffer HTTP Requests With Cloud Tasks

  • May 4, 2023
View Post
  • Programming
  • Public Cloud
  • Software
  • Software Engineering

Learn About Google Cloud’s Updated Renderer For The Maps SDK For Android

  • May 4, 2023

Stay Connected!
LATEST
  • 1
    Just make it scale: An Aurora DSQL story
    • May 29, 2025
  • 2
    Reliance on US tech providers is making IT leaders skittish
    • May 28, 2025
  • Examine the 4 types of edge computing, with examples
    • May 28, 2025
  • AI and private cloud: 2 lessons from Dell Tech World 2025
    • May 28, 2025
  • 5
    TD Synnex named as UK distributor for Cohesity
    • May 28, 2025
  • Weigh these 6 enterprise advantages of storage as a service
    • May 28, 2025
  • 7
    Broadcom’s ‘harsh’ VMware contracts are costing customers up to 1,500% more
    • May 28, 2025
  • 8
    Pulsant targets partner diversity with new IaaS solution
    • May 23, 2025
  • 9
    Growing AI workloads are causing hybrid cloud headaches
    • May 23, 2025
  • Gemma 3n 10
    Announcing Gemma 3n preview: powerful, efficient, mobile-first AI
    • May 22, 2025
about
Hello World!

We are aster.cloud. We’re created by programmers for programmers.

Our site aims to provide guides, programming tips, reviews, and interesting materials for tech people and those who want to learn in general.

We would like to hear from you.

If you have any feedback, enquiries, or sponsorship request, kindly reach out to us at:

[email protected]
Most Popular
  • Understand how Windows Server 2025 PAYG licensing works
    • May 20, 2025
  • By the numbers: How upskilling fills the IT skills gap
    • May 21, 2025
  • 3
    Cloud adoption isn’t all it’s cut out to be as enterprises report growing dissatisfaction
    • May 15, 2025
  • 4
    Hybrid cloud is complicated – Red Hat’s new AI assistant wants to solve that
    • May 20, 2025
  • 5
    Google is getting serious on cloud sovereignty
    • May 22, 2025
  • /
  • Technology
  • Tools
  • About
  • Contact Us

Input your search keywords and press Enter.