Posted by Lin Guo, Software Engineer
The use of emojis in communication has become increasingly popular in recent years. These small icons can be used to express a wide range of emotions and can add a personal touch to messages. However, adding emojis to your Android app can be a bit of a challenge. That's where the Emoji picker library comes in. You can simply add a few lines of code to your app, and you'll be able to start using emojis right away. It's the easiest way to get started with emojis, and it will make your app more fun and expressive.
Some useful features provided by the library
Up-to-date emojis without tofu (☐)Every year, new emoji versions are published, and we will regularly update the library to provide these new emojis. Higher-end phones will be able to render these newer emojis without any problem. For lower-end phones, newer emoji may be displayed as a small square box called tofu (☐). The library guarantees to detect and remove them. This ensures the library is compatible across multiple Android versions/devices.
Smooth UIThe library has several optimizations that attempt to reduce startup latency and speed up scrolling experience, such as caching renderable emojis, drawing emojis asynchronously and RecyclerView optimizations.
Personalized inclusive experienceUser selections are persistent in the library. Emojis that are newly chosen will be shown at the top row, making it simpler for users to find and share them. The library also offers a variety of emojis that represent different people and cultures in the variant panels. If the user chooses an emoji from one of the variation panels (Figure 2), the choice is retained and set as the default in the main panel.
Integrate emoji picker into your app in 3 steps
Step 1: Import the library in build.gradledependencies {
implementation "androidx.emoji2:emojipicker:$version"
}
|
Optionally set emojiGridColumns and emojiGridRows based on the desired size of each emoji cell
An example that uses EmojiPickerView in XML<androidx.emoji2.emojipicker.EmojiPickerView
…
app:emojiGridColumns="9" />
|
A very simple emoji picker should now be presented on your app! For the next step, we assume you would like to do something to the picked emoji.
// a listener example
emojiPickerView.setOnEmojiPickedListener {
findViewById<EditText>(R.id.edit_text).append(it.emoji)
}
|
Now you have a basic functioning emoji picker. To customize it further (e.g, override some styles or provide a different behavior to the recent emoji row), please refer to our api and sample app.
Feel free to file Bug Report or Feature Request to help us improve the library!
Posted by Simon Tokumine, Director of Product Management
