Jetpack Compose + design systems

Transcript

1. Jetpack Compose + Design Systems François Blavoet
2. Jetpack Compose • Compose is the future of Android UI development • When is the best time to start adopting it ?
3. 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.
4. Design systems @GET("/addresses") fun getAddresses(): Single<GetAddressesResponse> @PUT("/addresses/{address_id}") fun updateAddress(@Path("address_id") id: String, @Body body: Map<String, Any>): Single<AddressResponse>
5. Let’s have a look at one component
6. Let’s have a look at one component
7. Let’s have a look at one component
8. Let’s have a look at one component
9. 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) ) }
10. Let’s have a look at one component Row.Content { leading( label = "Tue Jun 2, 4–5pm", option = LeadingOption.Icon(Icon.Time), ) }
11. One design system
12. Material Design
13. 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, )
14. Material Design?
15. Material Design? ?
17. Let’s implement our own system
18. Atoms
19. Atoms Requirements: • Day/night • Customizable for white label apps • As easy to use as possible • Have an abstract representation outside of the composition
20. Atoms interface ColorSpec { @Composable fun value(): Color }
21. Atoms interface ColorSpec { @Composable fun value(): Color companion object { val SystemGrayscale70: ColorSpec = … val SystemGrayscale50: ColorSpec = … … } }
22. Atoms interface ColorSpec { @Composable fun value(): Color companion object { val SystemGrayscale70: ColorSpec = … val SystemGrayscale50: ColorSpec = … … fun fromColor(color: Color): ColorSpec { return StaticColor(color) } } }
23. Atoms @Composable fun DesignTheme( configuration: ThemeConfig? = null, content: @Composable () -> Unit, ) { … } object DesignTheme { val colors: Colors @Composable @ReadOnlyComposable get() = LocalColors.current }
24. Atoms
25. Atoms interface IconSlot { @Composable fun Content(contentColor: Color) }
26. Atoms interface IconSlot { @Composable fun Content(contentColor: Color) companion object { fun fromResource( @DrawableRes res: Int, contentDescription: TextSpec?, ): IconSlot { return ResIcon(res, contentDescription) } } }
27. 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), … }
28. Molecules
29. Molecules data class PillSpec( val label: TextSpec, val onClick: (() -> Unit)?, val selected: Boolean = false, ) @Composable fun Pill( spec: PillSpec, modifier: Modifier = Modifier, )
30. 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, )
31. Going Further import androidx.compose.material.Text @Composable fun Text( text: AnnotatedString, modifier: Modifier = Modifier, style: TextStyle = LocalTextStyle.current, … ) {
32. Going Further import com.instacart.compote.foundation.Text @Composable fun Text( text: RichTextSpec, modifier: Modifier = Modifier, style: TextStyle = TextStyleSpec.Default, … )
34. Thank you! François Blavoet