How to display Emoji in Jetpack Compose?

Question

Unable to display emojis properly using Jetpack Compose.

Code

    Text(
        text = data.emoji.character,
        textAlign = TextAlign.Center,
        fontSize = 28.sp,
    )

When using Compose Text, I am facing compatibility issues.
Tofu and multiple emojis appear as explained here.

To fix this, I tried using AppCompatTextView in AndroidView.

Code

    AndroidView(
        factory = { context ->
            AppCompatTextView(context).apply {
                text = data.emoji.character
                textSize = 28F
                textAlignment = View.TEXT_ALIGNMENT_CENTER
            }
        },
    )

It displays the emojis without any compatibility issue, but the emojis are faded out.

Answer 1

I was able to find this issue, which is probably related to your Text problem. It's fixed in Compose 1.4.0.

As to AppCompatTextView, it has default semi-transparent text color. Setting any color with alpha 1f solves the problem:

AppCompatTextView(context).apply {
    setTextColor(Color.Black.toArgb())
    text = "🥰 hello"
    textSize = 28F
    textAlignment = View.TEXT_ALIGNMENT_CENTER
}