Android U+2764 (❤) Emoji

Everyone 😍 Emoji. They’re everywhere nowadays -- July 17th is World 🌎 Emoji Day, Oxford Dictionaries 📖 have an Emoji of the Year, and there was even a REAL MOVIE 🎥 made about them. Have you ever wondered 🤔 where they come from and how are they made, or why your iPhone-toting📱 friends keep sending you � in their messages?

In this 💬, we’ll:

* ⏳ Review the origins of Emoji and how they work

* 🔎 Find tips and tricks to best handle Unicode

* 👀 Look under the hood of the Emoji-Compat support library

* 🎓 Learn how to make sure users never see � again

Transcript

1. Android U+2764 (❤) Emoji Michael Evans @m_evans10
2. 2 Oxford Dictionaries @OxfordWords Oxford Dictionaries Word of the Year 2015 is… ! http://bit.ly/ 20X5bA4 #OxfordWOTY 16 Nov 2015 287 2K 1K
4. 4 Flavor-Blasted Valerie @valeriehalla i wish the emoji movie was a dry documentary about the history of unicode and text encodings 05 Aug 2017 30 481 1K
5. 5 History
6. 1999 6 NTT DoCoMo, Shigetaka Kurita
7. 1999 7 NTT DoCoMo, Shigetaka Kurita 176 characters
8. 1999 8 NTT DoCoMo, Shigetaka Kurita 176 characters “Picture character”
10. 2010 10 Emoji added to Unicode spec (722 characters)
11. 2010 11 Emoji added to Unicode spec (722 characters) 2011: Apple added to iOS
12. 2010 12 Emoji added to Unicode spec (722 characters) 2011: Apple added to iOS 2013: Google added to Android
13. 2014 13 Twemoji
14. 2014 14 Twemoji
15. 2014 15 Twemoji Unicode 6.1 (872 characters)
16. 2014 16 Twemoji Unicode 6.1 (872 characters) Solving ⍰ on the web
26. 2018 26 Unicode 11
27. 2018 27 Unicode 11 1,644 characters
28. 2018 28 Unicode 11 1,644 characters
29. 29 Unicode
30. Unicode 30
31. Unicode 31 Standard for • encoding • representation • handling of text
32. Unicode 32 Standard for • encoding • representation • handling of text 1,112,064 code points
33. Java (and Kotlin) 33
34. Java (and Kotlin) 34 char
35. Java (and Kotlin) 35 char 16-bit = max value 65,535
36. Java (and Kotlin) 36 String example = "Hello "; for(int i = 0; i < example.length(); i++) { char c = example.charAt(i); System.out.printf("Character %d is %c%n", i, c); }
37. Java (and Kotlin) 37 String example = "Hello "; for(int i = 0; i < example.length(); i++) { char c = example.charAt(i); System.out.printf("Character %d is %c%n", i, c); } Character 0 is H Character 1 is e Character 2 is l Character 3 is l Character 4 is o Character 5 is Character 6 is ? Character 7 is ?
38. Java (and Kotlin) 38 String example = "Hello "; for(int i = 0; i < example.length(); i++) { char c = example.charAt(i); System.out.printf("Character %d is %c%n", i, c); } Character 0 is H Character 1 is e Character 2 is l Character 3 is l Character 4 is o Character 5 is Character 6 is ? Character 7 is ?
39. Surrogate Pairs 39
40. Surrogate Pairs 40 Split code point across two characters
41. Surrogate Pairs 41 Split code point across two characters Don’t use String.charAt()
42. Surrogate Pairs 42 String example = "Hello "; for(int i = 0; i < example.length(); i++) { char c = example.charAt(i); System.out.printf("Character %d is %c%n", i, c); }
43. Surrogate Pairs 43 String example = "Hello "; for(int i = 0; i < example.length();) { int codePoint = example.codePointAt(i); System.out.printf("Character %d is %c%n", i, codePoint); i += Character.charCount(codePoint); }
44. Surrogate Pairs 44 String example = "Hello "; for(int i = 0; i < example.length();) { int codePoint = example.codePointAt(i); System.out.printf("Character %d is %c%n", i, codePoint); i += Character.charCount(codePoint); } Character 0 is H Character 1 is e Character 2 is l Character 3 is l Character 4 is o Character 5 is Character 6 is
45. String.length() 45
46. 46 >>> "".length 2
47. 47 >>> "".length 2
48. 48 >>> "".length 2 >>> "".length 2
49. 49 >>> "".length 2 >>> "".length 2
50. 50 >>> "".length 2 >>> "".length 2 >>> "%".length 4
51. 51 >>> "".length 2 >>> "".length 2 >>> "%".length 4
52. 52 >>> "".length 2 >>> "".length 2 >>> "%".length 4 >>> "&".length 11
53. 53 >>> "".length 2 >>> "".length 2 >>> "%".length 4 >>> "&".length 11
54. Modifiers and Joining 54
55. Modifiers and Joining 55 Zero Width Joiner
56. Modifiers and Joining 56 Zero Width Joiner U+200D
57. Modifiers and Joining 57 %
58. Modifiers and Joining 58 % = +
59. Modifiers and Joining 59 % = + &
60. Modifiers and Joining 60 % = + & = + + +
61. Modifiers and Joining 61 % = + & = + + + ,
62. Modifiers and Joining 62 % = + & = + + + , = +
63. Modifiers and Joining 63 String.codePointCount()
64. 64 Emoji on Android
65. 65 luis @imliterallyluis I’m gonna start charging y’all if I have to watch your android Snapchat story an extra $5 fee if I have to see that ugly laughing samsung emoji 19 Aug 2018 17 56
66. 66 kirito blazblue @chainbody genie: you have three wishes me: make everyone an android user : : : : “ ” : : 19 Aug 2018 6K 25K
69. Android O 69 Downloadable Fonts EmojiCompat
70. EmojiCompat 70
71. EmojiCompat 71 Bundled or downloaded
72. EmojiCompat 72 EmojiCompat.Config config = new BundledEmojiCompatConfig(this); EmojiCompat.init(config);
73. EmojiCompat 73 FontRequest fontRequest = new FontRequest( "com.example.fontprovider", "com.example", "emoji compat Font Query", CERTIFICATES); EmojiCompat.Config config = new FontRequestEmojiCompatConfig(this, fontRequest); EmojiCompat.init(config);
74. EmojiCompat 74 FontRequest fontRequest = new FontRequest( "com.example.fontprovider", "com.example", "emoji compat Font Query", CERTIFICATES); EmojiCompat.Config config = new FontRequestEmojiCompatConfig(this, fontRequest); EmojiCompat.init(config);
75. EmojiCompat 75 FontRequest fontRequest = new FontRequest( "com.example.fontprovider", "com.example", "emoji compat Font Query", CERTIFICATES); EmojiCompat.Config config = new FontRequestEmojiCompatConfig(this, fontRequest); EmojiCompat.init(config);
76. EmojiCompat 76 FontRequest fontRequest = new FontRequest( "com.example.fontprovider", "com.example", "emoji compat Font Query", CERTIFICATES); EmojiCompat.Config config = new FontRequestEmojiCompatConfig(this, fontRequest); EmojiCompat.init(config);
77. EmojiCompat 77 FontRequest fontRequest = new FontRequest( "com.example.fontprovider", "com.example", "emoji compat Font Query", CERTIFICATES); EmojiCompat.Config config = new FontRequestEmojiCompatConfig(this, fontRequest); EmojiCompat.init(config);
78. EmojiCompat 78 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"/> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content"/>
79. EmojiCompat 79 <android.support.text.emoji.widget.EmojiTextView android:layout_width="wrap_content" android:layout_height="wrap_content"/> <android.support.text.emoji.widget.EmojiEditText android:layout_width="wrap_content" android:layout_height="wrap_content"/> <android.support.text.emoji.widget.EmojiButton android:layout_width="wrap_content" android:layout_height="wrap_content"/>
80. 80 No more ⍰!
81. 81 No more ⍰!
82. 82 Twemoji?
83. Reversing EmojiCompat 83
84. Reversing EmojiCompat 84 Rendering
85. Reversing EmojiCompat 85 Rendering Configuring
86. Reversing EmojiCompat 86 Rendering Configuring Loading a new font
87. Reversing EmojiCompat 87 Rendering Configuring Loading a new font
88. EmojiAppCompatTextView 88
89. EmojiAppCompatTextView 89 public class EmojiAppCompatTextView extends AppCompatTextView { private EmojiTextViewHelper mEmojiTextViewHelper; private boolean mInitialized; private void init() { if (!mInitialized) { mInitialized = true; getEmojiTextViewHelper().updateTransformationMethod(); } }
90. EmojiAppCompatTextView 90 public class EmojiAppCompatTextView extends AppCompatTextView { private EmojiTextViewHelper mEmojiTextViewHelper; private boolean mInitialized; private void init() { if (!mInitialized) { mInitialized = true; getEmojiTextViewHelper().updateTransformationMethod(); } }
91. EmojiTextViewHelper 91
92. EmojiTextViewHelper 92 @Override TransformationMethod wrapTransformationMethod(TransformationMethod transformationMethod) { if (transformationMethod instanceof EmojiTransformationMethod) { return transformationMethod; } return new EmojiTransformationMethod(transformationMethod); }
93. EmojiTextViewHelper 93 @Override TransformationMethod wrapTransformationMethod(TransformationMethod transformationMethod) { if (transformationMethod instanceof EmojiTransformationMethod) { return transformationMethod; } return new EmojiTransformationMethod(transformationMethod); }
94. EmojiTextViewHelper 94 return EmojiCompat.get().process(source);
95. EmojiProcessor 95
96. EmojiProcessor 96 Unicode characters ➡ EmojiSpan
97. EmojiProcessor 97 Unicode characters ➡ EmojiSpan
98. EmojiSpan 98
99. EmojiSpan 99 ReplacementSpan
100. EmojiSpan 100 ReplacementSpan Draws emoji to Canvas
101. Reversing EmojiCompat 101 Rendering Configuring Loading a new font
102. Reversing EmojiCompat 102 Rendering Configuring Loading a new font
103. BundledEmojiCompatConfig 103
104. BundledEmojiCompatConfig 104 try { final AssetManager assetManager = mContext.getAssets(); final MetadataRepo resourceIndex = MetadataRepo.create(assetManager, FONT_NAME); mLoaderCallback.onLoaded(resourceIndex); } catch (Throwable t) { mLoaderCallback.onFailed(t); }
105. BundledEmojiCompatConfig 105 try { final AssetManager assetManager = mContext.getAssets(); final MetadataRepo resourceIndex = MetadataRepo.create(assetManager, FONT_NAME); mLoaderCallback.onLoaded(resourceIndex); } catch (Throwable t) { mLoaderCallback.onFailed(t); }
106. Reversing EmojiCompat 106 Rendering Configuring Loading a new font
107. Reversing EmojiCompat 107 Rendering Configuring Loading a new font
108. Fonts 108
109. Fonts 109 Ask a designer friend
110. Fonts 110 https://github.com/googlei18n/noto-emoji Ask a designer friend
111. Fonts 111
112. Fonts 112
113. 113 Extra emoji metadata is inserted in a binary format into the font and is parsed at runtime by EmojiCompat. The data is embedded in the font’s meta table, with the private tag Emji. Fonts “
114. AOSP 114
115. AOSP 115
116. AOSP 116
117. Fonts 117
118. Fonts 118 0001 0000 000d 0080 0003 0050 4342 4454 2ff6 d6c4 0000 3238 006b f7ae 4342 4c43 1fa6 ad17 006c 29e8 0000 27d4 4753 5542 b3fd 5c33 006c 51bc 0000 5f20 4f53 2f32 7604 67d7 0000 0158 0000 0060 636d 6170 89b8 f62c 0000 1ee0 0000 0de5 6865 6164 0c5c 788b 0000 00dc 0000 0036 6868 6561 1164 0ccb 0000 0114 0000 0024 686d 7478 c142 0000 0000 01b8 0000 1d26 6d61 7870 0a0f 0039 0000 0138 0000 0020 6e61 6d65 755e a57a 0000 2cc8 0000 054e 706f 7374 fb27 0084 0000 3218 0000 0020 7668 6561 0e5e 04cc 006c b0dc 0000 0024 766d 7478
119. TTX 119
120. TTX 120 https://github.com/fonttools/fonttools
121. TTX 121 ➜ ttx -z extfile NotoColorEmojiCompat.ttf
122. TTX 122 ➜ ttx -z extfile NotoColorEmojiCompat.ttf
123. createfont.py 123
124. Adds Emji metadata for EmojiCompat support createfont.py 124
126. Questions❓ @m_evans10