new emojis do not show good on textview

[hvar90]

Version of the library: emoji-ios:0.12.0 Affected devices: samsung Affected versions: android 11

i tested on your code example and it works with the same problem, the new emojis show good and big only on EdiText but not on TextView

[vanniktech]

@rubengees is there any difference in regards to the sizes for the new emojis?

[hvar90]

i am not sure about your question, but on the screenshot the new emojis look good on EditText but on TextView look small and the emojis do not look like on the EditText or on the keyboard library

[rubengees]

@vanniktech I looked for the png strips we have and the emojis have normal size. In the data source they also have the same size. I then tried to reproduce this with the EmojiTextView but that also looks fine - which does not mean that there is not some kind of problem.

[hvar90]

i attached an example how it looks on your example code you can see the difference between old and new emojis

[rubengees]

Thanks for the example @hvar90! What are the necessary code changes to have this? How does the layout code look like?

[hvar90]

What are the necessary code changes to have this? How does the layout code look like?

i did not change anything on your code, it is the same code on your github

[rubengees]

I was asking to see the code you have so that the behaviour is like in the screenshot. So the changes to the main_activity.xml and the MainActivity. That would help to reproduce the issue and look into it 🙂.

[hvar90]

MainActivity.kt

package com.vanniktech.emoji.sample

import android.annotation.SuppressLint
import android.content.Intent
import android.graphics.PorterDuff
import android.os.Bundle
import android.view.Gravity
import android.view.LayoutInflater.Factory2
import android.view.MenuItem
import android.view.View
import android.widget.PopupMenu
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat
import androidx.core.provider.FontRequest
import androidx.emoji.text.EmojiCompat
import androidx.emoji.text.FontRequestEmojiCompatConfig
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.vanniktech.emoji.EmojiManager
import com.vanniktech.emoji.EmojiPopup
import com.vanniktech.emoji.facebook.FacebookEmojiProvider
import com.vanniktech.emoji.google.GoogleEmojiProvider
import com.vanniktech.emoji.googlecompat.GoogleCompatEmojiProvider
import com.vanniktech.emoji.installDisableKeyboardInput
import com.vanniktech.emoji.installForceSingleEmoji
import com.vanniktech.emoji.installSearchInPlace
import com.vanniktech.emoji.ios.IosEmojiProvider
import com.vanniktech.emoji.material.MaterialEmojiLayoutFactory
import com.vanniktech.emoji.sample.databinding.ActivityMainBinding
import com.vanniktech.emoji.traits.EmojiTrait
import com.vanniktech.emoji.twitter.TwitterEmojiProvider
import timber.log.Timber

// We don't care about duplicated code in the sample.
class MainActivity : AppCompatActivity() {
  private lateinit var binding: ActivityMainBinding
  private lateinit var chatAdapter: ChatAdapter
  private lateinit var emojiPopup: EmojiPopup
  private var emojiCompat: EmojiCompat? = null
  private var searchInPlaceEmojiTrait: EmojiTrait? = null
  private var disableKeyboardInputEmojiTrait: EmojiTrait? = null
  private var forceSingleEmojiTrait: EmojiTrait? = null

  @SuppressLint("SetTextI18n")
  override fun onCreate(savedInstanceState: Bundle?) {
    layoutInflater.factory2 = MaterialEmojiLayoutFactory(delegate as Factory2)
    super.onCreate(savedInstanceState)

    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)
    setSupportActionBar(binding.toolbar)

    chatAdapter = ChatAdapter()
    setUpShowcaseButtons()

    emojiPopup = EmojiPopup(
      rootView = binding.rootView,
      editText = binding.chatEditText,
      onEmojiBackspaceClickListener = { Timber.d(TAG, "Clicked on Backspace") },
      onEmojiClickListener = { emoji -> Timber.d(TAG, "Clicked on Emoji " + emoji.unicode) },
      onEmojiPopupShownListener = { binding.chatEmoji.setImageResource(R.drawable.ic_keyboard) },
      onSoftKeyboardOpenListener = { px -> Timber.d(TAG, "Opened soft keyboard with height $px") },
      onEmojiPopupDismissListener = { binding.chatEmoji.setImageResource(R.drawable.ic_emojis) },
      onSoftKeyboardCloseListener = { Timber.d(TAG, "Closed soft keyboard") },
      keyboardAnimationStyle = R.style.emoji_fade_animation_style,
      pageTransformer = PageTransformer(),
//      variantEmoji = NoVariantEmoji, // Uncomment this to hide variant emojis.
//      searchEmoji = NoSearchEmoji, // Uncomment this to hide search emojis.
//      recentEmoji = NoRecentEmoji, // Uncomment this to hide recent emojis.
    )

    binding.chatSend.setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN)
    binding.chatEmoji.setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN)
    binding.disableKeyboardInput.setOnCheckedChangeListener { _, isChecked: Boolean ->
      if (isChecked) {
        binding.searchInPlace.isChecked = false

        binding.chatEmoji.visibility = View.GONE
        disableKeyboardInputEmojiTrait = binding.chatEditText.installDisableKeyboardInput(emojiPopup)
      } else {
        binding.chatEmoji.visibility = View.VISIBLE
        disableKeyboardInputEmojiTrait?.uninstall()
      }
    }
    binding.forceSingleEmoji.setOnCheckedChangeListener { _, isChecked: Boolean ->
      if (isChecked) {
        binding.searchInPlace.isChecked = false

        if (!binding.disableKeyboardInput.isChecked) {
          binding.disableKeyboardInput.isChecked = true
        }

        forceSingleEmojiTrait = binding.chatEditText.installForceSingleEmoji()
      } else {
        forceSingleEmojiTrait?.uninstall()
      }
    }
    binding.searchInPlace.setOnCheckedChangeListener { _, isChecked: Boolean ->
      if (isChecked) {
        binding.disableKeyboardInput.isChecked = false
        binding.forceSingleEmoji.isChecked = false

        searchInPlaceEmojiTrait = binding.chatEditText.installSearchInPlace(emojiPopup)
      } else {
        searchInPlaceEmojiTrait?.uninstall()
      }
    }

    binding.chatEmoji.setOnClickListener { emojiPopup.toggle() }
    binding.chatSend.setOnClickListener {
      val text = binding.chatEditText.text.toString().trim { it <= ' ' }
      if (text.isNotEmpty()) {
        chatAdapter.add(text)
        binding.chatEditText.setText("")
      }
    }
    binding.recyclerView.adapter = chatAdapter
    binding.recyclerView.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false)
  }

  @SuppressLint("SetTextI18n")
  private fun setUpShowcaseButtons() {
    binding.emojis.setOnClickListener {
      emojiPopup.dismiss()
      startActivity(Intent(this, EmojisActivity::class.java))
    }
    binding.customView.setOnClickListener {
      emojiPopup.dismiss()
      startActivity(Intent(this, CustomViewActivity::class.java))
    }
    binding.dialogButton.setOnClickListener {
      emojiPopup.dismiss()
      MainDialog.show(this)
    }
    binding.button.text = "Switch between Emoji Provider \uD83D\uDE18\uD83D\uDE02\uD83E\uDD8C"
    binding.button.setOnClickListener {
      val menu = PopupMenu(this, binding.button, Gravity.BOTTOM)
      menu.inflate(R.menu.menu_emoji_provider)
      menu.setOnMenuItemClickListener { menuItem: MenuItem ->
        when (menuItem.itemId) {
          R.id.menuEmojiProviderIos -> {
            EmojiManager.destroy()
            EmojiManager.install(IosEmojiProvider())
            recreate()
            return@setOnMenuItemClickListener true
          }
          R.id.menuEmojiProviderGoogle -> {
            EmojiManager.destroy()
            EmojiManager.install(GoogleEmojiProvider())
            recreate()
            return@setOnMenuItemClickListener true
          }
          R.id.menuEmojiProviderTwitter -> {
            EmojiManager.destroy()
            EmojiManager.install(TwitterEmojiProvider())
            recreate()
            return@setOnMenuItemClickListener true
          }
          R.id.menuEmojiProviderFacebook -> {
            EmojiManager.destroy()
            EmojiManager.install(FacebookEmojiProvider())
            recreate()
            return@setOnMenuItemClickListener true
          }
          R.id.menuEmojiProviderGoogleCompat -> {
            if (emojiCompat == null) {
              emojiCompat = EmojiCompat.init(
                FontRequestEmojiCompatConfig(
                  this,
                  FontRequest(
                    "com.google.android.gms.fonts",
                    "com.google.android.gms",
                    "Noto Color Emoji Compat",
                    R.array.com_google_android_gms_fonts_certs,
                  )
                ).setReplaceAll(true)
              )
            }
            EmojiManager.destroy()
            EmojiManager.install(GoogleCompatEmojiProvider(emojiCompat!!))
            recreate()
            return@setOnMenuItemClickListener true
          }
          else -> {
            return@setOnMenuItemClickListener false
          }
        }
      }
      menu.show()
    }
  }

  companion object {
    const val TAG = "MainActivity"
  }
}

main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    >
  <com.google.android.material.appbar.MaterialToolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      style="@style/Widget.MaterialComponents.Toolbar.Primary"
      />
  <com.vanniktech.emoji.material.EmojiMaterialButton
      android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="16dp"
      android:layout_marginTop="16dp"
      />
  <!-- This one gets automatically replaced into a EmojiMaterialButton as we're using a MaterialEmojiLayoutFactory. -->
  <Button
      android:id="@+id/dialog_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="16dp"
      android:text="Emojis in Dialog 💬"
      tools:ignore="HardcodedText"
      />
  <!-- This one gets automatically replaced into a EmojiMaterialButton as we're using a MaterialEmojiLayoutFactory. -->
  <Button
      android:id="@+id/custom_view"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="16dp"
      android:text="Custom View 🖼️"
      tools:ignore="HardcodedText"
      />
  <!-- This one gets automatically replaced into a EmojiMaterialButton as we're using a MaterialEmojiLayoutFactory. -->
  <Button
      android:id="@+id/emojis"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="16dp"
      android:text="Emojis without keyboard ⌨️️"
      tools:ignore="HardcodedText"
      />
  <com.vanniktech.emoji.EmojiCheckbox
      android:id="@+id/disableKeyboardInput"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="12dp"
      android:text="Disable keyboard input 🎹"
      tools:ignore="HardcodedText"
      />
  <com.vanniktech.emoji.EmojiCheckbox
      android:id="@+id/forceSingleEmoji"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="12dp"
      android:text="Force single Emoji 🔥"
      tools:ignore="HardcodedText"
      />
  <com.vanniktech.emoji.EmojiCheckbox
      android:id="@+id/searchInPlace"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="12dp"
      android:text="Search in place with :query 🔎"
      tools:ignore="HardcodedText"
      />
  <androidx.recyclerview.widget.RecyclerView
      android:id="@+id/recyclerView"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      />
  <LinearLayout
      android:id="@+id/chat"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/chat_input_background"
      android:gravity="center_vertical"
      android:orientation="horizontal"
      android:padding="4dp"
      >
    <ImageButton
        android:id="@+id/chatEmoji"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:padding="12dp"
        android:scaleType="centerCrop"
        app:srcCompat="@drawable/ic_emojis"
        tools:ignore="ContentDescription"
        />
    <com.vanniktech.emoji.EmojiEditText
        android:id="@+id/chatEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Type a message ..."
        android:imeOptions="actionSend"
        android:importantForAutofill="no"
        android:inputType="textCapSentences|textMultiLine"
        android:maxLines="3"
        tools:ignore="HardcodedText,LabelFor"
        />
    <ImageView
        android:id="@+id/chatSend"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:padding="12dp"
        android:scaleType="centerCrop"
        app:srcCompat="@drawable/ic_send"
        tools:ignore="ContentDescription"
        />
  </LinearLayout>
</LinearLayout>

[vanniktech]

@rubengees proably just our sample app as is with the emojis that you see in the screenshot

[hvar90]

not only your sample show bad the new emojis, my app using the new library shows bad the new emojis

[vanniktech]

What are you doing differently in the sample app? It works for me:

[hvar90]

i installed the same sample app, i did not change anything i tested the sample app with other device and i got the same result on Samsung and Motorola i got bad emojis only for the new emojis

maybe it is for some countries i am not sure but with your sample without modifications i got that problem

[vanniktech]

If you open it now again on your phone, is everything fine?

[hvar90]

i will dowload again your code of github and i will test it again ..

[vanniktech]

Which provider where you using? If Google Compat with the fonts it might be normal that once you see some inconsistent emojis and after they are downloaded, and the application is restarted, everything is fine

[hvar90]

i am using IOS provider and i am using your code on sample app, even i change to differents providers like twitter provider and i get the same problem with the emojis, but the emojis look good on EditTextView, just on TextView happens that problem

 R.id.menuEmojiProviderGoogleCompat -> {
            if (emojiCompat == null) {
              emojiCompat = EmojiCompat.init(
                FontRequestEmojiCompatConfig(
                  this,
                  FontRequest(
                    "com.google.android.gms.fonts",
                    "com.google.android.gms",
                    "Noto Color Emoji Compat",
                    R.array.com_google_android_gms_fonts_certs,
                  )
                ).setReplaceAll(true)
              )
            }
            EmojiManager.destroy()
            EmojiManager.install(GoogleCompatEmojiProvider(emojiCompat!!))
            recreate()
            return@setOnMenuItemClickListener true
          }

this is twitter provider...........

[hvar90]

i realized something new on notifications i can not see the new emojis, but the old emojis i can see them maybe the problem has relation with that, maybe some OS don't not recognize the new emojis codification

[vanniktech]

It's probably that your phone has a font which does not have those particular emojis

[tiennv157]

@hvar90 did you solve this error?

[hvar90]

@hvar90 did you solve this error?

No, i don't :( if you find the problem please to write the info about the problem

[tiennv157]

@hvar90 did you solve this error?

No, i don't :( if you find the problem please to write the info about the problem

I solved it by replaced the EmojiTextView by EmojiEditText, then disable it.

[JackWyman]

This issue occurs on Android 7+ devices, I have fixed the issue by extending the EmojiTextView class to TextView and not AppCompatTextView. It seems that the AppCompatTextView class in Androix has problems with this. I've tried with a custom font and it doesn't work either. It only works with the following:

FIX @SuppressLint("AppCompatCustomView") public class EmojiTextView extends TextView {

[AliHAlshamry]

i realized something new on notifications i can not see the new emojis, but the old emojis i can see them maybe the problem has relation with that, maybe some OS don't not recognize the new emojis codification

I have same problem, did you find any way to solve it?

[hvar90]

i realized something new on notifications i can not see the new emojis, but the old emojis i can see them maybe the problem has relation with that, maybe some OS don't not recognize the new emojis codification

I have same problem, did you find any way to solve it? @AliHAlshamry It's probably that our phones has a font which does not have those particular emojis maybe looking a way to install the new emojis on the phone that could solve the problem

[hvar90]

i am curious why this problem was not solved in the recent new version of the library 0.16.0 using the solution of @JackWyman

[vanniktech]

I updated the emojis with https://github.com/vanniktech/Emoji/pull/991 - so it should be fine now 🤞

[hvar90]

i downloaded the last code of github and i tested the example and i continue having the same problem :( also if i use the library on my app implementation "com.vanniktech:emoji-ios:0.18.0-SNAPSHOT" i have the same result