What is Emoji

1.1 Emoji background

Db db Db Db Db Db Db Db Db Db Db db db db db db db db Its creator, Japanese man Shigetaka Kurita, turned to childhood elements such as manga and Kanji for inspiration. “There are many different symbols in Japanese manga. The cartoonist will draw expressions like me sweating or a light bulb over my head when I’m having an idea.” At the same time, from Kanji he acquired the ability to express abstract concepts such as “secret” and “love” in simple characters.

There was no unified standard for Emoji in the early stage. NTT DoCoMo, AU /KDDI and Softbank, Japan’s three major telecom operators, all had their own codes for Emoji, which made it impossible to display Emoji when operators sent them to each other. Until October 2010, with the release of Unicode6.0, the coding of Emoji and the corresponding expression pictures were officially standardized, and the core Emoji contains 722 Emoji codes.

Since then, the Unicode 7.0 specification released on June 15, 2014 and Unicode 9 specification released on June 22, 2016 have continuously added new emojis. Currently, Emoji 14.0 has been officially released, and the total number of Emoji has reached more than 3,600. See the Unicode website for more details

However, although Emoji has been standardized, different platforms use different fonts, resulting in the same Emoji represented by Unicode, and the rendering effect will be different, as shown below.

1.2 Android support for Emoji

Before Android 4.4, Android did not support emoji, and the solution at that time was to use imageSpan and spannableString to replace emoji Unicode codes in text. Since Android 4.4, the official support for emoji has been started. The realization principle is basically to display emoji after the text is filtered through the built-in emoji in the TTF font library of the system. Because the built-in TTF font library of different Android versions supports different versions of emoji, older Versions of Android do not fully support the latest emoji. As a result, some of the emojis added to the new Unicode version of the specification show up on older Android devices with garbled boxes. To deal with this, in addition to the spannable solution mentioned above, we can also define our own TTF font library to specify fonts for the text space to display emojis.

In addition, Google has officially launched the EmojiCompat Support Library, which is currently backward compatible with Android 4.4. Its main goal is to enable our Android devices to Support the latest emoji. Prevent the latest emoji from showing up on our phones as ☐. EmojiCompat recognizes emoji through unicode encoding corresponding to emoji in CharSequence text, and replaces them with EmojiSpans. Finally, EmojiSpans are rendered into corresponding emoji.

Second, the EmojiCompat

2.1 What is EmojiCompat

EmojiCompat is an Emoji compatible library officially provided by Google. It supports the lowest Android 4.4(Api Level 19) system device, which can prevent the application from displaying Emoji in the form of envelopes. It’s just that your current device doesn’t have the font. With EmojiCompat, your device doesn’t have to wait for an Android update to get the latest Emoji display. Here’s how it works.

It can be seen that EmojiCompat will judge whether the current device supports this Emoji. If it does, it will use the built-in font of the system to load it. If it does not, EmojiSpan will be used to replace it, so as to achieve the effect of replacing rendering.

2.2 configuration EmojiCompat

EmojiCompat supports two types of fonts: downloadable font configuration and locally bundled font configuration.

  • Downloadable font configuration: The way of downloadable font will check whether there is such a font locally when the app is launched for the first time. If there is no such font, the latest Emoji font will be downloaded from the Internet. Then when there is an unsupported Emoji, resources will be loaded from the font file and rendered.
  • Font configuration for local bundle: Local bundle will implant a latest Emoji font file in the process of App packaging, and then load resources and render from this font file when unsupported emojis are encountered.

2.2.1 Local Font Configuration Mode

First, you need to add the emoji-bundled dependency in build.gradle, as follows.

Implementation 'androidx. Emoji: emoji - bundled: 1.1.0'Copy the code

Then, initialize the build local bundle font configuration EmojiCompat, which is best done in advance, for example, in Application, because initialization is time-consuming.

class MyApplication : Application() { override fun onCreate() { super.onCreate() initEmoji() } private fun initEmoji() { val config: EmojiCompat.Config = BundledEmojiCompatConfig(this) config.setReplaceAll(true) config.registerInitCallback(object : InitCallback() {override fun onInitialized() {override fun onFailed(@nullable: throwable?) {// initialization failed callback}}) emojicompat.init (config)}}Copy the code

2.2.2 Downloadable font configuration

Downloadable fonts require an emoji dependency in build.gradle, as shown below.

Implementation 'androidx. Emoji: emoji: 1.1.0'Copy the code

Then, build the downloadable font configuration to initialize EmojiCompat, passing in the font as follows.

private fun initEmojiCompat() { val fontRequest = FontRequest( "com.google.android.gms.fonts", "com.google.android.gms", "Noto Color Emoji Compat", R.array.emoji_list ) val config: EmojiCompat.Config = FontRequestEmojiCompatConfig(this, fontRequest) config.setReplaceAll(true) config.registerInitCallback(object : InitCallback() {override fun onInitialized() {override fun onFailed(throwable: throwable?) {// failed initialization callback}}) emojicompat.init (config)}Copy the code

2.3 use EmojiCompat

After initialization, the next step is to use EmojiCompat in business development. EmojiCompat’s processing logic is already clear: First, 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 procedure, EmojiCompat provides a process() method.

As you can see from the code, process() takes a CharSequence, processes it, and then returns a CharSequence. For example, we use process() to transform a smiley face.

Emojicompat.get ().process(" Smiley face: \uD83D\uDE01")Copy the code

In a real project, it would be cumbersome to have to process the string with emojicompat.get ().process() every time. For this purpose, EmojiCompat provides EmojiTextView, EmojiButton, EmojiEditText and other controls.

<androidx.emoji.widget.EmojiTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#129316;" />

    <androidx.emoji.widget.EmojiButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#10084;" />

    <androidx.emoji.widget.EmojiEditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#128527;" />
Copy the code

EmojiCompat will judge whether the current device supports this Emoji. If so, it will still use the built-in font of the system to load. If not, EmojiSpan will be used to replace it, so as to achieve the effect of replacing the rendering. This is if you don’t set config.setreplaceall (true), and if you do, all emojis will be replaced and rendered with EmojiSpan.

2.4 Custom Emoji controls

Of course, we can also customize Emoji controls, which can be found on EmojiAppCompatTextView and EmojiAppCompatEditView.

Third, Emoji2

Since the previous version of EmojiCompat was only compatible with Devices running Android 4.4 or higher, for devices running Android 4.4 or lower it behaves just like a normal Android component. In addition, EmojiCompat takes about 150 milliseconds to initialize and consumes about 200kb of memory, so Google has recently officially provided Emoji2 library. Before using it, you need to add a dependency as follows.

Def emoji2_version = "1.0.0" implementation "androidx :emoji2:$emoji2_version" implementation "androidx.emoji2:emoji2-views:$emoji2_version" implementation "androidx.emoji2:emoji2-views-helper:$emoji2_version"Copy the code

Emoji2 provides four controls, EmojiButton, EmojiEditText, EmojiExtractTextLayout and EmojiTextView.

<androidx.emoji2.widget.EmojiTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#129316;"
        tools:ignore="MissingConstraints" />

    <androidx.emoji2.widget.EmojiButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#10084;"
        tools:ignore="MissingConstraints" />

    <androidx.emoji2.widget.EmojiEditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#128527;"
        tools:ignore="MissingConstraints" />
Copy the code

Since Emoji are so much fun, use AppCompat 1.4 in your app.