Composing an Octopus

@stewemetal
👨💻 Senior Android Engineer @ TIER
 

Co-organizer of Kotlin Budapest
István Juhos
Composing an Octopus 🐙

View Slide

@stewemetal
Octopus?

View Slide

@stewemetal

View Slide

@stewemetal
@akoskovacsme

View Slide

@stewemetal
Octopus Design System - B.C.
● 100% Views with Data Binding and @BindingAdapters

● Good component APIs & docs

● Easy usage with View-based UI

View Slide

@stewemetal



● Not fun to maintain 😢
OctopusButtonPrimary.kt

R.layout.__internal_view_octopus_button

R.styleable.OctopusButton

R.drawable.__internal_octopus_button_background_primary

@stewemetal

View Slide

@stewemetal



● Not fun to maintain 😢
// We have to disable specific setters to prevent misuse of the view

private var areSettersEnabled = false

@stewemetal

View Slide

@stewemetal
// 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)

}

}

View Slide

@stewemetal
// 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)

}

View Slide

@stewemetal
Octopus Design System
What about Compose?
🤔

View Slide

@stewemetal
● Possible approaches for us
@marcoGomier @stewemetal

View Slide

@stewemetal
Views + AndroidView
@Composable

fun OctopusButtonPrimary(

text: String,

…

onClick: () -> Unit,

) {

AndroidView(

factory = { context ->

OctopusButtonPrimary(context)

},

update = { view ->

...

},

)

}

@stewemetal

View Slide

@stewemetal
Views + AndroidView
@Composable


text: String,

…


) {

AndroidView(


OctopusButtonPrimary(

ContextThemeWrapper(

context,

R.style.Theme_Octopus,

)

)

},

update = { view ->

...

},

)

}

@stewemetal

View Slide

@stewemetal
Views + AndroidView
@Composable


text: String,

…


) {

AndroidView(




context,


)

).apply {

setText(text)

setOnClickListener {

onClick()

}

...

}

},

@stewemetal

View Slide

@stewemetal
Views + AndroidView + XMLs
@Composable


text: String,

…


) {

AndroidView(




context,


)

).apply {

setText(text)


onClick()

}

...

}

},

@stewemetal

View Slide

@stewemetal
@Composable


text: String,

…


) {

AndroidView(




context,


)

).apply {

setText(text)


onClick()

}

...

}

},

@stewemetal
Views + AndroidView + XMLs

View Slide

@stewemetal
@Composable

public fun OctopusButtonPrimary(

text: String,

modifier: Modifier = Modifier,

buttonSize: ButtonSize = NORMAL,

enabled: Boolean = true,

loading: Boolean = false,


) {

Box() {

OctopusRippleTheme() {

Button() {

Text()

}

if (loading) {

OctopusButtonLoader()

}

}

}

}

Reimplement component
s

in

Compose
@stewemetal

View Slide

@stewemetal
Reimplement component
s

in

Compose
@stewemetal
@Composable

public fun OctopusButtonPrimary(

text: String,


buttonSize: ButtonSize = NORMAL,

enabled: Boolean = true,

loading: Boolean = false,


) {

Box() {

OctopusRippleTheme() {

Button() {

Text()

}

if (loading) {

OctopusButtonLoader()

}

}

}

}

View Slide

@stewemetal
● The benefits of pure Compose

● Easier to maintain

● No attachments to the legacy Views

● Easy for teams to adopt
🤩

View Slide

@stewemetal
● Downsides of our approach

● A second implementation to maintain

● Needs parity with the View components

● Some APIs are still experimental
🧐

View Slide

@stewemetal

View Slide

@stewemetal
Where should we start?
🧐

View Slide

@stewemetal
developer.android.com/jetpack/compose/designsystems

View Slide

@stewemetal
● Three possible approaches

● Customize Material

● Extend Material

● Go fully-custom

View Slide

@stewemetal
● Three possible approaches

● Customize Material

● Extend Material

● Go fully-custom - but use Material components

View Slide

@stewemetal
OctopusTheme

View Slide

@stewemetal
OctopusTheme.kt
@Composable

public fun OctopusTheme(

isInDarkMode: Boolean = isSystemInDarkTheme(),
 
...

content: @Composable () -> Unit,

) {

content()

}

View Slide

@stewemetal
@Composable



colors: OctopusColors = OctopusColors.build(isInDarkMode),

typography: OctopusTypography = OctopusTypography.build(),

shapes: OctopusShapes = OctopusShapes.build(),

dimensions: OctopusDimensions = OctopusDimensions.build(),

spacings: OctopusSpacings = OctopusSpacings(),


) {

content()

}

OctopusTheme.kt

View Slide

@stewemetal
@Composable



colors: OctopusColors = OctopusColors.build(isInDarkMode),

...


) {

CompositionLocalProvider(

LocalColors provides colors,

...

) {

content()

}

}

OctopusTheme.kt

View Slide

@stewemetal
private val LocalColors = compositionLocalOf {

error(
 
"No colors provided! Make sure to wrap all Octopus components
 
in an OctopusTheme."
 
)

}

OctopusTheme.kt

View Slide

@stewemetal
public object OctopusTheme {

public val colors: OctopusColors

@Composable

@ReadOnlyComposable

get() = LocalColors.current

...

}
OctopusTheme.kt

View Slide

@stewemetal
OctopusTheme.kt
developer.android.com/jetpack/compose/compositionlocal

View Slide

@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,

...

)

View Slide

@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,

...

)

View Slide

@stewemetal
OctopusTheme

View Slide

@stewemetal
Composable
Components

View Slide

@stewemetal
Designing Components in Compose
goo.gle/compose-api-guidelines

View Slide

@stewemetal
● Have clean APIs

● Only allow customization defined in the specs

● Use values provided by OctopusTheme

● Build on existing Material components

View Slide

@stewemetal
● Have clean APIs

● Only allow customization defined in the specs

● Use values provided by OctopusTheme

● Build on existing Material components (if possible)

View Slide

@stewemetal
OctopusText

View Slide

@stewemetal
OctopusText.kt
@Composable

public fun OctopusText(

text: String,


textType: TextType = BODY_1,

links: List = emptyList(),

textAlignment: Alignment = NATURAL,

overflow: TextOverflow = TextOverflow.Clip,

style: OctopusStyle = OctopusStyle.getDefault(),

) {

...

}

View Slide

@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),

...

}

View Slide

@stewemetal
OctopusText.kt
@Composable


text: String,



links: List = emptyList(),

textAlignment: Alignment = NATURAL,

overflow: TextOverflow = TextOverflow.Clip,

style: OctopusStyle = OctopusStyle.getDefault(),

) {

...

}

View Slide

@stewemetal
OctopusText.kt
@Composable


...


...

) {

ProvideTextStyle(

value = OctopusTheme.typography.run {

when (textType) {

NUMBERS_1 -> text.numbers1

NUMBERS_2 -> text.numbers2

...

}

},

) { ... }

}

View Slide

@stewemetal
OctopusText.kt
@Composable


...


...

) {

ProvideTextStyle(...) {

Text(

text = if (textType.isAllCaps) text.uppercase() else text,

overflow = overflow,

modifier = modifier,

maxLines = textType.maxLines,

// The rest is coming from LocalTextStyle.current 🤩

)

}

}

View Slide

@stewemetal
Previews 🤩

View Slide

@stewemetal
Previews
● At least light and dark variants

● Multi-preview
🐬

View Slide

@stewemetal
Previews
● At least light and dark variants

● Multi-preview

View Slide

@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

View Slide

@stewemetal
OctopusPreviews
@OctopusPreviewPrimaryBackground

@Composable

private fun OctopusTextPreview() {

Column(

modifier = Modifier.verticalScroll(rememberScrollState()),

) {

OctopusTextComposeDemo()

}

}

View Slide

@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(

View Slide

@stewemetal
In-app
Octopus Demo

View Slide

@stewemetal
In-app Octopus Demo

View Slide

@stewemetal
Going
Compose-first

View Slide

@stewemetal
Going Compose-first
● Compose implementation behind the Views - ComposeView

● Life with minimal XML, and more Kotlin ❤

● Eventually: Compose-only 😎
⏩

View Slide

@stewemetal
● View wrappers around the Compose components

● Custom attributes

● Tooling attributes

● UI Testing
🧐
Going Compose-first

View Slide

@stewemetal
Wrapping up

View Slide

@stewemetal
Octopus Compose
 
in the wild

View Slide

@stewemetal
Was it worth it?

View Slide

@stewemetal
It dependsTM

View Slide

@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 😄

View Slide

@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

View Slide

@stewemetal
● https://kotlindevday.com/session/adopting-jetpack-compose-safely/
Resources

View Slide

@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!

View Slide

Composing an Octopus

Composing an Octopus

István Juhos

More Decks by István Juhos

Other Decks in Programming

Featured

Transcript