Android development, do you encounter Emoji headache?

On Android, if you need to use an Emoji, you will find that on some devices, some Emoji will be displayed in the form of a spoiled “☐” because the current device does not support the Emoji.

In Android Support, EmojiCompat is added to solve this problem. EmojiCompat supports Emoji extensions for Android 4.4 (Api Level 19) and later systems.

Next we will learn all the details of using EmojiCompat!

What is Emoji?

Since we need to use Emoji, let’s take a look at what Emoji is.

Emoji are graphic symbols that can be inserted into text. It’s a Japanese word, e for “e” and moji for “character,” which together make “emojis.”

Emoji was first supported in the 1990s by Japanese telecom companies in order to enhance the experience of text messages by inserting emojis into them. It took Apple’s support for Emoji in the iPhone in 2007 to make it popular around the world.

In the early days, Emoji was realized by replacing some special combination of symbols with picture emoticons, such as 🙂 with 😊. Such a solution would make it difficult to standardize Emoji, and the range of expression was limited.

Starting in 2010, Unicode began assigning code points to emojis, meaning that any Emoji after that point is a font that will be rendered as a picture.

Emojis are popular because of their emotive features. The international standard for Emoji is currently version 5.0, and in 2018, Emoji 6.0 (later renamed Emoji 11, an upgrade to Emoji 5.0) will be released.

As of now, Emoji 5.0 has 2,623 Unicode entries.

Details can be found on this website:

http://www.unicode.org/emoji/charts/full-emoji-list.html

It should be clear to you that after standardization, Emoji is actually a font, which is assigned a fixed code point by Unicode. Generally, we use standard Unicode to identify a unique Emoji.

Although Emoji have been standardized, different platforms use different fonts, resulting in the same Emoji represented by Unicode, rendering different effects.

For example, the standard Emoji U+1F601 in Apple and Android also represents a smiley face, but the rendering effect is different, which we need to know.

Second, Emoji status quo in Android

2.1 How to use Emoji?

A standard Emoji can be expressed in many ways. For example, take a look at the smiley face mentioned above.

Code, UTF-8, and Surrogates can all be used to represent this Emoji. Usually, this Emoji is the data input from the user or the data transferred from the server. Although these forms can represent this Emoji, different formats need different forms to parse.

Typically, we recommend using Surrogates to deliver emojis, such as \uD83D\uDE01, which is itself a Unicode code that is universal and can be used in TextView.

However, if instead of Surrogates we get Code, like 1F601, then we need to do extra processing. In fact, it is also very simple, after a few steps of conversion can be done.

String(Character.toChars(Integer.parseInt("1F601".16)))
Copy the code

The Kotlin code is used in this example, but it should not affect reading.

Pass the generated String object to the TextView, and if it is an Emoji supported by the current device, it will display normally.

2.2 Emoji cannot be displayed

In fact, we did not do any special processing for the way introduced in the previous section. We completely used the device’s own font library to render Emoji. This can lead to some Emoji not showing up on some devices.

With this scheme, I run it with the device I have at hand to see what it looks like.

It’s clear that there are some emojis that don’t work and are displayed as “☐”, which is not what we want.

Let’s take a look at how EmojiCompat handles it.

Use EmojiCompat

3.1 What is EmojiCompat

According to the official documentation, the EmojiCompat library is designed to enable Android devices to display the latest emojis. It prevents apps from displaying emojis in the form of “☐,” although it simply doesn’t exist on your current device. With EmojiCompat, your device doesn’t have to wait for an Android update to get the latest Emoji display.

3.2 How do I Use EmojiCompat

EmojiCompat support library, support up to Android 4.4(Api Level 19) system devices.

EmojiCompat supports two types of fonts:

Downloadable font configuration.
Locally bundled font configuration.

In addition to the different reference libraries, the most fundamental reason for these two methods of use is that the downloadable font method will check whether the font is available locally at the first startup, if not, the latest Emoji font will be downloaded from the Internet. In the local binding method, a latest Emoji font file will be embedded in the process of App packaging. Then, when the Emoji that cannot be supported is encountered, resources will be loaded from the font file and rendered.

The notocoloreMojicompat.ttf font file is currently officially used, which will be explained in more detail later.

I think you’ll notice that the local bundle method inserts a font file, which increases the size of the Apk installation package, but the downloadable font method, which is completely dependent on Google services, is basically crippled in China. In this context, We can only use EmojiCompat locally bundled.

No matter which method is used to configure fonts, EmojiCompat does not care. It just needs to determine whether the current device supports this Emoji. If yes, use the built-in system pans; if not, use EmojiSpans to replace CharSequence. To achieve the effect of alternative rendering.

The operation principle of EmojiCompat is shown in the following figure.

3.3 Font configuration for local binding

Since downloadable Emoji fonts need to work with Google services, I won’t cover them here.

This article focuses on how to use the local binding method, using EmojiCompat.

The first step is to add Gradle dependencies.

dependencies {
    ...
    compile "Com. Android. Support: support emoji - bundled: 27.0.2"
}
Copy the code

Second, initialize EmojiCompat.

To initialize EmojiCompat, there are two steps.

First you need to generate a BundledEmojiCompatConfig object whose constructor receives a Context.
Call againEmojiCompat.init()Method to pass the previously generated config to it for initialization.

The earlier this process is done, the better, because initialization is time consuming, loading the embedded Emoji font file when it is packaged, so it takes about 150ms and consumes about 200KB of memory.

Step 3, use EmojiCompat.

Once the initialization is complete, all that remains is how to use it.

EmojiCompat’s processing logic has been clearly described in the previous picture. It loads an Emoji font and determines whether the device supports the Emoji to be displayed. If not, it replaces it with an EmojiSpans and finally sets the processed CharSequence to the TextView.

For this process, EmojiCompat provides a very simple method, process().

As you can see from its signature, it takes a CharSequence, processes it, and then returns a CharSequence.

Here’s an example: Convert a smiley face.

EmojiCompat.get().process("Smiling face: \uD83D\uDE01")
Copy the code

Process () needs to accept a Unicode character, so a separate conversion is required if the resulting data is the aforementioned Emoji Code. Process () has already done the conversion for us, so we don’t need to worry about the details. We just need to set the CharSequence it returns to the TextView.

3.4 Emoji AppCompat Widgets

In a real project, if you need to process the string with emojicompat.get ().process() every time, it would be a hassle. Google also provides developers with support for corresponding controls.

If you need to use it, you need to introduce new dependency libraries.

dependencies {
      compile "Com. Android. Support: support emoji - appcompat: 27.0.2"
}
Copy the code

Once introduced, the controls provided by EmojiAppCompat can be used directly in XML.

Using support-emoji-AppCompat just saves us the steps of process(), but it still requires init().

3.5 Custom controls support Emoji

You can always use progress() or use EmojiAppCompatXxx controls, but if you want to customize a control to display emojis, you need to use the other two helper classes provided by EmojiCompat.

EmojiTextViewHelper
EmojiEditViewHelper

These two are very simple to use, one for pure presentation and one for state with input, very concise.

Even if you don’t remember, just look at EmojiAppCompatTextView and EmojiAppCompatEditView for any implementation.

Take EmojiAppCompatTextView as an example. Just use the EmojiTextViewHelper method in a few key locations.

3.6 Problems faced by EmojiCompat

EmojiCompat works pretty well overall, and no matter how you load it, you don’t actually need to do too much.

Refer to the official documentation here to list the most common problems.

1. What is the download strategy for downloading fonts?

When used for the first time, the Emoji font is checked to see if it exists on the current device, and if not, it is downloaded in a child thread.

2. How long does initialization take?

It takes about 150 milliseconds to initialize EmojiCompat after the font is already locally available.

3, EmojiCompat support library, will use how much memory?

Currently, Emoji fonts use about 200KB of memory once they are fully loaded.

What happens to EmojiAppCompatXxx controls on devices below Android 4.4?

EmojiCompat is already compatible internally and works just as well with ordinary AppCompatXxx controls on lower versions.

5. How big is the locally bundled Emoji font file?

The locally bundled Emoji font file NotocoloreMojicompat.ttf, which is embedded in assets at packaging time, is currently 7.4MB in size, which directly increases Apk.

For more details, I suggest you read the official documentation.

https://developer.android.google.cn/guide/topics/ui/look-and-feel/emoji-compat.html

4. Defects of EmojiCompat?

In the actual use of EmojiCompat, there is another flaw that cannot be considered a flaw.

Let’s recall the EmojiCompat processing mechanism mentioned earlier.

It only loads fonts from Support Font when the current device encounters an unsupported Emoji, and if so, it uses System Font.

This is not to blame the designers of EmojiCompat. The starting point of EmojiCompat is to solve the problem of Emoji displaying the curd “☐” in some devices, rather than whether it displays the latest Emoji or not.

This is embarrassing. Sometimes the fonts that are supported on Android devices don’t display well. Let’s take a look at EmojiCompat before and after using EmojiCompat.

On the left is the effect without EmojiCompat, and on the right is the effect with EmojiCompat.

It is clear that EmojiCompat helped me complete the emojis supported by my current equipment department, but did not replace Android jelly emojis with standard emojis.

So what do we need to do if we want it to display the latest Emoji?

As mentioned above, since Emoji was standardized, it is actually a font, and EmojiCompat also helped us bundle and embed a font package in assets directory, so we just need to let our displayed TextView load this Emoji font. We can solve this problem.

With that in mind, let’s see if this solution works.

At this point, we can compare the emojis by calling the loadEmoji() method and letting TextView display them.

From left to right, the display effects of default Emoji, EmojiCompat and Emoji Font are respectively.

The expression of dense hemp is a bit much, intensive phobia lets go me please, 😆!

Of course, this is only a solution. Under this solution, basically all models above 4.4 can display the latest Emoji. If there are requirements on the display effect of Emoji, this is also a solution.

Five, the summary

So far, that’s what I know about Emoji on Android.

What have you learned from reading this article? Or if you have any better Emoji suggestions, feel free to discuss them in the comments!

Today in the background of chengxiang Ink shadow public account, reply “growth”. I will send you some of my collation of learning materials, including: Android decompile, algorithm, design pattern, virtual machine, Linux, Kotlin, Python, crawler, Web project source.