Jetpack Compose + design systems

Transcript

1. Jetpack Compose
   +
   Design Systems
   François Blavoet
   

   View Slide

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

   View Slide

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.
   

   View Slide

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

   View Slide

5. Let’s have a look at one component
   

   View Slide

6. Let’s have a look at one component
   

   View Slide

7. Let’s have a look at one component
   

   View Slide

8. Let’s have a look at one component
   

   View Slide

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)
   )
   }
   

   View Slide

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

    View Slide

11. One design system
    

    View Slide

12. Material Design
    

    View Slide

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

    View Slide

14. Material Design?
    

    View Slide

15. Material Design? ?
    

    View Slide

16. View Slide

17. Let’s implement our
    own system
    

    View Slide

18. Atoms
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. Atoms
    

    View Slide

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

    View Slide

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

    View Slide

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),
    …
    }
    

    View Slide

28. Molecules
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. View Slide

34. Thank you!
    François Blavoet
    

    View Slide