Emojis 💗 in Jetpack Compose

Emojis are Unicode characters. So when we think about displaying emojis, the first thought would be to show them in the Text() composable.

Update

Compose 1.4 supports Emoji directly now.
https://developer.android.com/jetpack/compose/text/emoji

Using Text Composable

Code

Output

This on initial glance looks good.
But, if you start exploring more you would notice a few issues.

Issues

1. Split into multiple emojis
   There are some emojis that are created using a combination of other emojis. For example, the farmer emoji.

But you would see that they are not shown as a single emoji but the combination of the emojis they are created from.

2. Broken emojis

Emojis like the ninja are broken and shown as tofu.

Tofu

Will all users have this issue?
Emoji compatibility varies based on device and Android API levels.

Using Emoji Compat Library

There is an Emoji Compat library created in the Android View system to display emojis properly.

Refer here for more details about that.

AppCompat 1.4 includes support for emoji back to Android 4.4.

New versions of AppCompatTextView support emoji by default as stated above.

We are going to make use of Compose interoperability with Android Views and Emoji support in AppCompat to display the emojis.

Emoji Code

Usage

EmojiView("🥷")

Output

Now the emoji displayed is correct, but there is one more issue.
The opacity of the emoji is not full.

Opacity issue

Reason

As to AppCompatTextView, it has a default semi-transparent text color.

Solution

Setting any color with alpha 1f solves the problem.

So, fixing that final code will be like this,

Final code

Usage & Output

EmojiView("🥷")

EmojiView("🧑‍🌾")

Please comment with your valuable feedback. It would help me to improvise.

Kindly 👏👏👏 if this was useful.

Please follow if you would like to see more content related to Android Jetpack Compose.

Reference

How to display Emoji in Jetpack Compose?