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

Jetpack Compose + design systems

Jetpack Compose + design systems

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  5. Let’s have a look at one component

    View full-size slide

  6. Let’s have a look at one component

    View full-size slide

  7. Let’s have a look at one component

    View full-size slide

  8. Let’s have a look at one component

    View full-size 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 full-size 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 full-size slide

  11. One design system

    View full-size slide

  12. Material Design

    View full-size 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 full-size slide

  14. Material Design?

    View full-size slide

  15. Material Design? ?

    View full-size slide

  16. Let’s implement our
    own system

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    }
    }

    View full-size slide

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

    fun fromColor(color: Color): ColorSpec {
    return StaticColor(color)
    }
    }
    }

    View full-size slide

  21. Atoms
    @Composable
    fun DesignTheme(
    configuration: ThemeConfig? = null,
    content: @Composable () -> Unit,
    ) {

    }
    object DesignTheme {
    val colors: Colors
    @Composable
    @ReadOnlyComposable
    get() = LocalColors.current
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. 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 full-size slide

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

    ) {

    View full-size slide

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

    )

    View full-size slide

  29. Thank you!
    François Blavoet

    View full-size slide