Are you still worrying about Android emoji development? Come and try Android Emoji

1. What is Emoji

1.1 Emoji background

Emoji is a kind of emoji, derived from the Japanese vocabulary "絵文字" (the pseudonym is "えもじ", the pronunciation is emoji). Its creator is Japanese Shigetaka Kurita (Shigetaka Kurita), he turned his attention to various elements of childhood for inspiration, such as Japanese manga and Japanese characters. "There are many different symbols in Japanese manga. The manga artist will draw some expressions to show that a light bulb appears on my head when I sweat profusely or burst out an idea." At the same time, he got it from the kanji. An ability to express abstract concepts such as "secret" and "love" in simple characters.

The early Emoji expressions did not have a unified set of specifications. Japan’s three major telecom operators, NTT DoCoMo, au/KDDI, and Softbank each have a set of encoding specifications for Emoji, making it impossible to send Emoji expressions between operators. show. Until October 2010, with the release of Unicode 6.0, the encoding of Emoji and the corresponding emoji pictures were officially standardized. The core Emoji emoticons contained 722 Emoji encodings.

Since then, the Unicode 7.0 specification released on June 15, 2014 and the Unicode 9 specification released on June 22, 2016 have continuously added new Emoji expressions. At present, the official has released Emoji 14.0, and the entire Emoji expression has reached more than 3,600. For specific details, please unicode official website

However, although Emoji has been standardized, different platforms use different fonts, so that the same Unicode representative Emoji will be rendered and displayed differently, as follows.

1.2 Android support for Emoji

Before Android 4.4, Android did not support emoji expressions. At that time, the solution was mainly to use imageSpan with spannableString to replace the emoji unicode symbols in the text. Starting from Android 4.4, the official support for emoji expressions has been officially implemented. The principle of implementation is basically that emoji expressions are built into the system's ttf font library, and the text is filtered and the emoji expressions are displayed. Because the built-in ttf font library of different Android versions supports different versions of emoji expressions, the old version of Android does not fully support the latest emoji expressions. Therefore, some emoji expressions that have been added in the new unicode version specification are in the old ones. Garbled boxes will be displayed on Android devices. In order to deal with this problem, in addition to the spannable processing solution mentioned above, we can also assign fonts to the text space to display emoji expressions by defining our own ttf font library.

In addition, Google officially launched the EmojiCompat Support Library. At present, this library can be downwardly compatible with Android 4.4. Its main goal is to allow our Android devices to support the latest emoji expressions and prevent the latest emoji expressions from appearing in our It is displayed as ☐ on the phone. EmojiCompat recognizes emoji expressions through the unicode encoding corresponding to emoji in the CharSequence text, replaces them with EmojiSpans, and finally renders EmojiSpan into corresponding emoji emoticons.

Two, EmojiCompat

2.1 What is EmojiCompat

EmojiCompat is an Emoji emoticon compatible library officially provided by Google. It supports at least Android 4.4 (Api Level 19) system devices. It can prevent Emoji from appearing in the form of an envelope in the application, although it is only because you are currently The device does not have this font. With EmojiCompat, your device can get the latest Emoji display effect without waiting for the Android system update. The principle is as follows.

As you can see, a display principle of Emoji, EmojiCompat will determine whether the current device supports this Emoji, if it supports it, it will still use the built-in font to load in the system, if it does not, it will use EmojiSpan to replace it, so as to achieve the effect of replacing the rendering.

2.2 Configure EmojiCompat

EmojiCompat provides two font support methods, which are downloadable font configuration and locally bundled font configuration.

• Downloadable font configuration : The downloadable font method will check whether the font is available locally when the app is launched for the first time. If not, it will download the latest Emoji font from the Internet. In this font file, load resources and render.
• Locally bundled font configuration : The locally bundled method will implant a newest Emoji font file during the App packaging process, and then encounter an unsupported Emoji, it will load resources from this font file and render it.

2.2.1 Local font configuration method

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

implementation 'androidx.emoji:emoji-bundled:1.1.0'

Then, initialize and build the local bundled font configuration EmojiCompat. Since initialization is time-consuming, it is best to initialize in advance, such as in Application.

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: Throwable?) {
                //初始化失败回调
            }
        })
        EmojiCompat.init(config)
    }
}

2.2.2 Downloadable font configuration

Downloadable fonts need to add emoji dependency in build.gradle, as follows.

implementation 'androidx.emoji:emoji:1.1.0'

Then, build the downloadable font configuration to initialize EmojiCompat, and the font needs to be passed in during initialization, 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?) {
                //初始化失败回调
            }
        })
        EmojiCompat.init(config)
    }

2.3 Use EmojiCompat

After initialization, the next step is to use EmojiCompat in business development. The processing logic of EmojiCompat has already been explained very clearly: First, it will load an Emoji font, and then determine whether the current device supports the Emoji that needs to be displayed, if it does not support it, use EmojiSpans to replace it, and finally set the processed CharSequence To the TextView. For this process, EmojiCompat provides a process() method.

As you can see from the code, process() accepts a CharSequence and processes it, and then returns a CharSequence. For example: we use process() to transform the expression of a smiling face.

EmojiCompat.get().process("笑脸： \uD83D\uDE01")

In actual projects, if you need to process strings through EmojiCompat.get().process() every time, it's actually quite troublesome. To this end, 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;" />

EmojiCompat will determine whether the current device supports this Emoji. If it does, use the built-in font to load the system. If it does not, use EmojiSpan to replace it, so as to achieve the effect of replacement rendering. This is when you have not set config.setReplaceAll(true), and if you set config.setReplaceAll(true), then all Emoji expressions will be replaced and rendered with EmojiSpan.

2.4 Customize Emoji Control

Of course, we can also customize Emoji controls. For custom Emoji controls, please refer to the implementation in EmojiAppCompatTextView and EmojiAppCompatEditView.

Three, Emoji2

Since the previous version of EmojiCompat is only compatible with devices above Android 4.4, its behavior for devices below 4.4 is no different from ordinary Android components. Moreover, the initialization time of EmojiCompat only needs about 150 milliseconds, and the memory footprint is about 200kb, so Google officially provided Emoji2 library recently. Before using, you need to add dependencies, as follows.

    def emoji2_version = "1.0.0"
    implementation "androidx.emoji2:emoji2:$emoji2_version"
    implementation "androidx.emoji2:emoji2-views:$emoji2_version"
    implementation "androidx.emoji2:emoji2-views-helper:$emoji2_version"

Emoji2 provides a total of 4 controls, EmojiButton, EmojiEditText, EmojiExtractTextLayout and EmojiTextView, the usage is similar to the previous ones, for example.

<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" />

Since Emoji is so fun, it's not time to use AppCompat 1.4 in your application.