While Compose already did a great job providing backwards-compatible emoji display for Text and TextField, how do you pick emoji on Android in the first place?
What would be the requirements for a nice emoji picker, if you were to add it to your Android application? Sure an emoji picker can’t be that complex, right? Maybe it can be complex once you start listing what some applications are doing:
- Supporting the most recent Unicode version without users needing to upgrade the OS version, so users can have all the new emoji (like the Phoenix emoji on Unicode 15.1) 🐦🔥
- Keep track of most used / recent emoji 🕰️
- Allow users to search emojis using text 🔎
- Search should support different languages 🌐
- Support different skin tones (Fitzpatrick scale) 🫱🏻🫲🏿
- Properly splitting emoji into categories to ease the manual search / exploration of emoji 🧭
- (Optional) Support different emoji styles (Apple, Facebook, Google, OpenMoji, Twitter, etc.) 🍎🤖🐦
- (Optional) First-class support for Jetpack Compose
Existing libraries
With the requirements above, I tried to look for tools to create this. Here’s what I’ve found:
Androidx Emoji2
Maintained by Google, this Emoji Picker has quite a nice set of features, but it’s not the most complete solution I’ve found.
✅ Pros
- Backwards compatible Unicode version
- Recent/Most Used Emoji
- Bonus: behaviour and storage are customisable
- Skin tones
❌ Cons
- No search support
- Not made with Compose in mind
- Only supports Google emoji style
vanniktech/Emoji
More features than Androidx’s Emoji2. Pretty much the most complete and flexible library out there. Other than the emoji picker, it provides some other UI tools, like EmojiAutoCompleteTextView, EmojiButton, EmojiCheckbox, etc.
✅ Pros
- Backwards compatible Unicode version
- Recent/Most Used Emoji
- Bonus: behaviour and storage are customisable
- Search functionality (only in English)
- Bonus: allows customising the search implementation
- Different emoji styles
- Skin tones
❌ Cons
- Search only works in English by default
- Maybe this could be worked on with a significant overhead for different languages, using a custom Search implementation
- Not made with Compose in mind
Abhimanyu14/compose-emoji-picker + emoji-core
TL;DR: Fewer features than vanniktech’s, but made with Compose in mind.
✅ Pros
- Backwards compatible Unicode version (relies on EmojiCompat)
- First-class Jetpack Compose support
- Search (only in English)
❌ Cons
- No recent emoji
- Search only works in English without possibility of expanding
Conclusion
Considering that the current Wire Android Application is 100% made using Compose, and that localisation is very important for us, there’s no perfect solution. I guess we’ll have to cook something in house. For now, we can leave the localisation part for later. But it’s definitely something we need.
Completely custom solution
While researching the topic, I thought of building something from scratch. Something that would have very clear boundaries between presentation and an “emoji data source”, similar to Abhimanyu14’s emoji-core vs compose-emoji-picker, or the internals of some other libraries.
This way the users of such a library could customise the UI completely, and use the data source only to fetch emoji categories with localisation support.
Some of the resources that can be used to build it:
- Unicode’s emoji-test file to fetch the current emoji
- Unicode’s Common Locale Data Repository to fetch localised names of emoji
Some extra thoughts:
- The UI part can filter the emoji to display only what it can render, from the whole emoji set.
- A stand-alone
RecentEmojiRepositorythat can be customised in order to feed it to the UI. - Thinking of future-proofing and flexibility, an emoji data set could be intercepted and decorated in order to support other languages or keywords during search.
- Some experimentation on whether reading from resource files is enough, or embedding a SQLiteDatabase could bring significant performance boost given the localised names for emoji.