Emoji (Emoticons) on Blackberry and Android App. How to support?

Question

I wonder how whatsapp gives support for that. I could use emojis on iPhone because it is natively supported. I'm not developing for bb neither android but I need to help a coder with this stuff.

The bb guy told me that he can add a font as a project resource (ttf), but since emojis are colored graphics, I'm not sure if i can create a ttf. I do not know anything about fonts either.

As you can see, my unknowledge is huge on this. I just need some tips that point me to the right way to research.

Thanks!

Answer 1

On Android you can make a BitMap font with the tutorial i found here. Then you can embed all your Emoji into that font.

For making this on the BlackBerry you can use the FontFamily class.
Here is a tutorial that explains how this works.

Have fun! :-)

Answer 2

From my experience most emoticons (emoji) do not use a font, but are rather bitmap graphics (e.g. emoticons in the default Android text editor). There are several downsides to using a font:

• Suppose you made the characters a, b, c, d etc into emoticons - the user would then be unable to read/send messages with those characters in without them turning to emoticons.
• Fonts are generally quite large as they contain a lot of information for displaying the text at different sizes/styles

Using bitmap graphics will allow you to easily use the same emoticons across a wide range of devices, whilst using standard device fonts the text around the emoticons.

You will have to parse the string that you are displaying, find the emoticons, and replace them with images.

On Android for instance you would accomplish this with:

1. Search the string for all emoticon occurences (regex can do this easily enough)
2. Replace all emoticons with the string <img src="emoticon.png" /> (althugh change emoticon.png based on the type of emoticon)
3. Convert the String to HTML with String myHtmlString = Html.fromHtml(myEmoticonString, myImageGetter, null);
4. Display the string in a TextView myTextView.setText(myHtmlString)

In step 3 myImageGetter needs to be an instance of Html.ImageGetter which returns a graphic (drawable) based on the src attribute of the images in the string (ie it converts a string file name to an actual graphic)

The steps on other platforms would be different but you should be able to use the same basic method (parse string, replace emoticons with images).