Pushing Android’s Boundaries For Pinterest’s New Look

Talk given at Droidcon NYC 2016

https://droidcon-server.herokuapp.com/showSession/72009

Transcript

1. Pushing Android’s boundaries for Pinterest’s 
 new look
2. Core Experience team — Speed / Stability / Dev velocity Lin Wang Shopping team — Making Pins buyable Thorben Primke
3. We’re building 
 the world’s catalog of ideas
4. 12:3 0 Discover
5. 12:3 0 12:3 0 Discover Save
6. 12:3 0 12:3 0 Discover Save Do 12:3 0
7. Design system Layout system Typography Animation Agenda 1 2 3 4
8. Design system
9. Brio
10. One framework for all
11. Layout system Grid 12:3 0
12. Layout system Grid Device group 12:3 0
13. Layout system Grid Device group Brio point 12:3 0
14. Layout system Grid Device group Brio point Design specs 12:3 0
15. Typography Sizing Typography is awesome. Delights pinners.
16. Typography Sizing Leading Typography is awesome. Delights pinners.
17. Typography Sizing Leading Tracking Typography is awesome. Delights pinners.
18. Typography Sizing Leading Tracking Word spacing Typography is awesome. Delights pinners.
19. Typography Sizing Leading Tracking Word spacing Auto fitting Typography is awesome. Delights pinners.
20. Animation
21. Core UI Componets The building blocks
22. Layout system
23. Layout system Brio grid 12:3 0 Brio point dp dp dp 3x3 4x4 6x5
24. Brio point •Basic unit of measurement •Device size independent •Platform independent 3x3 sw160dp 4x4 sw360dp 6x5 sw480dp dp Boint dp Boint Boint dp Brio point (Boint)
25. Brio point Boint to DP ratio Device width in DP Category Device Horizontal DP per Boint Vertical DP per Boint sw160dp Small Phone sw360dp Phone sw480dp Note sw600dp Tablet Boint dp
26. Brio point Boint to DP ratio Device width in DP Category Device Horizontal DP per Boint Vertical DP per Boint sw160dp Small Phone Samsung S3 Mini sw360dp Phone Samsung S6 sw480dp Note Galaxy Note 4 sw600dp Tablet Nexus 9 Boint dp
27. Brio point Boint to DP ratio Device width in DP Category Device Horizontal DP per Boint Vertical DP per Boint sw160dp Small Phone Samsung S3 Mini 3 3 sw360dp Phone Samsung S6 4 4 sw480dp Note Galaxy Note 4 6 5 sw600dp Tablet Nexus 9 8 6 Boint dp
28. Brio point Design example •Pin representation •1 brio point is 4dp horizontally and vertically 2dp Boint dp dp Boint dp Boint
29. Brio grid •12 columns •13 gutters 12:3 0 column gutter Framework
30. Framework •12 columns •13 gutters •Fixed gutter width: 4 Brio points •Variable column width 12:3 0 column gutter Brio grid
31. Brio grid •12 columns •13 gutters •Fixed gutter width: 4 Brio points •Variable column width •Content aligned on columns •Content acquire more attentions 12:3 0 12:3 0 column gutter Framework
32. Brio grid Brio units 12:30 10bt 1bt 6c Boint dp dp Boint dp Boint column gutter
33. Brio grid 12:30 10bt 1bt 6c James Greenfield This is a sample message that crosses over in two lines and goes on for a while. 27 Jun Alvin Armstrong This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2h Lisa Richards This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 10h Lisa Richards This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 10h Owen Brown This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2d Owen Brown This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2d Lester Nygaard This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 2d 2d Lorne Malvo This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 18 Jul Messages 12:00 4c 1bt 10bt
34. Brio grid 12:30 10bt 1bt 6c James Greenfield This is a sample message that crosses over in two lines and goes on for a while. 27 Jun Alvin Armstrong This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2h Lisa Richards This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 10h Lisa Richards This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 10h Owen Brown This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2d Owen Brown This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2d Lester Nygaard This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 2d 2d Lorne Malvo This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 18 Jul Messages 12:00 4c 1bt 10bt
35. Brio grid 12:30 10bt 1bt 6c James Greenfield This is a sample message that crosses over in two lines and goes on for a while. 27 Jun Alvin Armstrong This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2h Lisa Richards This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 10h Lisa Richards This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 10h Owen Brown This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2d Owen Brown This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2d Lester Nygaard This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 2d 2d Lorne Malvo This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 18 Jul Messages 12:00 4c 1bt 10bt
36. Brio grid 12:30 10bt 1bt 6c James Greenfield This is a sample message that crosses over in two lines and goes on for a while. 27 Jun Alvin Armstrong This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2h Lisa Richards This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 10h Lisa Richards This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 10h Owen Brown This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2d Owen Brown This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 2d Lester Nygaard This is a sample message that crosses over in two lines and goes on for a while.This is a sample message. 2d 2d Lorne Malvo This is a sample message that crosses over in two lines and goes on for a while.This is a sample message that crosses over in two lines and goes on fo… 18 Jul Messages 12:00 4c 1bt 10bt 6c 10bt 1bt
37. Brio in xml 12:30 10bt 1bt 6c Define custom attributes in attrs.xml Support dp, Brio point, column, gutter 2 1
38. Brio in xml Define custom attributes in attrs.xml Support dp, Brio point, column, gutter 2 1
39. Example: Pinterest Explore 12:3 0
40. 12:3 0 12:3 0 Example: Pinterest Explore
41. 12:3 0 12:3 0 Example: Pinterest Explore
42. 12:3 0 12:3 0 Example: Pinterest Explore
43. Generic layout inflater
44. Generic layout inflater
45. Generic layout inflater
46. Generic layout inflater
47. Lint and validation Custom lint rule •Lint API, resourceXmlDetector •Integrated in building process
48. Lint and validation Custom lint rule •Pattern correctness • valid: 5bt, g2-g5, 3dp, etc • invalid: 2, abc, -, 3bts, g3-g1 •Android and Brio attributes uniqueness • choose either brio:paddingLeft or android:paddingLeft •String reference validation • brio:paddingLeft=“@string/dimen_common_padding_1bt” • <string name=“dimen_common_padding_1bt”>1bt</string>
49. Performance Average time (ms) spent on view inflation • org - Original settings view • profile - Settings view + 100 text views • profile_brio - Settings view + 100 text views (Brio attributes) • profile_huge - Settings view + 1000 text views (Brio attributes) Galaxy S7 org profile profile_brio profile_huge Use generic inflater (off) use hooks (off) 11.83 45.84 46.31 391.52 Use generic inflater (on) use hooks (off) 13.03 44.75 47.15 371.63 Use generic inflater (on) use hooks (on) 15.82 58.82 69.69 589.36
50. Performance Average time (ms) spent on view inflation Galaxy S7 org profile profile_brio profile_huge Use generic inflater (off) use hooks (off) 11.83 45.84 46.31 391.52 Use generic inflater (on) use hooks (off) 13.03 44.75 47.15 371.63 Use generic inflater (on) use hooks (on) 15.82 58.82 69.69 589.36 • org - Original settings view • profile - Settings view + 100 text views • profile_brio - Settings view + 100 text views (Brio attributes) • profile_huge - Settings view + 1000 text views (Brio attributes)
51. Inflate in Java Internal Brio conversion functions •Performance • Most efficient without xml parsing •Readability • Poor, boilerplate code
52. (Kotlin) •Domain specific language (DSL) for Android •Written in Kotlin •Built on class extension Anko
53. Anko example
54. Anko Brio attributes in ViewExt.kt •vboint(3) •hboint(5) •gutter() •range(C1, C2) •gStart() •gEnd()
55. (Kotlin) •Readability • as clear as xml •Performance • No xml parsing, same as Do it in Java •Usability • Most xml attributes are defined in DSL • Easy to add if not Anko
56. Typography Aa
57. Typography
58. Text sizing Avoid specifying font sizes
 •10 text styles •Set programmatically •Set via XML
59. Text sizing Avoid specifying font sizes
 •10 text styles •Set programmatically •Set via XML
60. Text sizing Avoid specifying font sizes
 •10 text styles •Set programmatically •Set via XML
61. Text sizing In XML Programmatically
62. Text sizing In XML layout Programmatically
63. Text Sizing •Leading •Tracking •Word spacing
64. Leading support Line spacing
65. Leading support Available since day one •Line spacing in TextView (Api 1) •Multiplier, additive value Typography is awesome. Delights pinners. Typography is awesome. Delights pinners. Typography is awesome. Delights pinners.
66. Tracking support Letter spacing
67. Tracking support Lollipop for the win •Tracking or letter spacing (Api 21) •Value in “em” Typography is awesome. Delights pinners. Typography is awesome. Delights pinners. Typography is awesome. Delights pinners.
68. Tracking support - <21?
69. Tracking support Spans to the rescue •What is a span? •Links, bold, image, scaling
70. Tracking support Spans to the rescue •ScaleXSpan •Non-breaking space •Increase/decrease space width
71. Tracking support Spans to the rescue •ScaleXSpan •Non-breaking space •Increase/decrease space width D r o i d c o n N Y C
72. Tracking support Spans to the rescue … D r o i d c o n N Y C D r o i d c o n N Y C •ScaleXSpan •Non-breaking space •Increase/decrease space width
73. Word spacing support Closing the gap
74. Word spacing support Beyond the limits •No TextView support •Span technique Droidcon NYC Droidcon NYC Droidcon NYC
75. Demo
76. Auto fitting support Avoids endless tweaking •Internationalization •Single or multi line •Max reduce two text styles •Last option ellipsis
77. Auto fitting support Avoids endless tweaking •View width required •StaticLayout
78. Auto fitting support Keeping the box •TextPaint for measuring •Bounding box NYC ROME ROME
79. Beyond TextView Reusing the foundation •EditText •Button •TextPaint
80. Beyond TextView Reusing the foundation •EditText •Button •TextPaint
81. Beyond TextView Reusing the foundation •EditText •Button •TextPaint
82. Beyond TextView Reusing the foundation •Shared XML attributes •Shared IntDef for TextSize and Font •Shared logic for sizing
83. Beyond TextView Reusing the foundation Leading Tracking (21+) Word spacing AutoFit TextView x x x x EditText x x Button x x x TextPaint x x
84. Animations
85. Tap state animations
86. Tap state animations
87. Feedback to the user •Solution at the platform level Tap state animations
88. Feedback to the user •Solution at the platform level •Changeable across all usages Tap state animations
89. Feedback to the user •Solution at the platform level •Changeable across all usages Tap state animations
90. Feedback to the user •Solution at the platform level •Changeable across all usages •Support nested elements Tap state animations
91. Feedback to the user •Solution at the platform level •Changeable across all usages •Support nested elements Tap state animations
92. Feedback to the user •Solution at the platform level •Changeable across all usages •Support nested elements •No interference Tap state animations Button
93. Design system Layout system Typography Animation Agenda 1 2 3 4
94. We are hiring! thorben@pinterest.com https://engineering.pinterest.com/ Thorben Primke Lin Wang linwang@pinterest.com