Composing a Design System

@stewemetal
Composing a

Design System
👨💻 Senior Android Engineer @ TIER
 

Co-organizer of Kotlin Budapest
 
🌐 istvanjuhos.dev
István Juhos

View Slide

@stewemetal
@akoskovacsme

View Slide

@stewemetal
Octopus Design System - B.C.
● Customised Android Views and ViewGroups

● Data Binding and @BindingAdapters

● Lots of XML files and custom XML attributes

View Slide

@stewemetal


OctopusButtonPrimary.kt

R.layout.__internal_view_octopus_button

R.styleable.OctopusButton

R.drawable.__internal_octopus_button_background_primary

...

@stewemetal

View Slide

@stewemetal


class OctopusText @JvmOverloads constructor(

context: Context,

attrs: AttributeSet? = null,

defStyleAttr: Int = 0,

) : AppCompatTextView(context, attrs, defStyleAttr)

@stewemetal

View Slide

@stewemetal
private fun updateStyle() {

areSettersEnabled = true

...

setTextColor(ContextCompat.getColor(context, colorFromTextType))

...

areSettersEnabled = false

}

OctopusText : AppCompatTextView

// We have to disable specific setters to prevent misuse of the view

private var areSettersEnabled = false

View Slide

@stewemetal
/**

* Calling this method will have no effect.

*/

override fun setTextColor(color: Int) {

if (areSettersEnabled || isInEditMode) {

super.setTextColor(color)

}

}
OctopusText : AppCompatTextView

// We have to disable specific setters to prevent misuse of the view

private var areSettersEnabled = false

View Slide

@stewemetal
Adopting Compose
 
🤔

View Slide

@stewemetal
Adopting Compose
● Possible approaches to consider
@marcoGomier @stewemetal

View Slide

@stewemetal
Adopting Compose
Views + AndroidView
@Composable

fun OctopusButtonPrimary(

text: String,

...

onClick: () -> Unit,

) {

AndroidView(

factory = { context ->

OctopusButtonPrimary(

ContextThemeWrapper(

context,

R.style.Theme_Octopus,

)

)

},

update = { view ->

...

},

)

}

@stewemetal

View Slide

@stewemetal
Adopting Compose
Views + AndroidView
@Composable


text: String,

...


) {

AndroidView(




context,


)

).apply {

setText(text)

setOnClickListener {

onClick()

}

...

}

},

update = { view ->

@stewemetal

View Slide

@stewemetal
Adopting Compose
Views + AndroidView + XMLs
@Composable


text: String,

...


) {

AndroidView(




context,


)

).apply {

setText(text)


onClick()

}

...

}

},

update = { view ->

@stewemetal

View Slide

@stewemetal
Adopting Compose
@Composable


text: String,

...


) {

AndroidView(




context,


)

).apply {

setText(text)


onClick()

}

...

}

},

update = { view ->

@stewemetal
Views + AndroidView + XMLs

View Slide

@stewemetal
Adopting Compose
@Composable

public fun OctopusButtonPrimary(

text: String,

modifier: Modifier = Modifier,

buttonSize: ButtonSize = NORMAL,

enabled: Boolean = true,

loading: Boolean = false,

destructive: Boolean = false,


) {

Box() {

Button(…) {

Text(text)

}

if (loading) {

OctopusButtonLoader()

}

}

}

Reimplement component
s

in

Compose
@stewemetal

View Slide

@stewemetal
Adopting Compose
Reimplement component
s

in

Compose
@stewemetal
@Composable

public fun OctopusButtonPrimary(

text: String,


buttonSize: ButtonSize = NORMAL,

enabled: Boolean = true,

loading: Boolean = false,

destructive: Boolean = false,


) {

Box() {

Button(…) {

Text(text)

}

if (loading) {

OctopusButtonLoader()

}

}

}

View Slide

@stewemetal
● The benefits of recreating components in Compose

● Easier to maintain than custom Views

● No attachments to the legacy Views and tech debt

● Octopus is close to Material

● A new experience for our teams
Adopting Compose
🤩

View Slide

@stewemetal
● Downsides of recreating components in Compose

● Lack of experience in Compose APIs

● A second implementation to maintain

● Parity with the View-based components
Adopting Compose
🧐

View Slide

@stewemetal
Adopting Compose

View Slide

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

View Slide

@stewemetal
Composing Octopus
● Three possible approaches (not just for the theme!)

● Customize Material

● Extend Material

● Go fully-custom

View Slide

@stewemetal
Composing Octopus
● Three possible approaches (not just for the theme!)

● Customize Material

● Extend Material

● Go fully-custom - but use Material components where possible

View Slide

@stewemetal
OctopusTheme

View Slide

@stewemetal
OctopusTheme
@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

View Slide

@stewemetal
@Composable



colors: OctopusColors = OctopusColors.build(isInDarkMode),

...


) {

CompositionLocalProvider(

LocalColors provides colors,

...

) {

content()

}

}

OctopusTheme

View Slide

@stewemetal
private val LocalColors = compositionLocalOf {

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

}

OctopusTheme

View Slide

@stewemetal
public object {

public val : OctopusColors

@Composable

@ReadOnlyComposable

get() = LocalColors.current

...

}
OctopusTheme
colors
OctopusTheme

View Slide

@stewemetal
Modifier

.background(

color = . .semanticColors.backgroundPrimary,

)

OctopusTheme
colors
OctopusTheme

View Slide

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

View Slide

@stewemetal
Composable
Components

View Slide

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

View Slide

@stewemetal
● Octopus Compose component implementations

● should follow the Jetpack Compose library API guidelines

● should look and feel like the View ones (DS specs ✅ )

● should use values provided by OctopusTheme

● should be built on existing Material components, where viable
Designing Components in Compose

View Slide

@stewemetal
Component example - OctopusText
@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
Configuration example - TextType
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,

) {

TITLE_1(0, R.color.__internal_octopusTextTitleNormal, SIZE_TITLE_1,
 
LINE_HEIGHT_40, maxLines = 1),

BODY_1(1, R.color.__internal_octopusTextBody, TEXT_SIZE_16,
 
LINE_HEIGHT_20, isBold = false),

...

}

View Slide

@stewemetal
TextType usage with Composables
OctopusText(

text = "Title 1 (Normal)",

textType = TITLE_1,

)

OctopusText(

text = "Title 1 (Informative)",

textType = TITLE_1_INFORMATIVE,

)

OctopusText(

text = "Title 1 (Destructive)",

textType = TITLE_1_DESTRUCTIVE,

)

...

View Slide

@stewemetal

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Title 1 (Normal)"

app:textType="title1"

/>



android:text="Title 1 (Informative)"

app:textType=“title1Informative"

/>

TextType usage with Views

View Slide

@stewemetal

...

...

😵💫
TextType usage with Views

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

)

annotation class OctopusPreviewPrimaryBackground

View Slide

@stewemetal
Previews
@OctopusPreviewPrimaryBackground

@Composable

fun OctopusTextPreview() {

Column(

modifier = Modifier.verticalScroll(rememberScrollState()),

) {

OctopusTextComposeDemo()

}

}

View Slide

@stewemetal
Previews in the in-app Octopus demo
@Composable

fun OctopusTextComposeDemo() {

OctopusTheme {

Column(...) {

OctopusComposeDemoSubSection(

title = “Titles",

) {

OctopusText(

text = "Title 1 (Normal)",

textType = TITLE_1,

)

OctopusText(

text = "Title 1 (Informative)",

textType = TITLE_1_INFORMATIVE,

)

OctopusText(

View Slide

@stewemetal

...


app:textType="title1" />

...

View Slide

@stewemetal

...



...

android:id="@+id/composeView"


android:layout_height="wrap_content" />

View Slide

@stewemetal

...



...

android:id="@+id/composeView"


android:layout_height="wrap_content" />

...

View Slide

@stewemetal
findViewById(R.id.composeView)?.apply {

setContent {

OctopusTheme {

OctopusComposeDemoSection {

OctopusTextComposeDemo()

}

}

}

}

...

View Slide

@stewemetal
In-app Octopus Demo

View Slide

@stewemetal
Going
Compose-first

View Slide

@stewemetal
Going Compose-first
● Two separate Design System implementations 👎

● Duplicated presentation and behavior

● Keeping them in sync is tedious

● New components = twice the work
🫠

View Slide

@stewemetal
Going Compose-first
💡

View Slide

@stewemetal
Going Compose-first
● Use the Compose implementation of components to render the
Views
💡

View Slide

@stewemetal
Going Compose-first
● Use the Compose implementation of components to render the
Views

● Compose-View interop
💡

View Slide

@stewemetal
Going Compose-first
@stewemetal

android:id="@+id/someView"



/>

💡

View Slide

@stewemetal
Going Compose-first
@stewemetal

android:id="@+id/someView"



/>

💡 findViewById(R.id.someView)

.setContent {

OctopusTheme {

...

}

}

View Slide

@stewemetal
Going Compose-first
@stewemetal
class ComposeView @JvmOverloads constructor(

context: Context,


defStyleAttr: Int = 0

) : AbstractComposeView(
...
) {

private val content =

mutableStateOf<(@Composable ()
->
Unit)?>(null)

@Composable

override fun Content() {

content.value
?.
invoke()

}

}

View Slide

@stewemetal
Going Compose-first
@stewemetal
class ComposeView @JvmOverloads constructor(

context: Context,


defStyleAttr: Int = 0

) : AbstractComposeView(
...
) {

private val content =

mutableStateOf<(@Composable ()
->
Unit)?>(null)

@Composable


content.value
?.
invoke()

}

}

🤔

View Slide

@stewemetal
Going Compose-first
● AbstractComposeView

View Slide

@stewemetal
View wrappers - base class
abstract class OctopusComposeBaseView @JvmOverloads constructor(

...

) : AbstractComposeView(...) {

...

}

View Slide

@stewemetal
abstract class OctopusComposeBaseView @JvmOverloads constructor(

...

) : AbstractComposeView(...) {

@get:StyleableRes

protected open val styleables: IntArray = IntArray(0)

...

}

View Slide

@stewemetal
abstract class OctopusComposeBaseView() : AbstractComposeView(...) {

@get:StyleableRes


protected fun initView(attrs: AttributeSet?) {

if (styleables.isNotEmpty()) {

context.theme
 
.obtainStyledAttributes(attrs, styleables, 0, 0,)

.apply {

try { initAttributes(this) }

finally { recycle() }

}

}

}

}

View Slide

@stewemetal
abstract class OctopusComposeBaseView() : AbstractComposeView(...) {

@get:StyleableRes


protected fun initView(attrs: AttributeSet?) { ... }

protected abstract fun initAttributes(typedArray: TypedArray)

}

View Slide

@stewemetal
Supporting custom properties



app:text="Primary button" />

View Slide

@stewemetal



app:enabled="false"


View Slide

@stewemetal



app:destructive="true"


View Slide

@stewemetal
class OctopusButtonPrimary(...) : OctopusComposeBaseView(...) {

@StyleableRes

override val styleables: IntArray = R.styleable.OctopusButton

init { initView(attrs) }

override fun initAttributes(typedArray: TypedArray) {

with(typedArray) {

text.value = getString(R.styleable.OctopusButton_text).orEmpty()

isEnabled.value = getBoolean(R.styleable.OctopusButton_enabled, true)

isDestructive.value = getBoolean(R.styleable.OctopusButton_destructive,
false)

}

}

}

View Slide

@stewemetal

...

private val text = mutableStateOf("")

private val isEnabled = mutableStateOf(true)

private val isDestructive = mutableStateOf(false)

override fun initAttributes(typedArray: TypedArray) {

with(typedArray) {

text.value = getString(R.styleable.OctopusButton_text).orEmpty()

isEnabled.value = getBoolean(R.styleable.OctopusButton_enabled, true)

isDestructive.value = getBoolean(R.styleable.OctopusButton_destructive,
false)

}

}

}

View Slide

@stewemetal

...

@Composable


OctopusTheme {

OctopusButtonPrimaryCompose(

text = text.value,

enabled = isEnabled.value,

destructive = isDestructive.value,

)

}

}

}

View Slide

@stewemetal

...

@Composable


OctopusTheme {

OctopusButtonPrimaryCompose(

text = text.value,

enabled = isEnabled.value,

destructive = isDestructive.value,

)

}

}

}

import
com.tier.octopus.compose.widget
.button.OctopusButtonPrimary

as OctopusButtonPrimaryCompose

View Slide

@stewemetal
XML previews

...


...

app:enabled="false"


...



⚠

View Slide

@stewemetal
XML previews

...


...

app:enabled="false"


...



⚠ Works out of the box after Android Studio Giraffe Canary 8
https://issuetracker.google.com/issues/187339385
⚠

View Slide

@stewemetal
Wrapping up

View Slide

@stewemetal
Octopus is Compose-first

View Slide

@stewemetal

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 good
position

View Slide

@stewemetal
Conclusions
position

● Choose a path that makes sense for your project and timeline

View Slide

@stewemetal
Conclusions
position


● Consider interoperability with legacy Views

View Slide

@stewemetal
Conclusions
position



● Going Compose-first is a challenging journey

View Slide

@stewemetal
Conclusions
position



● Going Compose-first is a challenging journey

● 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

● https://developer.android.com/jetpack/compose/compositionlocal

● https://developer.android.com/reference/kotlin/androidx/compose/ui/
platform/AbstractComposeView
Resources

View Slide

@stewemetal
Composing a Design System
István Juhos
👨💻 Senior Android Engineer @ TIER
 

Co-organizer of Kotlin Budapest
 
Mastodon: androiddev.social/@stewemetal
 
Twitter: @stewemetal
 
Web: istvanjuhos.dev
 
Thank you! / Dziękuję!

View Slide

Composing a Design System

Composing a Design System

István Juhos

More Decks by István Juhos

Other Decks in Programming

Featured

Transcript