Emoji Picker

The Emoji Picker is a UI solution that offers a modern look and feel, up-to-date emojis, and ease of use. Users can browse and select emojis and their variants or choose from their recently-used emojis.

Figure 1. Emoji Picker

With this library, apps from a variety of sources can provide an inclusive and unified emoji experience to their users without developers having to build and maintain their own emoji picker from scratch.

Features

Up-to-date Emojis

Newly-released emojis are selectively included in the Emoji Picker. The Emoji Picker library is compatible across multiple Android versions and devices.

Sticky variants

Long-press an emoji to display a menu of variants, such as different genders or skin tones. The variant you choose is saved in the Emoji Picker, and the last selected variant is used in the main panel.

With this feature, users can send their preferred emoji variants with one tap.

Recent emoji

The RecentEmojiProvider is responsible for providing emojis in the Recently Used category. The library has a default recent emoji provider that satisfies the most common use case:

All selected emojis are saved per-app in shared preferences.
The picker displays at most 3 rows of selected emojis, deduped, in reverse chronological order.

If this default behavior is sufficient, then you don't need to use setRecentEmojiProvider().

You might need to customize the provider behavior, however. Here are some common scenarios:

You want to store different selected emojis per user account.
You want to use data storage other than shared preferences.
You want to display recent emojis sorted by frequency.

You can then implement the RecentEmojiProvider interface and set it using setRecentEmojiProvider().

Compatibility with `EmojiCompat`

If enabled, an EmojiCompat instance is used in the Emoji Picker to render as many emojis as possible. The Emoji Picker does not require EmojiCompat, however.

Prerequisites

Your app must target Android 5.0 (API level 21) or higher.

Use the library

Import androidx.emoji2:emojipicker:$version in your app's build.gradle file.

dependencies {
    implementation "androidx.emoji2:emojipicker:$version"
}

Inflate the Emoji Picker view, and optionally set emojiGridRows and emojiGridColumns.

The default number of emojiGridColumns is 9.
Row count is calculated based on the parent view height and the value of emojiGridColumns.
Use a float value for emojiGridRows to indicate that the user can scroll down for more emojis.

<androidx.emoji2.emojipicker.EmojiPickerView
    android:id="@+id/emoji_picker"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:emojiGridColumns="9" />

val emojiPickerView = EmojiPickerView(context).apply {
    emojiGridColumns = 15
    layoutParams = ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT
    )
}

findViewById<ViewGroup>(R.id.emoji_picker_layout).addView(emojiPickerView)

Use setOnEmojiPickedListener() to append the selected emojis to a view. For example, to append to an EditText, do the following:
```
emojiPickerView.setOnEmojiPickedListener {
    findViewById<EditText>(R.id.edit_text).append(it.emoji)
}
```
Optionally set RecentEmojiProvider, see sample app for an example implementation.

Optionally customize styles. Create your own style to override common theme attributes and apply the style to the EmojiPickerView. For example, overriding colorControlNormal changes the category icon color.

<style name="CustomStyle" >
    <item name="colorControlNormal">#FFC0CB</item>
</style>
<androidx.emoji2.emojipicker.EmojiPickerView
    android:id="@+id/emoji_picker"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/CustomStyle"
    app:emojiGridColumns="9" />

Sample App

The Emoji Picker sample app demonstrates basic use cases along with the following additional scenarios:

Layout recalculation when emojiGridRows or emojiGridColumns are reset.
An overridden recent emoji provider that sorts by frequency.
Additional style customization.