Implementing Design System components for Android applications

Transcript

1. Implementing Design System components for Android applications Miłosz Lewandowski Android dev @ Miquido @plnice
2. Play24 Design System
3. Challenge
4. No ready-to-use solution
5. Innovation
6. Assumptions & requirements + Libraries & utilities = Tech solution
7. Assumptions & requirements • Huge Design System ◦ Almost 100 different components ◦ 10-20 fonts ◦ 10-20 colors ◦ Few hundred icons • Living, constantly changing Design System • Long lifetime of the solution ◦ Design System = Investment
8. Assumptions & requirements • Quite a big team (7 Android developers) • Each of the developers: ◦ can use components on a daily basis ◦ can prepare new components ◦ can introduce changes to existing components • No/low entry barrier for new developers • Keeping the implementation consistent
9. Assumptions & requirements • Easy and quick: ◦ Preparing new components ◦ Introducing changes to existing components ◦ Using components • Clean API and clean implementation as a whole • Implementation always up-to-date • Testability ◦ Components can be prepared long before they are used in the application
10. Implementation
11. Where is the Design System’s place in the project? • Separate module • Separating the implementation: ◦ from the rest of the application ◦ from the old UI implementation (beware of conflicts!) • The dependency: ◦ clear ◦ optional • One repository, no need to version the design system
12. Where is the Design System’s place in the project? Design System Feature 1 Feature 2 Feature n app ...
13. Where is the Design System’s place in the project? Design System Feature 1 Feature 2 Feature n app ... Potential Build System blocker!
14. Elements of the Design Systems in the module Colors Typography Icons, Materials (shadows) Components /res/values/colors.xml /res/values/typography.xml /res/drawable/ ???
15. Components
16. Example: PromoCard Image Title Content line 1 Content line 2 • Image on the left, two text areas (title + content) on the right • Two styles: “default” and “important” (different fonts)
17. ConstraintLayout ImageView TextView TextView
18. Components - requirements • Separated from the layout ◦ Side goal: simplify layout files • Simple • Reusable • Configurable - ability to change string values, drawables etc. • Customizable - ability to show/hide subviews etc. • Styleable - ability to define and change component styles
19. Components - intuition in Android ecosystem • <include layout=”...” /> ◦ Too simple solution • Custom View ◦ Maybe... • Frameworks, e.g. Litho: A declarative UI framework for Android ◦ Too complex solution • Jetpack Compose ◦ Not ready yet
20. Custom View - the potential solution • Easy to use in layouts • Easily customizable via declared attributes • One-class implementation... ◦ ...plus layout file, plus style, plus attributes declaration...
21. Custom View - the potential solution <myapp.ui.PromoCard android:id=”@+id/promo_card” style=”@style/PromoCard” app:pcIcon=”@drawable/ic_promo_card” app:pcTitle=”@string/promo_card_title” app:pcContent=”@string/promo_card_content” />
22. Custom View - problems • Unstructured code • Boilerplate code, e.g. when parsing attributes • No possibility to style child views • No easy way to use in RecyclerView
23. Custom View - boilerplate code <declare-styleable name="PromoCard"> <attr name="pcIcon" format="reference" /> <attr name="pcTitle" format="string" /> <attr name="pcContent" format="string" /> </declare-styleable>
24. Custom View - boilerplate code init { context.theme.obtainStyledAttributes(attrs, R.styleable.PromoCard, 0, 0).apply { try { icon = getDrawable(R.styleable.PromoCard_pcIcon) title = getString(R.styleable.PromoCard_pcTitle) content = getString(R.styleable.PromoCard_pcContent) } finally { recycle() } } // TODO do something with obtained attributes
25. Custom View - boilerplate code + Android KTX init { context.theme.obtainStyledAttributes(attrs, R.styleable.PromoCard, 0, 0).use { icon = getDrawable(R.styleable.PromoCard_pcIcon) title = getString(R.styleable.PromoCard_pcTitle) content = getString(R.styleable.PromoCard_pcContent) } // TODO do something with obtained attributes
26. Custom View - styling child views ConstraintLayout ImageView TextView TextView @style/PromoCard @style/PromoCard.Important @style/PromoCardTitle @style/PromoCardTitle.Red
27. Custom View - RecyclerView • Additional code to prepare: ◦ ViewHolder for each of the components, for each style variant ◦ Additional layout file for each of the ViewHolders ◦ Adapter • Maybe we can do better?
28. Fixing Custom Views
29. Libraries • airbnb/paris • airbnb/epoxy • JakeWharton/RxBinding
30. Paris • “Define and apply styles to Android views programmatically” • Can be used to: ◦ Simplify working with Custom View attributes ◦ Style child views ◦ Define and apply component styles
31. Paris - custom view attributes class PromoCard @JvmOverloads constructor(... init { LayoutInflater.from(context).inflate(R.layout.c_promo_card, this, true) } ...
32. Paris - custom view attributes @Styleable("PromoCard") class PromoCard @JvmOverloads constructor(... init { LayoutInflater.from(context).inflate(R.layout.c_promo_card, this, true) } ...
33. Paris - custom view attributes @Styleable("PromoCard") class PromoCard @JvmOverloads constructor(... init { LayoutInflater.from(context).inflate(R.layout.c_promo_card, this, true) Paris.style(this).apply(attrs) } ...
34. Paris - custom view attributes fun setIcon(@DrawableRes drawableRes: Int) { iconView.setImageResource(drawableRes) } fun setTitle(title: CharSequence) { titleView.text = title }
35. Paris - custom view attributes @Attr(R.styleable.PromoCard_pcIcon) fun setIcon(@DrawableRes drawableRes: Int) { iconView.setImageResource(drawableRes) } fun setTitle(title: CharSequence) { titleView.text = title }
36. Paris - custom view attributes @Attr(R.styleable.PromoCard_pcIcon) fun setIcon(@DrawableRes drawableRes: Int) { iconView.setImageResource(drawableRes) } @Attr(R.styleable.PromoCard_pcTitle) fun setTitle(title: CharSequence) { titleView.text = title }
37. Paris - custom view attributes @Attr(R.styleable.PromoCard_pcIcon) fun setIcon(@DrawableRes drawableRes: Int) { iconView.setImageResource(drawableRes) } @Attr(R.styleable.PromoCard_pcTitle) fun setTitle(title: CharSequence) { titleView.text = title } ...
38. Paris - styling child views <attr name="pcTitleStyle" format="reference" />
39. Paris - styling child views init { LayoutInflater.from(context).inflate(R.layout.c_promo_card, this, true) Paris.style(this).apply(attrs) } ...
40. Paris - styling child views val titleView: TextView init { LayoutInflater.from(context).inflate(R.layout.c_promo_card, this, true) titleView = findViewById(R.id.title) Paris.style(this).apply(attrs) } ...
41. Paris - styling child views @StyleableChild(R.styleable.PromoCard_pcTitleStyle) val titleView: TextView init { LayoutInflater.from(context).inflate(R.layout.c_promo_card, this, true) titleView = findViewById(R.id.title) Paris.style(this).apply(attrs) } ...
42. Paris - styling child views <style name="PromoCard"> </style>
43. Paris - styling child views <style name="PromoCard"> </style> <style name="PromoCard.Important> </style>
44. Paris - styling child views <style name="PromoCard"> <item name="pcTitleStyle">@style/PromoCardTitle</item> </style> <style name="PromoCard.Important> </style>
45. Paris - styling child views <style name="PromoCard"> <item name="pcTitleStyle">@style/PromoCardTitle</item> </style> <style name="PromoCard.Important> <item name="pcTitleStyle">@style/PromoCardTitle.Red</item> </style>
46. Paris - defining and applying styles companion object { @Style val DEFAULT_STYLE = R.style.PromoCard @Style val IMPORTANT_STYLE = R.style.PromoCard_Important }
47. Paris - defining and applying styles val promoCard: PromoCard = … val isImportant: Boolean = … if (isImportant) { promoCard.style { addImportant() } }
48. Paris - defining and applying styles @Style val DEFAULT_STYLE
49. Paris - defining and applying styles @Style val DEFAULT_STYLE = promoCardStyle { }
50. Paris - defining and applying styles @Style val DEFAULT_STYLE = promoCardStyle { backgroundColorRes(R.color.white) }
51. Paris - defining and applying styles @Style val DEFAULT_STYLE = promoCardStyle { backgroundColorRes(R.color.white) pcTitleStyle(R.style.PromoCardTitle) }
52. Paris - defining and applying styles @Style val DEFAULT_STYLE = promoCardStyle { backgroundColorRes(R.color.white) pcTitleStyle(R.style.PromoCardTitle) } @Style val IMPORTANT_STYLE = promoCardStyle { }
53. Paris - defining and applying styles @Style val DEFAULT_STYLE = promoCardStyle { backgroundColorRes(R.color.white) pcTitleStyle(R.style.PromoCardTitle) } @Style val IMPORTANT_STYLE = promoCardStyle { addDefault() }
54. Paris - defining and applying styles @Style val DEFAULT_STYLE = promoCardStyle { backgroundColorRes(R.color.white) pcTitleStyle(R.style.PromoCardTitle) } @Style val IMPORTANT_STYLE = promoCardStyle { addDefault() pcTitleStyle(R.style.PromoCardTitle_Red) }
55. Paris - drawbacks • Annotation processor • Attributes applied in runtime must be supported by Paris
56. Epoxy • “Epoxy is an Android library for building complex screens in a RecyclerView” • Can be used to: ◦ Get rid of ViewHolders and their layouts ◦ Get rid of Adapters • Based on Models provided by Controller attached to RecyclerView • Built-in diffing and much more • Plays well with Paris!
57. Epoxy @Styleable("PromoCard") class PromoCard @JvmOverloads constructor(...
58. Epoxy @Styleable("PromoCard") @ModelView class PromoCard @JvmOverloads constructor(...
59. Epoxy @Attr(R.styleable.PromoCard_pcIcon) fun setIcon(@DrawableRes drawableRes: Int) { iconView.setImageResource(drawableRes) } @Attr(R.styleable.PromoCard_pcTitle) fun setTitle(title: CharSequence) { titleView.text = title }
60. Epoxy @Attr(R.styleable.PromoCard_pcIcon) @ModelProp fun setIcon(@DrawableRes drawableRes: Int) { iconView.setImageResource(drawableRes) } @Attr(R.styleable.PromoCard_pcTitle) fun setTitle(title: CharSequence) { titleView.text = title }
61. Epoxy @Attr(R.styleable.PromoCard_pcIcon) @ModelProp fun setIcon(@DrawableRes drawableRes: Int) { iconView.setImageResource(drawableRes) } @Attr(R.styleable.PromoCard_pcTitle) @TextProp fun setTitle(title: CharSequence) { titleView.text = title }
62. Epoxy data class DashboardScreenData( val promoCardData: PromoCardData? ) data class PromoCardData( @DrawableRes val icon: Int, @StringRes val title: Int, val content: String val isImportant: Boolean )
63. Epoxy class DashboardScreenController : TypedEpoxyController<DashboardScreenData>() { @Override fun buildModels(data: DashboardScreenData) { data.promoCardData?.let { promoCard { id("promo-card") icon(it.icon) title(it.title) content(it.content) } } }
64. Epoxy val recyclerView: EpoxyRecyclerView = ... val controller: DashboardScreenController = ... recyclerView.setController(controller) val data: DashboardScreenData = ... controller.setData(data)
65. Epoxy & Paris promoCard { id("promo-card") ... }
66. Epoxy & Paris promoCard { id("promo-card") ... if (it.isImportant) { } }
67. Epoxy & Paris promoCard { id("promo-card") ... if (it.isImportant) { withImportantStyle() } }
68. Epoxy - callbacks fun setClickListener(listener: View.OnClickListener?) { setOnClickListener(listener) }
69. Epoxy - callbacks @CallbackProp fun setClickListener(listener: View.OnClickListener?) { setOnClickListener(listener) }
70. Epoxy - callbacks @CallbackProp fun setClickListener(listener: View.OnClickListener?) { setOnClickListener(listener) } promoCard { id("promo-card") ... }
71. Epoxy - callbacks @CallbackProp fun setClickListener(listener: View.OnClickListener?) { setOnClickListener(listener) } promoCard { id("promo-card") ... clickListener { _ -> ... } }
72. Epoxy - callbacks @CallbackProp fun setIconClickListener(listener: View.OnClickListener?) { iconView.setOnClickListener(listener) } promoCard { id("promo-card") ... iconClickListener { _ -> ... } }
73. Epoxy - problems • Annotation processor
74. RxBinding • “RxJava binding APIs for Android's UI widgets” • Can be used to: ◦ Extend component API with reactive methods
75. RxBinding fun iconClicks(): Observable<Unit> = iconView.clicks() promoCard .iconClicks() .subscribe { ... }
76. Epoxy + Paris + RxBinding - Custom View structure @Styleable("Component") @ModelView class Component companion object { @Style(s) } @StyleableChild(s) init { /* inflate layout + apply Paris */ } @Attr(s) @ModelProp/@TextProp/... @CallbackProp(s) RxBinding methods attrs.xml <declare-styleable name="Component"> <attr ... /> ... </declare-styleable> c_component.xml (layout) styles.xml <style name="Component"> </style>
77. Testing components
78. Testing components • Demo app ◦ Separate application-type module ◦ Presenting components in a master-detail view ◦ Dynamically changing components data (e.g. short text vs long text) ◦ Can be shared with designers to allow an early look at the components • Other ideas (didn’t check them yet): ◦ Espresso - testing the component in an empty, test Activity ◦ Lint check prohibiting to use other views than ViewGroups and components
79. Final result
80. Final result • Module with reusable components • Well-defined components, with clean API and readable class structure • Easy to use: both in layouts and within RecyclerView • Can be tested in a demo app All requirements satisfied! :-)
81. Thank you! Questions?