CodeMobile 2018 - Implementing a design language in Android

Transcript

2. Carrie Hall IMPLEMENTING A DESIGN LANGUAGE IN ANDROID
3. carrie_l_hall This is me! Carrie Hall @carrie_l_hall carriehall
4. carrie_l_hall the world’s largest music and audio platform
5. carrie_l_hall 90% mobile
6. carrie_l_hall 2010
7. carrie_l_hall 2010
8. carrie_l_hall 2011 2010
9. carrie_l_hall 2010 2014 2011 The interface is the brand
10. carrie_l_hall 2010 2011 2015 2014
11. carrie_l_hall 2010 2011 2014 2016 2015 material.io
12. carrie_l_hall DESIGN LANGUAGE
13. carrie_l_hall Centralised set of principles and reusable components using a shared language
14. carrie_l_hall Centralised set of principles and reusable components using a shared language
15. carrie_l_hall Centralised set of principles and reusable components using a shared language
16. carrie_l_hall Centralised set of principles and reusable components using a shared language
17. carrie_l_hall Centralised set of principles and reusable components using a shared language
18. carrie_l_hall
19. carrie_l_hall
20. carrie_l_hall SOUL SoundCloud User Experience Language
21. carrie_l_hall Foundation Atoms Components Component library Principles Style Guide
22. carrie_l_hall Foundation Atoms Components Principles Style Guide Component library
23. carrie_l_hall
24. carrie_l_hall
25. carrie_l_hall Foundation Atoms Components Principles Style Guide Component library
26. carrie_l_hall
27. carrie_l_hall Foundation Atoms Components Principles Style Guide Component library
28. carrie_l_hall
29. carrie_l_hall
30. carrie_l_hall
31. carrie_l_hall Foundation Atoms Components Component library Principles Style Guide
32. carrie_l_hall SKETCH
33. carrie_l_hall
34. carrie_l_hall ZEPLIN SKETCH
35. carrie_l_hall 216dp
36. carrie_l_hall 72dp
37. carrie_l_hall
38. carrie_l_hall Foundation Atoms Components Component library Principles Style Guide
39. carrie_l_hall
40. carrie_l_hall Consistent designs Faster iterations
41. carrie_l_hall
42. carrie_l_hall Clean code
43. carrie_l_hall Meaningful names
44. carrie_l_hall Decoupled
45. carrie_l_hall data
46. carrie_l_hall data
47. carrie_l_hall style data
48. carrie_l_hall style animations data
49. carrie_l_hall style accessibility animations data
50. carrie_l_hall limits style accessibility animations data
51. carrie_l_hall formatting data style accessibility animations limits
52. carrie_l_hall
53. carrie_l_hall Component library App Components Atoms Foundation
54. carrie_l_hall File > New > New module
55. carrie_l_hall Android Library
56. carrie_l_hall components manifests java res
57. carrie_l_hall components atoms
58. carrie_l_hall components atoms foundation
59. carrie_l_hall
60. carrie_l_hall compile project(":foundation") Components Atoms Foundation
61. carrie_l_hall compile project(":atoms") Components Atoms Foundation
62. carrie_l_hall Components Atoms Foundation App compile project(":components")
63. carrie_l_hall <public />
64. carrie_l_hall Library vs Module
65. carrie_l_hall Components Atoms Foundation App
66. carrie_l_hall <color name="soundcloudOrange">#ff5500</color> <color name="raven">#333333</color> <color name="platinum">#cccccc</color> <color name="cornflower">#3388dd</color> <color name="mint">#e5f3f3</color> colors.xml foundation
67. carrie_l_hall <color name="soundcloudOrange">#ff5500</color> <color name="raven">#333333</color> <color name="platinum">#cccccc</color> <color name="cornflower">#3388dd</color> <color name="mint">#e5f3f3</color> colors.xml foundation
68. carrie_l_hall <color name="soundcloudOrange">#ff5500</color> <color name="raven">#333333</color> <color name="platinum">#cccccc</color> <color name="cornflower">#3388dd</color> <color name="mint">#e5f3f3</color> colors.xml foundation
69. carrie_l_hall <color name="button_bg">@color/cornflower</color> colors.xml app
70. carrie_l_hall private fun Int.format(): String { return NumberFormat .getInstance(Locale.getDefault()) .format(this) } foundation
71. carrie_l_hall Components Atoms Foundation App
72. carrie_l_hall atoms
73. carrie_l_hall atoms 36dp 100dp
74. carrie_l_hall atoms 16dp 12dp
75. carrie_l_hall atoms 20dp 10dp 16dp
76. carrie_l_hall atoms Radius 4dp
77. carrie_l_hall atoms silver charcoal
78. carrie_l_hall <ConstraintLayout> <ImageView> <TextView> </ContraintLayout> atoms
79. carrie_l_hall res layout <> btn_heart_count.xml atoms
80. carrie_l_hall res values <> styles.xml atoms
81. carrie_l_hall res values <> styles.xml atoms
82. carrie_l_hall java com.soundcloud.uicomponents HeartCountButton c atoms
83. carrie_l_hall class HeartCountButton : ConstraintLayout HeartCountButton c atoms
84. carrie_l_hall .inflate(R.layout.btn_heart_count,this,true) atoms HeartCountButton c
85. carrie_l_hall <com.soundcloud.atoms.HeartCountButton android:id="@+id/btn_heart_count" android:layout_width="wrap_content" android:layout_height="wrap_content" /> app
86. carrie_l_hall interface HeartCount { fun count(count: Int) fun enable() fun disable() } atoms
87. carrie_l_hall override fun count(count: Int) { count_text.text = count.toString() } atoms
88. carrie_l_hall override fun count(count: Int) { count_text.text = count.format() } atoms
89. carrie_l_hall override fun enable() { heart.isSelected = true } atoms
90. carrie_l_hall override fun enable() { heart.animate() } atoms
91. carrie_l_hall heartCountButton.count(8355) .enable() .disable() app
92. carrie_l_hall Components Atoms Foundation App
93. carrie_l_hall components
94. carrie_l_hall CompactListItem c <> compact_list_item.xml ... components
95. carrie_l_hall <com.soundcloud.components.CompactListItem android:id="@+id/compact_list_item" android:layout_width="match_parent" android:layout_height="wrap_content" /> app
96. carrie_l_hall compactListItem.username(“Username”) .location(“Location”) .followCount(6540) .following(false) .pro(true) app
97. carrie_l_hall data class CompactListItemViewModel( val lineOne: String, val lineTwo: String, val followCount: Int, val isFollowing: Boolean, val isPro: Boolean, val image: Bitmap ) {} components
98. carrie_l_hall data class CompactListItemViewModel( val lineOne: String = "", val lineTwo: String = "", val followCount: Int, val isFollowing: Boolean = false, val isPro: Boolean = false, val image: Bitmap = null ) {} components
99. carrie_l_hall CompactListItemViewModel("Username", "Location", 6540, isPro = true) app
100. carrie_l_hall compactListItem.render(viewModel) app
101. carrie_l_hall Components Atoms Foundation App Sample App
102. carrie_l_hall Fast
103. carrie_l_hall Showcase
104. carrie_l_hall Sample data
105. carrie_l_hall
106. carrie_l_hall tools:src="@tools:sample/avatars" tools:src="@tools:sample/first_names" tools:src="@tools:sample/cities"
107. carrie_l_hall
108. carrie_l_hall Edge cases
109. carrie_l_hall
110. carrie_l_hall But how did we do it?
111. carrie_l_hall Future plans
112. carrie_l_hall I want one!
113. carrie_l_hall Benefits
114. carrie_l_hall Work with your design team
115. carrie_l_hall Build a library which everyone understands
116. carrie_l_hall Maintain a sample app
117. @carrie_l_hall THANK YOU