How to display Emoji in Jetpack Compose?

user_9636037 0
Viewed 1858

Unable to display emojis properly using Jetpack Compose.

Code

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

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.

android-jetpack-compose-text emoji android-jetpack-compose android
1 Answers

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
}
user_35857960
Related