CODEWITHSUNDEEP
androidandroid-jetpack-composeemojiandroid-jetpack-compose-text
Abhimanyu
Abhimanyu

Reputation: 14757

How to display Emoji in Jetpack Compose?

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.

Upvotes: 4

Views: 9580

Answers (2)

Phil Dukhov
Phil Dukhov

Reputation: 87605

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
}

Upvotes: 6

Alejandra
Alejandra

Reputation: 882

You can check the emoji in Compose page will all the relevant info https://developer.android.com/jetpack/compose/text/emoji

TL;DR modern emoji support is out of the box when using Compose 1.4 and above; some considerations apply when mixing in views.

Upvotes: 2

Related Questions