NO MORE □ — MASTERING EMOJI ON ANDROID (Droidcon Berlin)

Tofus (□) are representations used when a specific character (like an Emoji) cannot be displayed. You have seen them and so your users.

Thanks to EmojiCompat now Android developers have a way to provide Emoji compatibility for older devices but does it solve all the issues developers have with Emoji?

Have you wondered why Twitter counts characters differently depending on the Emoji? Or how gender and skin tone Emoji modifiers work? How can I have a similar functionality as Slack on my app with custom Emoji? Do all your users see the same Emoji?

On this talk you will learn about the different pitfalls developers face when working with Emoji like code points the Fitzpatrick modifiers and short-names you will learn how to use EmojiCompat and I will show you alternatives to it. In this talk you will learn:

- How Emoji was created
- How Emoji works
- What are the problems developers face with Emoji
- How to use EmojiCompat including dynamic font downloading
- What is EmojiCompat not solving and what can you do
- What alternatives are there to EmojiCompat and how to implement them

After this talk you will be an Emoji expert no longer afraid of showing □ (tofu) to your users!

Transcript

1. @Miqubel No More □ (tofu)    Mastering Emoji on Android
2. Why Emoji matters? What problems do Android developers face? What solutions do we have? Is EmojiCompat the greatest thing ever?
3. Emoji: A Brief Story Source: https://stories.moma.org/the-original-emoji-set-has-been-added-to-the-museum-of-modern-arts-collection-c6060e141f61
4. Emoji & Android Source: https://www.androidcentral.com/history-emoji-android
5. How to be up to date: DIY
9. Emotions Source: People interpret the same emoji in completely different ways https://www.theverge.com/2016/4/11/11406944/emoji-meaning-difference-ios-android
10. How Emoji Works
11. Extra-short-intro to Unicode Hello U+0048 U+0065 U+006C U+006C U+006F Unicode: Single character set that contains ALL characters of the Universe Each character maps to a Codepoint A Codepoint may be represented in memory differently! Codepoint UTF-8 UTF-16 H U+0048 48 0048 U+1F602 F0 9F 98 82 D83D DE02
12. How Emoji works Emoji: Graphic representation of one or more Unicode chars (Codepoints) "Face With Tears of Joy” U+1F602 val emoji = "\uD83D\uDE02"
13. How Emoji works “Woman Technologist: Medium-Dark Skin Tone” val emoji = “\uD83D\uDC69\uD83C\uDFFE\u200D\uD83D\uDCBB" U+1F469 U+1F3FE U+200D U+1F4BB
14. How long is an Emoji? Challenge: How many “Woman Technologist: Medium-Dark Skin Tone” Emojis can you fit on a Tweet? A: 280 B: 140 C: 40 Solution: 40 280 / 7 = 40
15. How long is an Emoji? —> Improvement emoji.length = 7 emoji.codePointCount(0, emoji.length) = 4 val emoji = “\uD83D\uDC69\uD83C\uDFFE\u200D\uD83D\uDCBB"
16. How long is an Emoji? —> Improvement val it = BreakIterator.getCharacterInstance() it.setText(emoji) var count = 0 while (it.next() != BreakIterator.DONE) { count++ } count = 3 on API 23 count = 1 on API 25
17. Challenges so far Missing Emoji (tofu) Different Emoji per platform Length of strings with Emoji
18. Let’s look at three solutions Custom solution: Images and Spans Custom solution: Font file Using EmojiCompat
19. Images and Spans Strategy: 1. Find an Emoji on a String 2. Replace with an ImageSpan 3. Repeat for the whole String
20. Finding Emoji on Strings Get a nice dictionary: EmojiOne “emoji.json”: 1.38 MB! Fast JSON parsing: com.jsoniter —> but you won’t need to Efficient pattern matching —> Regular Expression
22. Emoji assets Download: emojione/emojione-assets • Free: PNG 32px, 64px, 128px • Paid: SVG and larger PNG Example: SLICE OF PIZZA (U+1F355) —> 1f355.png
23. Matching and displaying val PATTERN = “\\ud83c\\udf55".toRegex() val matches = PATTERN.findAll(text) for (match in matches) { spannableString.setSpan( ImageSpan(context, R.drawable.emoji_1f355), match.range.start, match.range.endInclusive + 1, SpannableString.SPAN_INCLUSIVE_INCLUSIVE ) } Solution: DynamicDrawableSpan (and resize the drawable)
24. Images and Spans Pros: Freedom Cons: Lots of manual work needed APK size (4000 PNGs…)
25. Custom font file Strategy: 1. Include font file with Emoji 2. Set font file containing Emoji to TextView 3. Set text to TextView
26. Custom font file: Setup 1. Download Android font 2. Place in assets/fonts Download: https://www.emojione.com/download
27. Custom font file: Setup val typeface = Typeface.createFromAsset(assets, “fonts/emojione.ttf”) textView.typeface = typeface textView.text = string
28. Custom font file: Results
29. Custom font file: Hold on… textView.text = "Numbers: 1 2 3 4" Solution: Parse Emoji and create TypefaceSpans
30. Custom Font: Better but… Pros: Easy to setup Cons: Manual work needed
31. EmojiCompat Strategy: — Process Strings with EmojiCompat or — Use EmojiTextView
32. EmojiCompat: Setup (bundled) implementation “com.android.support:support-emoji:x.y.z” implementation “com.android.support:support-emoji-bundled:x.y.z” Adds: 7.4 MB
33. EmojiCompat: Setup (downloadable) val fontRequest = FontRequest( "com.google.android.gms.fonts", "com.google.android.gms", "Noto Color Emoji Compat", R.array.com_google_android_gms_fonts_certs) val config = FontRequestEmojiCompatConfig(this, fontRequest) EmojiCompat.init(config) Init takes 150 ms! But happens asynchronously
34. EmojiCompat: Setup (downloadable) Downloadable fonts get updated automatically!
35. EmojiCompat: Setup (downloadable) Source: https://github.com/googlei18n/noto-emoji
36. EmojiCompat: Setup (downloadable) Downloadable fonts get updated automatically! Find it in data/data/com.google.android.gms/files/fonts/opentype Noto_Color_Emoji_Compat-400-100_0-0_0.ttf Version 2.003;GOOG;noto-emoji:20171030:a5efe6ca61db
37. EmojiCompat: Using it textView.text = EmojiCompat.get().process(string)
38. EmojiCompat: Using it
39. EmojiCompat: Using it
40. EmojiCompat: Replace All val config = FontRequestEmojiCompatConfig(…) config.setReplaceAll(true) EmojiCompat.init(config)
41. EmojiCompat: Handling init delay EmojiCompat.get().registerInitCallback(object : EmojiCompat.InitCallback() { override fun onInitialized() { textView.text = EmojiCompat.get().process(string) } override fun onFailed(throwable: Throwable?) { // handle error? textView.text = string } } )
42. EmojiCompat: Using the Views <android.support.text.emoji.widget.EmojiTextView/> <android.support.text.emoji.widget.EmojiEditText/> <android.support.text.emoji.widget.EmojiButton/>
43. EmojiCompat: Easy! Wishlist Customize it Emoji Keyboard Emoji tools
44. Thank you! Miquel Beltran - @Miqubel
45. family-emoji.org