No More Tofu - Mastering Emoji on Android (Chicago Roboto)

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: Replace All val config = FontRequestEmojiCompatConfig(…) config.setReplaceAll(true) EmojiCompat.init(config)
40. 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 } } )
41. EmojiCompat: Using the Views <android.support.text.emoji.widget.EmojiTextView/> <android.support.text.emoji.widget.EmojiEditText/> <android.support.text.emoji.widget.EmojiButton/>
42. EmojiCompat: Easy! Wishlist Customize it Emoji Keyboard Emoji tools
43. Thank you! Miquel Beltran - @Miqubel