Jetpack Compose + Design Systems François Blavoet

Jetpack Compose • Compose is the future of Android UI development • When is the best time to start adopting it ?

Design systems What is a Design system ? -> it is a complete set of standards intended to manage design at scale using reusable components and patterns.

Design systems @GET("/addresses") fun getAddresses(): Single @PUT("/addresses/{address_id}") fun updateAddress(@Path("address_id") id: String, @Body body: Map): Single

Let’s have a look at one component

Let’s have a look at one component

Let’s have a look at one component

Let’s have a look at one component

Let’s have a look at one component Row.Content { leading( label = "Order Changes Preferences", label2 = "Suggest replacements ...", ) trailing( label = "Edit", option = Row.TrailingOption.Clickable(onPreferenceClick) ) }

Let’s have a look at one component Row.Content { leading( label = "Tue Jun 2, 4–5pm", option = LeadingOption.Icon(Icon.Time), ) }

One design system

Material Design

Material Design Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember {..}, elevation: ButtonElevation? = ButtonDefaults.elevation(), shape: Shape = MaterialTheme.shapes.small, border: BorderStroke? = null, colors: ButtonColors = ButtonDefaults.buttonColors(), contentPadding: PaddingValues = ButtonDefaults.ContentPadding, content: @Composable RowScope.() -> Unit, )

Material Design?

Material Design? ?

No content

Let’s implement our own system

Atoms

Atoms Requirements: • Day/night • Customizable for white label apps • As easy to use as possible • Have an abstract representation outside of the composition

Atoms interface ColorSpec { @Composable fun value(): Color }

Atoms interface ColorSpec { @Composable fun value(): Color companion object { val SystemGrayscale70: ColorSpec = … val SystemGrayscale50: ColorSpec = … … } }

Atoms interface ColorSpec { @Composable fun value(): Color companion object { val SystemGrayscale70: ColorSpec = … val SystemGrayscale50: ColorSpec = … … fun fromColor(color: Color): ColorSpec { return StaticColor(color) } } }

Atoms @Composable fun DesignTheme( configuration: ThemeConfig? = null, content: @Composable () -> Unit, ) { … } object DesignTheme { val colors: Colors @Composable @ReadOnlyComposable get() = LocalColors.current }

Atoms

Atoms interface IconSlot { @Composable fun Content(contentColor: Color) }

Atoms interface IconSlot { @Composable fun Content(contentColor: Color) companion object { fun fromResource( @DrawableRes res: Int, contentDescription: TextSpec?, ): IconSlot { return ResIcon(res, contentDescription) } } }

Atoms enum class Icons(@DrawableRes internal val resId: Int) : IconSlot { Accessibility(R.drawable.cp_accessibility), Account(R.drawable.cp_account), Add(R.drawable.cp_add), … }

Molecules

Molecules data class PillSpec( val label: TextSpec, val onClick: (() -> Unit)?, val selected: Boolean = false, ) @Composable fun Pill( spec: PillSpec, modifier: Modifier = Modifier, )

Molecules data class PillSpec( val label: TextSpec, val onClick: (() -> Unit)?, val selected: Boolean = false, ) @Composable fun Pill( spec: PillSpec, modifier: Modifier = Modifier, ) @Composable fun BasePill( selected: Boolean, onClick: (() -> Unit)?, modifier: Modifier = Modifier, … content: @Composable BoxScope.(contentColor: Color) -> Unit, )

Going Further import androidx.compose.material.Text @Composable fun Text( text: AnnotatedString, modifier: Modifier = Modifier, style: TextStyle = LocalTextStyle.current, … ) {

Going Further import com.instacart.compote.foundation.Text @Composable fun Text( text: RichTextSpec, modifier: Modifier = Modifier, style: TextStyle = TextStyleSpec.Default, … )

33

Thank you! François Blavoet