ZOFTINO.COM android and web dev tutorials

Latest Emoji Support In Android Apps With EmojiCompat Support Library

If your android app content contains emojis, then displaying emjois using components of EmojiCompat Support Library will prevent missing emojis as EmojiCompat support library downloads latest emojis which are not available on the device it is running and makes missing emojis available in your app so that user can see all emojis in the content of your app.

In this post, we will cover what are emojis, how emojis can be entered into and displayed in android apps, what does EmojiCompat support library offer and advantages of using it and how to use EmojiCompat Support Library to provide emoji support in your application.

Emoji

Like the characters which you see on the keyboard, emojis are also characters incorporated into Unicode standard. Emojis represent emotions like smile. Since they are part of Unicode standard, the meaning of emoji character is standard and same across the devices, but how they are drawn on the screen varies and depends on the platform or device.

Entering Emojis into Text Views of Android Apps

To input emojis into a text field of an android app, device should have keyboard that support emojis.

Google provides a keyboard called Gboard that supports emojis. Most of the devices come with Gboard preinstalled. If Gboard is not installed, it can be installed from palystore. There are third party emoji keyboards like SwiftKey keyboard.

To enable emojis using Gboard, go to settings, click Languages & Input, select Virtual Keyboard, click Gboard , then click Preferences and turn on Show emojis in symbols keyboard.

Emojis can be entered into input text fileds like EditText and its subclasses. Below screen shot shows inputting emojis into EditText using Gboard keyboard.

android gboard inputting emoji into edittext

Displaying Emojis in Android Apps

All android Views, which show text such as TextView, EditText, Button, CheckBox, RadioButton and more, can display emojis by default. Android OS has capability to display emojis in the widgets. Below example shows displaying emojis in android app.

Layout containing TextView, EditText, Button, CheckBox, and RadioButton.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zoftino.com.emojisupport.MainActivity">
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/edit_text" />

    <RadioButton
        android:id="@+id/radioButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="RadioButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />
</android.support.constraint.ConstraintLayout> 

Activity calls setText on widgets passing text containing emoji characters.

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    EditText et = (EditText) findViewById(R.id.edit_text);
    et.setText(new String(Character.toChars(0x1F60A)));

    TextView tv = (TextView) findViewById(R.id.textView);
    tv.setText(new String(Character.toChars(0x1F60B)));

    Button b = (Button) findViewById(R.id.button);
    b.setText(new String(Character.toChars(0x1F60D)));

    RadioButton rb = (RadioButton) findViewById(R.id.radioButton);
    rb.setText(new String(Character.toChars(0x1F614)));
} 
android displaying emojis in android text views programatically

Why EmojiCompat Support Library

I’ll explain advantage of using EmojiCompat support library. Let’s say, you have an application which allows users to view content sent to them by others and the content can contain emojis.

If a particular user of your app has latest android OS on the user device, android will show all emojis in the content, no problem in this scenario.

If another user of your app doesn’t have latest android OS and message contains latest emojis, emojis which are not recognized by OS are shown as small squares which indicate missing emojis. In this scenario, if your app uses EmojiCompat Support Library, the library will get the latest emojis without needing to update android OS on the device.

Because of EmojiCompat Support Library in your app, users of your app can always see all emojis. EmojiCompat Support Library gives your app control to get the latest emojis instead of depending on the user to update android OS on his device to get latest emoji support.

Using EmojiCompat Support Library

EmojiCompat support library works on android 4.4 (API 19) and higher. The components in EmojiCompat library are EmojiCompat, EmojiCompat.Config, EmojiSpan and widgets such as EmojiEditText, EmojiTextView and EmojiButton.

EmojiCompat identifies emoji characters, replaces emoji character with EmojiSpan, performs external calls, interacts with other parts of the system for coordination and renders glyph.

EmojiSpan instance is added to character sequence for each emoji found.

To display emojis in your app, you need to use EmojiCompat widgets such as EmojiEditText, EmojiTextView and EmojiButton.

EmojiCompat Font

Since EmojiCompat Support Library gets missing emojis, it needs font resources to get emojis. You can provide font resources in two ways. First way is by configuring EmojiCompat with downloadable font and second way is with bundled font.

EmojiCompat Support Library with Downloadable Font

In order for your application to have feature provided by EmojiCompat support library, you need to configure EmojiCompat, initialize it and use EmojiCompat widgets in UI wherever you want to show emojis in your application

To configure EmojiCompat, first create FontRequest by providing font provider details then add provider certificate to array resource, this is related to downloadable font configuration you can get more details on this by reading downloadable font. Then configure EmojiCompat passing the FontRequest and setting callback and initialize EmojiCompat.

EmojiCompat configuration and initialization should be done only once. That is why it needs to be in onCreate method of custom application class.

 final FontRequest fontRequest = new FontRequest(
        "com.google.android.gms.fonts",
        "com.google.android.gms",
        "Noto Color Emoji Compat",
        R.array.com_google_android_gms_fonts_certs);

final EmojiCompat.Config  config = new
        FontRequestEmojiCompatConfig(getApplicationContext(), fontRequest)
        .registerInitCallback(new EmojiCompat.InitCallback() {
            @Override
            public void onInitialized() {
                Log.i("MyApplication", "EmojiCompat initialized");
            }

            @Override
            public void onFailed(@Nullable Throwable throwable) {
                Log.e("MyApplication", "EmojiCompat initialization failed", throwable);
            }
        });
EmojiCompat.init(config); 

Use EmojiCompat widgets in layout wherever your app displays emojis.

 <android.support.text.emoji.widget.EmojiTextView
   android:id="@+id/textView"
   android:layout_width="parent"
   . . ./>
<android.support.text.emoji.widget.EmojiEditText
   android:id="@+id/editText"
   android:layout_width="parent"
   . . ./>
<android.support.text.emoji.widget.EmojiButton
   android:id="@+id/button"
   android:layout_width="parent"
   . . ./> 

If your application uses app compact widget for backward compatibility, you need to use EmojiCompat app compact widgets by using below library, widgets from this library such as EmojiAppCompatTextView, EmojiAppCompatEditText and EmojiAppCompatButton extend app compact widgets.

implementation 'com.android.support:support-emoji-appcompat:26.1.0'

EmojiCompat Support Library with Bundled Font

You can include font files in APK and provide latest emoji support in your application using EmojiCompat support library. But this way your apk size increases as fonts are included in apk.

To use EmojiCompat with bundled font, you need to add below library to gradle build file in your project.

implementation 'com.android.support:support-emoji-bundled:26.1.0'

Then in onCreate method of your custom application class, initialize EmojiCompat by configuring it using BundledEmojiCompatConfig. To show emojis, use EmojiCompat widgets as shown above.

 super.onCreate();
EmojiCompat.Config config = new BundledEmojiCompatConfig(this);
EmojiCompat.init(config);