Composing an Octopus

At TIER, we’re in the process of adopting Jetpack Compose into our quite large code base. One of the most significant milestones of this journey was to have our design system, Octopus, implemented in pure Compose UI. In this talk, I’ll present how we built Octopus Compose, and what we gained by reimplementing components instead of wrapping existing Views in AndroidView.

I gave this talk on the 2022 November edition of the Android Budapest Meetup on 2022.12.01.

Transcript

1. @stewemetal 👨💻 Senior Android Engineer @ TIER 
  Co-organizer of Kotlin Budapest István Juhos Composing an Octopus 🐙
2. @stewemetal Octopus?
3. @stewemetal
4. @stewemetal
5. @stewemetal @akoskovacsme
6. @stewemetal @akoskovacsme
7. @stewemetal Octopus Design System - B.C. • 100% Views with Data Binding and @BindingAdapters • Good component APIs & docs • Easy usage with View-based UI
8. @stewemetal Octopus Design System - B.C. • 100% Views with Data Binding and @BindingAdapters • Good component APIs & docs • Easy usage with View-based UI • Not fun to maintain 😢 OctopusButtonPrimary.kt R.layout.__internal_view_octopus_button R.styleable.OctopusButton R.drawable.__internal_octopus_button_background_primary @stewemetal
9. @stewemetal Octopus Design System - B.C. • 100% Views with Data Binding and @BindingAdapters • Good component APIs & docs • Easy usage with View-based UI • Not fun to maintain 😢 // We have to disable specific setters to prevent misuse of the view private var areSettersEnabled = false @stewemetal
10. @stewemetal Octopus Design System - B.C. // Disable the setters if it's not an internal call /** * Calling this method will have no effect. */ override fun setTextColor(color: Int) { if (areSettersEnabled || isInEditMode) { super.setTextColor(color) } }
11. @stewemetal Octopus Design System - B.C. // This is a known bug in Android Studio Design Editor // https://issuetracker.google.com/issues/36942641 if (isInEditMode) { setTypeface( typeface, if (textType.isBold) Typeface.BOLD else Typeface.NORMAL, ) } else { val fontRes = if (textType.isBold) R.font.tier_text_bold else R.font.tier_text_regular typeface = ResourcesCompat.getFont(context, fontRes) }
12. @stewemetal Octopus Design System What about Compose? 🤔
13. @stewemetal Octopus Design System • Possible approaches for us @marcoGomier @stewemetal
14. @stewemetal Octopus Design System • Possible approaches for us Views + AndroidView @Composable fun OctopusButtonPrimary( text: String, … onClick: () -> Unit, ) { AndroidView( factory = { context -> OctopusButtonPrimary(context) }, update = { view -> ... }, ) } @stewemetal
15. @stewemetal Octopus Design System • Possible approaches for us Views + AndroidView @Composable fun OctopusButtonPrimary( text: String, … onClick: () -> Unit, ) { AndroidView( factory = { context -> OctopusButtonPrimary(context) }, update = { view -> ... }, ) } @stewemetal
16. @stewemetal Octopus Design System • Possible approaches for us Views + AndroidView @Composable fun OctopusButtonPrimary( text: String, … onClick: () -> Unit, ) { AndroidView( factory = { context -> OctopusButtonPrimary( ContextThemeWrapper( context, R.style.Theme_Octopus, ) ) }, update = { view -> ... }, ) } @stewemetal
17. @stewemetal Octopus Design System • Possible approaches for us Views + AndroidView @Composable fun OctopusButtonPrimary( text: String, … onClick: () -> Unit, ) { AndroidView( factory = { context -> OctopusButtonPrimary( ContextThemeWrapper( context, R.style.Theme_Octopus, ) ).apply { setText(text) setOnClickListener { onClick() } ... } }, @stewemetal
18. @stewemetal Octopus Design System • Possible approaches for us Views + AndroidView + XMLs @Composable fun OctopusButtonPrimary( text: String, … onClick: () -> Unit, ) { AndroidView( factory = { context -> OctopusButtonPrimary( ContextThemeWrapper( context, R.style.Theme_Octopus, ) ).apply { setText(text) setOnClickListener { onClick() } ... } }, @stewemetal
19. @stewemetal Octopus Design System • Possible approaches for us @Composable fun OctopusButtonPrimary( text: String, … onClick: () -> Unit, ) { AndroidView( factory = { context -> OctopusButtonPrimary( ContextThemeWrapper( context, R.style.Theme_Octopus, ) ).apply { setText(text) setOnClickListener { onClick() } ... } }, @stewemetal Views + AndroidView + XMLs
20. @stewemetal Octopus Design System • Possible approaches for us @Composable public fun OctopusButtonPrimary( text: String, modifier: Modifier = Modifier, buttonSize: ButtonSize = NORMAL, enabled: Boolean = true, loading: Boolean = false, onClick: () -> Unit, ) { Box() { OctopusRippleTheme() { Button() { Text() } if (loading) { OctopusButtonLoader() } } } } Reimplement component s​ in ​ Compose @stewemetal
21. @stewemetal Octopus Design System • Possible approaches for us @Composable public fun OctopusButtonPrimary( text: String, modifier: Modifier = Modifier, buttonSize: ButtonSize = NORMAL, enabled: Boolean = true, loading: Boolean = false, onClick: () -> Unit, ) { Box() { OctopusRippleTheme() { Button() { Text() } if (loading) { OctopusButtonLoader() } } } } Reimplement component s​ in ​ Compose @stewemetal
22. @stewemetal Octopus Design System • Possible approaches for us Reimplement component s​ in ​ Compose @stewemetal @Composable public fun OctopusButtonPrimary( text: String, modifier: Modifier = Modifier, buttonSize: ButtonSize = NORMAL, enabled: Boolean = true, loading: Boolean = false, onClick: () -> Unit, ) { Box() { OctopusRippleTheme() { Button() { Text() } if (loading) { OctopusButtonLoader() } } } }
23. @stewemetal Octopus Design System • Possible approaches for us Reimplement component s​ in ​ Compose @stewemetal @Composable public fun OctopusButtonPrimary( text: String, modifier: Modifier = Modifier, buttonSize: ButtonSize = NORMAL, enabled: Boolean = true, loading: Boolean = false, onClick: () -> Unit, ) { Box() { OctopusRippleTheme() { Button() { Text() } if (loading) { OctopusButtonLoader() } } } }
24. @stewemetal • The benefits of pure Compose • Easier to maintain • No attachments to the legacy Views • Easy for teams to adopt Octopus Design System 🤩
25. @stewemetal • Downsides of our approach • A second implementation to maintain • Needs parity with the View components • Some APIs are still experimental Octopus Design System 🧐
26. @stewemetal Octopus Design System
27. @stewemetal Where should we start? Octopus Design System 🧐
28. @stewemetal Octopus Design System developer.android.com/jetpack/compose/designsystems
29. @stewemetal Octopus Design System • Three possible approaches • Customize Material • Extend Material • Go fully-custom
30. @stewemetal Octopus Design System • Three possible approaches • Customize Material • Extend Material • Go fully-custom
31. @stewemetal Octopus Design System • Three possible approaches • Customize Material • Extend Material • Go fully-custom - but use Material components
32. @stewemetal OctopusTheme
33. @stewemetal OctopusTheme.kt @Composable public fun OctopusTheme( isInDarkMode: Boolean = isSystemInDarkTheme(), 
 ... content: @Composable () -> Unit, ) { content() }
34. @stewemetal @Composable public fun OctopusTheme( isInDarkMode: Boolean = isSystemInDarkTheme(), colors: OctopusColors = OctopusColors.build(isInDarkMode), typography: OctopusTypography = OctopusTypography.build(), shapes: OctopusShapes = OctopusShapes.build(), dimensions: OctopusDimensions = OctopusDimensions.build(), spacings: OctopusSpacings = OctopusSpacings(), content: @Composable () -> Unit, ) { content() } OctopusTheme.kt
35. @stewemetal @Composable public fun OctopusTheme( isInDarkMode: Boolean = isSystemInDarkTheme(), colors: OctopusColors = OctopusColors.build(isInDarkMode), ... content: @Composable () -> Unit, ) { CompositionLocalProvider( LocalColors provides colors, ... ) { content() } } OctopusTheme.kt
36. @stewemetal @Composable public fun OctopusTheme( isInDarkMode: Boolean = isSystemInDarkTheme(), colors: OctopusColors = OctopusColors.build(isInDarkMode), ... content: @Composable () -> Unit, ) { CompositionLocalProvider( LocalColors provides colors, ... ) { content() } } OctopusTheme.kt
37. @stewemetal private val LocalColors = compositionLocalOf<OctopusColors> { error( 
 "No colors provided! Make sure to wrap all Octopus components 
 in an OctopusTheme." 
 ) } OctopusTheme.kt
38. @stewemetal public object OctopusTheme { public val colors: OctopusColors @Composable @ReadOnlyComposable get() = LocalColors.current ... } OctopusTheme.kt
39. @stewemetal OctopusTheme.kt developer.android.com/jetpack/compose/compositionlocal
40. @stewemetal OctopusColors.kt data class OctopusColors( public val primaryColors: PrimaryColors, public val secondaryColors: SecondaryColors, public val functionalColors: FunctionalColors, public val neutralColors: NeutralColors, public val semanticColors: SemanticColors, ... )
41. @stewemetal BasicColors.kt internal val green = Color(0xff067a72) internal val vehicleGreen = Color(0xff30e0cc) internal val blue = Color(0xff0e1a50) ... data class PrimaryColors internal constructor( public val green: Color = green, public val vehicleGreen: Color = vehicleGreen, public val blue: Color = blue, ... )
42. @stewemetal OctopusTheme
43. @stewemetal OctopusTheme
44. @stewemetal Composable Components
45. @stewemetal Designing Components in Compose goo.gle/compose-api-guidelines
46. @stewemetal • Have clean APIs • Only allow customization defined in the specs • Use values provided by OctopusTheme • Build on existing Material components Designing Components in Compose
47. @stewemetal • Have clean APIs • Only allow customization defined in the specs • Use values provided by OctopusTheme • Build on existing Material components (if possible) Designing Components in Compose
48. @stewemetal OctopusText
49. @stewemetal OctopusText.kt @Composable public fun OctopusText( text: String, modifier: Modifier = Modifier, textType: TextType = BODY_1, links: List<Link> = emptyList(), textAlignment: Alignment = NATURAL, overflow: TextOverflow = TextOverflow.Clip, style: OctopusStyle = OctopusStyle.getDefault(), ) { ... }
50. @stewemetal OctopusText.kt @Composable public fun OctopusText( text: String, modifier: Modifier = Modifier, textType: TextType = BODY_1, links: List<Link> = emptyList(), textAlignment: Alignment = NATURAL, overflow: TextOverflow = TextOverflow.Clip, style: OctopusStyle = OctopusStyle.getDefault(), ) { ... }
51. @stewemetal TextType.kt enum class TextType( private val id: Int, @ColorRes public val textColorRes: Int, public val textSizeSp: Float, public val lineHeightSp: Float, public val isBold: Boolean = true, public val maxLines: Int = Int.MAX_VALUE, public val isAllCaps: Boolean = false, ) { NUMBERS_1(0, R.color.__internal_octopusTextNumber, TEXT_SIZE_38, 
 LINE_HEIGHT_38, maxLines = 1), NUMBERS_2(1, R.color.__internal_octopusTextNumber, TEXT_SIZE_28, 
 LINE_HEIGHT_28, maxLines = 1), ... }
52. @stewemetal OctopusText.kt @Composable public fun OctopusText( text: String, modifier: Modifier = Modifier, textType: TextType = BODY_1, links: List<Link> = emptyList(), textAlignment: Alignment = NATURAL, overflow: TextOverflow = TextOverflow.Clip, style: OctopusStyle = OctopusStyle.getDefault(), ) { ... }
53. @stewemetal OctopusText.kt @Composable public fun OctopusText( text: String, modifier: Modifier = Modifier, textType: TextType = BODY_1, links: List<Link> = emptyList(), textAlignment: Alignment = NATURAL, overflow: TextOverflow = TextOverflow.Clip, style: OctopusStyle = OctopusStyle.getDefault(), ) { ... }
54. @stewemetal OctopusText.kt @Composable public fun OctopusText( ... textType: TextType = BODY_1, ... ) { ProvideTextStyle( value = OctopusTheme.typography.run { when (textType) { NUMBERS_1 -> text.numbers1 NUMBERS_2 -> text.numbers2 ... } }, ) { ... } }
55. @stewemetal OctopusText.kt @Composable public fun OctopusText( ... textType: TextType = BODY_1, ... ) { ProvideTextStyle( value = OctopusTheme.typography.run { when (textType) { NUMBERS_1 -> text.numbers1 NUMBERS_2 -> text.numbers2 ... } }, ) { ... } }
56. @stewemetal OctopusText.kt @Composable public fun OctopusText( ... textType: TextType = BODY_1, ... ) { ProvideTextStyle( value = OctopusTheme.typography.run { when (textType) { NUMBERS_1 -> text.numbers1 NUMBERS_2 -> text.numbers2 ... } }, ) { ... } }
57. @stewemetal OctopusText.kt @Composable public fun OctopusText( ... textType: TextType = BODY_1, ... ) { ProvideTextStyle(...) { Text( text = if (textType.isAllCaps) text.uppercase() else text, overflow = overflow, modifier = modifier, maxLines = textType.maxLines, // The rest is coming from LocalTextStyle.current 🤩 ) } }
58. @stewemetal Previews 🤩
59. @stewemetal Previews • At least light and dark variants • Multi-preview 🐬
60. @stewemetal Previews • At least light and dark variants • Multi-preview
61. @stewemetal OctopusPreviews @Preview( name = "1 - Light", showBackground = true, backgroundColor = 0xffffffff, // primaryBackgroundLight group = "Light/Dark", ) @Preview( name = "2 - Dark", showBackground = true, uiMode = UI_MODE_NIGHT_YES, backgroundColor = 0xff060a1e, // primaryBackgroundDark group = "Light/Dark", ) internal annotation class OctopusPreviewPrimaryBackground
62. @stewemetal OctopusPreviews @OctopusPreviewPrimaryBackground @Composable private fun OctopusTextPreview() { Column( modifier = Modifier.verticalScroll(rememberScrollState()), ) { OctopusTextComposeDemo() } }
63. @stewemetal OctopusPreviews @OctopusPreviewPrimaryBackground @Composable private fun OctopusTextPreview() { Column( modifier = Modifier.verticalScroll(rememberScrollState()), ) { OctopusTextComposeDemo() } }
64. @stewemetal OctopusPreviews @OctopusPreviewPrimaryBackground @Composable private fun OctopusTextPreview() { Column( modifier = Modifier.verticalScroll(rememberScrollState()), ) { OctopusTextComposeDemo() } }
65. @stewemetal OctopusPreviews @OctopusPreviewPrimaryBackground @Composable private fun OctopusTextPreview() { Column( modifier = Modifier.verticalScroll(rememberScrollState()), ) { OctopusTextComposeDemo() } }
66. @stewemetal OctopusPreviews @Composable public fun OctopusTextComposeDemo() { OctopusTheme { Column(...) { OctopusComposeDemoSubSection( title = "Numbers", ) { OctopusText( text = "Numbers 1", textType = NUMBERS_1, ) OctopusText( text = "Numbers 1 with long text...”, textType = NUMBERS_1, ) OctopusText(
67. @stewemetal OctopusPreviews @Composable public fun OctopusTextComposeDemo() { OctopusTheme { Column(...) { OctopusComposeDemoSubSection( title = "Numbers", ) { OctopusText( text = "Numbers 1", textType = NUMBERS_1, ) OctopusText( text = "Numbers 1 with long text...”, textType = NUMBERS_1, ) OctopusText(
68. @stewemetal In-app Octopus Demo
69. @stewemetal In-app Octopus Demo
70. @stewemetal In-app Octopus Demo
71. @stewemetal In-app Octopus Demo
72. @stewemetal Going Compose-first
73. @stewemetal Going Compose-first • Compose implementation behind the Views - ComposeView • Life with minimal XML, and more Kotlin ❤ • Eventually: Compose-only 😎 ⏩
74. @stewemetal • View wrappers around the Compose components • Custom attributes • Tooling attributes • UI Testing 🧐 Going Compose-first
75. @stewemetal Wrapping up
76. @stewemetal Octopus Compose 
 in the wild
77. @stewemetal Was it worth it?
78. @stewemetal It dependsTM
79. @stewemetal Conclusions • Having a design system to convert to Compose is already a win • Choose a path that makes sense for your project and timeline • Consider interoperability • Reuse what you can in Compose • Zero ➡ Hero takes time We’re still here 😄
80. @stewemetal • https://developer.android.com/jetpack/compose/designsystems • https://adambennett.dev/2020/12/migrating-your-design-system-to-jetpack- compose-part-1/ • https://www.droidcon.com/2022/06/28/custom-design-systems-in-compose/ • https://github.com/androidx/androidx/blob/androidx-main/compose/docs/ compose-api-guidelines.md Resources
81. @stewemetal • https://kotlindevday.com/session/adopting-jetpack-compose-safely/ Resources
82. @stewemetal • https://kotlindevday.com/session/adopting-jetpack-compose-safely/ Resources
83. @stewemetal Composing an Octopus 🐙 István Juhos 👨💻 Senior Android Engineer @ TIER 
  Co-organizer of Kotlin Budapest 
 Mastodon: androiddev.social/@stewemetal 
 Twitter: @stewemetal 
 Github: stewemetal 
 Thank you!