Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Compose + design systems

Jetpack Compose + design systems

4d2070e800356da57315d427aa2343f4?s=128

François Blavoet

May 03, 2022
Tweet

More Decks by François Blavoet

Other Decks in Programming

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? ?

  16. None
  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, … )
  33. 33

  34. Thank you! François Blavoet