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

Material Design 3 in Jetpack Compose

Material Design 3 in Jetpack Compose

Loveleen Kaur

May 08, 2023
Tweet

More Decks by Loveleen Kaur

Other Decks in Technology

Transcript

  1. Material Design 3 in
    Jetpack Compose
    Loveleen Kaur
    Software Engineer @ Astrotalk
    Google Android Educator

    View Slide

  2. Who am I?
    ● Loveleen Kaur
    ● Software Engineer - Android @ Astrotalk
    ● Core Team Member @ Google Developer Groups Chandigarh
    ● Android Educator @ Android Educators Community India
    ● Phd Research Scholar
    ● Develop Mobile Applications
    ● Technical Speaker
    ● Happy Android Developer :)

    View Slide

  3. Material Design 3
    M3

    View Slide

  4. ● M3 is the latest version of Google’s open-source
    design system
    What is
    Material
    Design 3?

    View Slide

  5. ● M3 is the latest version of Google’s open-source
    design system
    ● New set of Design Capabilities
    What is
    Material
    Design 3?

    View Slide

  6. ● M3 is the latest version of Google’s open-source
    design system
    ● New set of Design Capabilities
    ● Updated theming
    What is
    Material
    Design 3?

    View Slide

  7. ● M3 is the latest version of Google’s open-source
    design system
    ● New set of Design Capabilities
    ● Updated theming
    ● Material You personalization
    What is
    Material
    Design 3?

    View Slide

  8. ● M3 is the latest version of Google’s open-source
    design system
    ● New set of Design Capabilities
    ● Updated theming
    ● Material You personalization
    ● Updates to Android 12 visual style and system UI
    What is
    Material
    Design 3?

    View Slide

  9. ● M3 is the latest version of Google’s open-source
    design system
    ● New set of Design Capabilities
    ● Updated theming
    ● Material You personalization
    ● Updates to Android 12 visual style and system UI
    What is
    Material
    Design 3?

    View Slide

  10. Google
    Compose
    Material 3
    (1.0.1)
    What is
    Material
    Design 3?

    View Slide

  11. What is
    Material
    Design 3?

    View Slide

  12. Compose Material 3
    M3

    View Slide

  13. ● Compose is combination of 7 Maven Group Ids
    within androidx.
    Compose
    Material 3

    View Slide

  14. ● Compose is combination of 7 Maven Group Ids
    within androidx.
    ● Each Group contains a targeted subset of
    functionality.
    Compose
    Material 3

    View Slide

  15. ● Compose is combination of 7 Maven Group Ids
    within androidx.
    ● Each Group contains a targeted subset of
    functionality
    ● Each with its own set of release notes.
    Compose
    Material 3

    View Slide

  16. ● Compose is combination of 7 Maven Group Ids
    within androidx.
    ● Each Group contains a targeted subset of
    functionality
    ● Each with its own set of release notes.
    Compose
    Material 3

    View Slide

  17. compose.animation Build animations in their Jetpack Compose applications to enrich the UX.
    compose.compiler Transform @Composable functions and enable optimizations with a Kotlin
    compiler plugin.
    compose.foundation Write Jetpack Compose applications with ready to use building blocks.
    compose.material Build Jetpack Compose UIs with ready to use Material Design
    Components.
    compose.material3 Build Jetpack Compose UIs with Material Design 3 Components.
    compose.runtime Fundamental building blocks of Compose's programming model and state
    management.
    compose.ui Fundamental components of compose UI needed to interact with the
    device, including layout, drawing, and input.
    Stable Release-1.0.1
    Latest Update-April 19, 2023
    Compose Material 3

    View Slide

  18. Declaring dependencies
    dependencies {
    implementation("androidx.compose.material3:material3:1.0.1")
    }
    android {
    buildFeatures {
    compose = true
    }
    composeOptions {
    kotlinCompilerExtensionVersion = "1.1.1"
    }
    kotlinOptions {
    jvmTarget = "1.8"
    }
    }

    View Slide

  19. Experimental APIs
    import androidx.compose.material3.ExperimentalMaterial3Api
    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun AppComposable() {
    // M3 composables
    }

    View Slide

  20. Material Theming
    M3

    View Slide

  21. ● Color Scheme
    Material
    Theming

    View Slide

  22. ● Color Scheme
    ● Typography
    Material
    Theming

    View Slide

  23. ● Color Scheme
    ● Typography
    ● Shapes
    Material
    Theming

    View Slide

  24. ● Color Scheme
    ● Typography
    ● Shapes
    Material
    Theming

    View Slide

  25. MaterialTheme(
    colorScheme = …,
    typography = …,
    shapes = …) {
    // M3 app content
    }
    Material
    Theming

    View Slide

  26. Material
    Theming

    View Slide

  27. Color Scheme
    M3

    View Slide

  28. ● The foundation of a color scheme is the set of
    five key colors.
    Color
    Scheme

    View Slide

  29. ● The foundation of a color scheme is the set of
    five key colors.
    ● Each of these colors relate to a tonal palette of
    13 tones.
    Color
    Scheme

    View Slide

  30. ● The foundation of a color scheme is the set of
    five key colors.
    ● Each of these colors relate to a tonal palette of
    13 tones.
    Color
    Scheme

    View Slide

  31. Color
    Scheme

    View Slide

  32. Generating Color Scheme
    Color.kt contains the colors of your theme with all the roles defined for both light and dark theme colors.
    val md_theme_light_primary = Color(0xFF476810)
    val md_theme_light_onPrimary = Color(0xFFFFFFFF)
    val md_theme_light_primaryContainer = Color(0xFFC7F089)
    // ..
    // ..
    val md_theme_dark_primary = Color(0xFFACD370)
    val md_theme_dark_onPrimary = Color(0xFF213600)
    val md_theme_dark_primaryContainer = Color(0xFF324F00)
    // ..
    // ..

    View Slide

  33. Generating Color Scheme
    Theme.kt contains a setup for light and dark color schemes and the app theme.
    private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    onPrimaryContainer = md_theme_light_onPrimaryContainer,
    // ..
    )
    private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
    // ..
    )

    View Slide

  34. Dynamic Color Scheme
    M3

    View Slide

  35. Dynamic
    Color
    Scheme

    View Slide

  36. ● Dynamic color is the key part of Material You.
    Dynamic
    Color
    Scheme

    View Slide

  37. ● Dynamic color is the key part of Material You.
    ● This color palette is used as the starting point to
    generate light and dark color schemes.
    Dynamic
    Color
    Scheme

    View Slide

  38. ● Dynamic color is the key part of Material You.
    ● This color palette is used as the starting point to
    generate light and dark color schemes.
    ● Dynamic color is available on Android 12 and
    above.
    Dynamic
    Color
    Scheme

    View Slide

  39. ● Dynamic color is the key part of Material You.
    ● This color palette is used as the starting point to
    generate light and dark color schemes.
    ● Dynamic color is available on Android 12 and
    above.
    Dynamic
    Color
    Scheme

    View Slide

  40. Dynamic Color Scheme
    // Dynamic color is available on Android 12+
    val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
    val colors = when {
    dynamicColor && darkTheme - > dynamicDarkColorScheme(LocalContext.current)
    dynamicColor && !darkTheme - > dynamicLightColorScheme(LocalContext.current)
    darkTheme - > darkColorScheme
    else - > lightColorScheme
    }

    View Slide

  41. Color Usage
    ● Primary is the base color, used for main components like prominent
    buttons, active states, and the tint of elevated surfaces.
    ● The secondary key color is used for less prominent components in
    the UI, such as filter chips, and expands the opportunity for color
    expression.
    ● The tertiary key color is used to derive the roles of contrasting
    accents that can be used to balance primary and secondary colors or
    bring enhanced attention to an element.

    View Slide

  42. View Slide

  43. View Slide

  44. Typography
    M3

    View Slide

  45. Default typography scale

    View Slide

  46. Defining Typography
    val replyTypography = Typography(
    titleLarge = TextStyle(
    fontWeight = FontWeight.SemiBold,
    fontSize = 22. sp,
    lineHeight = 28. sp,
    letterSpacing = 0. sp
    ),
    titleMedium = TextStyle(
    fontWeight = FontWeight.SemiBold,
    fontSize = 16. sp,
    lineHeight = 24. sp,
    letterSpacing = 0.15.sp
    ),
    )
    ...

    View Slide

  47. View Slide

  48. Custom Typography
    bodyLarge = TextStyle(
    fontWeight = FontWeight.Normal,
    fontFamily = FontFamily.SansSerif,
    fontStyle = FontStyle.Italic,
    fontSize = 16. sp,
    lineHeight = 24. sp,
    letterSpacing = 0.15.sp,
    baselineShift = BaselineShift.Subscript
    ),

    View Slide

  49. Shapes
    M3

    View Slide

  50. ● Material surfaces can be displayed in different
    shapes.
    Shapes

    View Slide

  51. ● Material surfaces can be displayed in different
    shapes.
    ● Shape scale defines style of container corners,
    offering a range of roundedness.
    Shapes

    View Slide

  52. ● Material surfaces can be displayed in different
    shapes.
    ● Shape scale defines style of container corners,
    offering a range of roundedness.
    ● There are different sizes of shapes- Extra Small,
    Small, Medium, Large, Extra Large
    Shapes

    View Slide

  53. ● Material surfaces can be displayed in different
    shapes.
    ● Shape scale defines style of container corners,
    offering a range of roundedness.
    ● There are different sizes of shapes- Extra Small,
    Small, Medium, Large, Extra Large
    Shapes

    View Slide

  54. Default
    Shapes
    for M3
    Components

    View Slide

  55. Shapes
    val replyShapes = Shapes(
    extraSmall = RoundedCornerShape(4. dp),
    small = RoundedCornerShape(8. dp),
    medium = RoundedCornerShape(12. dp),
    large = RoundedCornerShape(16. dp),
    extraLarge = RoundedCornerShape(24. dp)
    )

    View Slide

  56. Shapes
    Medium shape for Card and Large shape for Floating action button in Reply sample app

    View Slide

  57. Migration from
    Material Design 2
    M3

    View Slide

  58. 1. Add M3 dependency alongside M2 dependency.
    Steps
    of
    Migration

    View Slide

  59. 1. Add M3 dependency alongside M2 dependency.
    2. Add M3 version(s) of your app’s theme(s)
    alongside M2 version(s) of your app’s theme(s).
    Steps
    of
    Migration

    View Slide

  60. 1. Add M3 dependency alongside M2 dependency.
    2. Add M3 version(s) of your app’s theme(s)
    alongside M2 version(s) of your app’s theme(s).
    3. Migrate individual modules, screens, or
    composables to M3, depending on the size and
    complexity of your app.
    Steps
    of
    Migration

    View Slide

  61. 1. Add M3 dependency alongside M2 dependency.
    2. Add M3 version(s) of your app’s theme(s)
    alongside M2 version(s) of your app’s theme(s).
    3. Migrate individual modules, screens, or
    composables to M3, depending on the size and
    complexity of your app.
    4. Once fully migrated, remove the M2 version(s) of
    your app’s theme(s).
    Steps
    of
    Migration

    View Slide

  62. 1. Add M3 dependency alongside M2 dependency.
    2. Add M3 version(s) of your app’s theme(s)
    alongside M2 version(s) of your app’s theme(s).
    3. Migrate individual modules, screens, or
    composables to M3, depending on the size and
    complexity of your app.
    4. Once fully migrated, remove the M2 version(s) of
    your app’s theme(s).
    5. Remove M2 dependency.
    Steps
    of
    Migration

    View Slide

  63. 1. Add M3 dependency alongside M2 dependency.
    2. Add M3 version(s) of your app’s theme(s)
    alongside M2 version(s) of your app’s theme(s).
    3. Migrate individual modules, screens, or
    composables to M3, depending on the size and
    complexity of your app.
    4. Once fully migrated, remove the M2 version(s) of
    your app’s theme(s).
    5. Remove M2 dependency.
    Steps
    of
    Migration

    View Slide

  64. Official
    Resources
    ● https://developer.android.com/jetpack/compose/desig
    nsystems/material3
    ● https://m3.material.io/
    ● https://developer.android.com/jetpack/androidx/releas
    es/compose-material3
    ● https://github.com/android/compose-samples

    View Slide

  65. Thank you!
    Loveleen Kaur
    Software Engineer @ Astrotalk
    Google Android Educator

    View Slide