如何在 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.

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
}