$30 off During Our Annual Pro Sale. View Details »

Getting your apps ready for Material 3

Getting your apps ready for Material 3

Material 3 is Google’s latest and newest design system. However, using or adopting Material 3 in Android apps might be a bit challenging.

In this talk, we will see how we can use the Material 3 design system with the Material components in Android apps. Firstly, we will talk about the color system and typography in Material 3 and discuss the differences with Material 2. Then, we will see how to use Material 3 components both in the Android View system and Jetpack Compose. Moreover, we will touch upon how to migrate to Material 3 from Material 2 and, share the experiences for Material 3 migration of our banking apps. Finally, we will argue about the pros & cons of using Material 3.

Fatih Giriş

July 06, 2023
Tweet

More Decks by Fatih Giriş

Other Decks in Technology

Transcript

  1. Getting your apps
    ready for Material 3
    Odin Asbjørnsen
    Android Developer @ DNB
    Fatih Giris
    Android Lead @ DNB

    View Slide

  2. What this talk is

    View Slide

  3. What this talk is
    A guide to start using or adopting Material 3

    View Slide

  4. What this talk is not

    View Slide

  5. What this talk is not
    A complete documentation and guide for Material 3

    View Slide

  6. Agenda
    • Colors


    • Typography


    • Major components


    • Material 2 to Material 3


    • Material 3 at DNB


    • Take-aways & learnings

    View Slide

  7. Colors

    View Slide

  8. Colors
    • Key colors


    • Accent


    • Neutral






    View Slide

  9. Key colors
    https://m3.material.io/styles/color/the-color-system/key-colors-tones

    View Slide

  10. Colors
    • Key colors


    • Accent


    • Neutral


    • Additional colors


    • Error


    • Product speci
    fi
    c

    View Slide

  11. Additional colors
    https://m3.material.io/styles/color/the-color-system/key-colors-tones

    View Slide

  12. Tonal palettes

    View Slide

  13. Tonal palettes
    1 color 13 tones

    View Slide

  14. Tonal palettes
    https://m3.material.io/styles/color/the-color-system/key-colors-tones

    View Slide

  15. Tonal palettes
    https://m3.material.io/styles/color/the-color-system/key-colors-tones

    View Slide

  16. Why tonal palettes?

    View Slide

  17. Why tonal palettes?
    • Establish context in the visual hierarchy

    View Slide

  18. Primary color’s tone usage in different components
    Why tonal palettes?

    View Slide

  19. Different surface tones in M3
    Surface tones

    View Slide

  20. Surface tones
    Navigation bar
    Elevated card

    View Slide

  21. Why tonal palettes?
    • Establish context in the visual hierarchy


    • Establish various level of meaning with the same color

    View Slide

  22. Outlined button states
    Why tonal palettes?

    View Slide

  23. Why tonal palettes?
    • Establish context in the visual hierarchy


    • Establish various level of meaning with the same color


    • Accessible contrast ratios

    View Slide

  24. https://m3.material.io/styles/color/the-color-system/accessibility
    Why tonal palettes?

    View Slide

  25. https://m3.material.io/styles/color/the-color-system/accessibility
    Why tonal palettes?

    View Slide

  26. How to generate tonal palettes?


    🤔

    View Slide

  27. https://m3.material.io/theme-builder

    View Slide

  28. https://m3.material.io/theme-builder

    View Slide

  29. https://m3.material.io/theme-builder

    View Slide

  30. https://m3.material.io/theme-builder

    View Slide

  31. Colors
    https://m3.material.io/styles/color/the-color-system/color-roles

    View Slide

  32. M3 Colors in Compose
    MaterialTheme.kt
    @Composable
    fun MaterialTheme(
    colorScheme: ColorScheme = MaterialTheme.colorScheme,
    shapes: Shapes = MaterialTheme.shapes,
    typography: Typography = MaterialTheme.typography,
    content: @Composable () -> Unit
    ) {

    View Slide

  33. M3 Colors in Compose
    MaterialTheme.kt
    @Composable
    fun MaterialTheme(
    colorScheme: ColorScheme = MaterialTheme.colorScheme,
    shapes: Shapes = MaterialTheme.shapes,
    typography: Typography = MaterialTheme.typography,
    content: @Composable () -> Unit
    ) {

    View Slide

  34. class ColorScheme(
    primary: Color,
    onPrimary: Color,
    primaryContainer: Color,
    onPrimaryContainer: Color,
    inversePrimary: Color,
    secondary: Color,
    onSecondary: Color,
    secondaryContainer: Color,
    onSecondaryContainer: Color,
    tertiary: Color,
    onTertiary: Color,
    tertiaryContainer: Color,
    onTertiaryContainer: Color,
    M3 Colors in Compose
    ColorScheme.kt

    View Slide

  35. secondaryContainer: Color,
    onSecondaryContainer: Color,
    tertiary: Color,
    onTertiary: Color,
    tertiaryContainer: Color,
    onTertiaryContainer: Color,
    background: Color,
    onBackground: Color,
    surface: Color,
    onSurface: Color,
    surfaceVariant: Color,
    onSurfaceVariant: Color,
    surfaceTint: Color,
    inverseSurface: Color,
    inverseOnSurface: Color,
    error: Color,
    onError: Color,
    errorContainer: Color,
    onErrorContainer: Color,
    M3 Colors in Compose
    ColorScheme.kt

    View Slide

  36. onSurfaceVariant: Color,
    surfaceTint: Color,
    inverseSurface: Color,
    inverseOnSurface: Color,
    error: Color,
    onError: Color,
    errorContainer: Color,
    onErrorContainer: Color,
    outline: Color,
    outlineVariant: Color,
    scrim: Color,
    ) {
    M3 Colors in Compose
    ColorScheme.kt

    View Slide

  37. M3 Colors in XML
    theme.xml
    <br/>…<br/>

    View Slide

  38. M3 Colors in XML
    theme.xml
    <br/><item name="colorPrimary"></item><br/><item name="colorOnPrimary"></item><br/><item name="colorPrimaryInverse"></item><br/><item name="colorPrimaryContainer"></item><br/><item name="colorOnPrimaryContainer"></item><br/><item name="colorSecondary"></item><br/><item name="colorOnSecondary"></item><br/><item name="colorSecondaryContainer"></item><br/><item name="colorOnSecondaryContainer"></item><br/><item name="colorTertiary"></item><br/><item name="colorOnTertiary"></item><br/><item name="colorTertiaryContainer"></item><br/><item name="colorOnTertiaryContainer"></item><br/><item name="android:colorBackground"></item><br/><item name="colorOnBackground"></item><br/><item name="colorSurface"></item><br/><item name="colorOnSurface"></item><br/><item name="colorSurfaceVariant"></item><br/><item name="colorOnSurfaceVariant"></item><br/>

    View Slide

























  39. M3 Colors in XML
    theme.xml

    View Slide

  40. 28


    color attributes


    🤯

    View Slide

  41. Which color attribute affects
    which component?

    View Slide

  42. https://m3.material.io/theme-builder

    View Slide

  43. https://github.com/oas004/Material3Playground

    View Slide

  44. Typography

    View Slide

  45. Typography
    • 5 roles










    View Slide

  46. Typography
    • 5 roles


    • Display








    https://m3.material.io/styles/typography/applying-type

    View Slide

  47. Typography
    • 5 roles


    • Display


    • Headline






    https://m3.material.io/styles/typography/applying-type

    View Slide

  48. Typography
    • 5 roles


    • Display


    • Headline


    • Title




    https://m3.material.io/styles/typography/applying-type

    View Slide

  49. Typography
    • 5 roles


    • Display


    • Headline


    • Title


    • Body


    https://m3.material.io/styles/typography/applying-type

    View Slide

  50. Typography
    • 5 roles


    • Display


    • Headline


    • Title


    • Body


    • Label
    https://m3.material.io/styles/typography/applying-type

    View Slide

  51. Major Components

    View Slide

  52. Top App Bars
    • Provide content and actions


    • Support for dynamic colors


    • No drop shadow

    View Slide

  53. Top App Bars
    • 4 types


    • Center-aligned


    • Small


    • Medium


    • Large

    View Slide

  54. Cards
    • 3 types


    • Outlined Card


    • Elevated Card


    • Filled Card

    View Slide

  55. Cards
    • 3 types


    • Outlined Card


    • Elevated Card


    • Filled Card

    View Slide

  56. Cards
    • 3 types


    • Outlined Card


    • Elevated Card


    • Filled Card

    View Slide

  57. Switch
    • More accessible


    • New color mapping meets non
    text contrast requirements


    • Optional icon on the thumb


    • Taller and wider layout track

    View Slide

  58. Switch
    M2 M3

    View Slide

  59. Switch

    View Slide

  60. Navigation Bar
    • New color mapping


    • No shadow


    • Pill shape as an active indicator


    • Taller height in M3

    View Slide

  61. Navigation Bar
    • 3 - 5 destinations with and without label text


    • Provide short and meaningful label texts


    View Slide

  62. • 3 - 5 destinations with and without label text


    • Provide short and meaningful label texts


    • Optional badge
    Navigation Bar

    View Slide

  63. Chips
    • Represent options in a speci
    fi
    c context


    • 4 different types

    View Slide

  64. Chips
    M2 M3

    View Slide

  65. Chips
    M2 M3

    View Slide

  66. Chips
    M2 M3

    View Slide

  67. Chips
    M2 M3

    View Slide

  68. Buttons
    https://m3.material.io/components/all-buttons

    View Slide

  69. Buttons
    https://m3.material.io/components/all-buttons

    View Slide

  70. Buttons
    https://m3.material.io/components/all-buttons

    View Slide

  71. Buttons
    https://m3.material.io/components/all-buttons

    View Slide

  72. Buttons
    https://m3.material.io/components/all-buttons

    View Slide

  73. Material 2 to Material 3

    View Slide

  74. Material 2 to Material 3
    • When should you migrate?


    • As soon as possible
    https://developer.android.com/jetpack/compose/designsystems/material2-material3

    View Slide

  75. Material 2 to Material 3
    • Phased approach for Compose


    1. Add M3 dependency alongside M2 dependency


    2. Add M3 version of your app’s theme alongside M2 version of your app’s
    theme.


    3. Migrate individual modules, screens, (or composables) to M3.


    4. Once fully migrated, remove M2 from the app.

    View Slide

  76. Material 2 to Material 3
    • No phased approach for Views


    1. Replace the MaterialComponents with Material3 in your parent theme


    2. Con
    fi
    gure your app theme

    View Slide

  77. Material 3 at DNB

    View Slide

  78. Material 3 at DNB
    • Custom design system called Eufemia

    View Slide

  79. Design System at DNB
    www.eufemia.dnb.no

    View Slide

  80. Design System at DNB
    Eufemia


    Android
    use Material
    Components

    View Slide

  81. Design System at DNB
    Eufemia


    Android
    use Material
    Components
    App1
    App2

    View Slide

  82. Design System at DNB
    Eufemia


    Android
    use Material
    Components

    View Slide

  83. Design System at DNB
    Eufemia


    Android


    (View)
    Eufemia


    Android


    (Compose)
    use
    Material
    Components


    (View)
    use
    Material
    Components


    (Compose)
    Eufemia


    Android

    View Slide

  84. How to start using M3?

    View Slide

  85. Material 3 at DNB
    Eufemia


    Android


    (View)
    Eufemia


    Android


    (Compose)
    use
    M2
    Components


    (View)
    use
    M2


    Components


    (Compose)
    Eufemia


    Android

    View Slide

  86. Material 3 at DNB
    Eufemia


    Android


    (View)
    Eufemia


    Android


    use
    M2
    Components


    (View)
    use
    M2


    Components


    femia


    droid

    View Slide

  87. Material 3 at DNB
    Eufemia


    Android


    (View)
    Eufemia


    Android


    use
    M3
    Components


    (View)
    use
    M2


    Components


    femia


    droid

    View Slide

  88. Material 3 at DNB
    theme.xml
    <br/>

    View Slide

  89. Material 3 at DNB
    theme.xml
    <br/>

    View Slide

  90. Material 3 at DNB
    theme.xml
    <br/>

    View Slide

  91. Material 3 at DNB
    theme.xml
    <br/><item name="colorPrimary"></item><br/><item name="colorOnPrimary"></item><br/><item name="colorPrimaryInverse"></item><br/><item name="colorPrimaryContainer"></item><br/><item name="colorOnPrimaryContainer"></item><br/><item name="colorSecondary"></item><br/><item name="colorOnSecondary"></item><br/><item name="colorSecondaryContainer"></item><br/><item name="colorOnSecondaryContainer"></item><br/><item name="colorTertiary"></item><br/><item name="colorOnTertiary"></item><br/><item name="colorTertiaryContainer"></item><br/><item name="colorOnTertiaryContainer"></item><br/><item name="android:colorBackground"></item><br/><item name="colorOnBackground"></item><br/><item name="colorSurface"></item><br/><item name="colorOnSurface"></item><br/><item name="colorSurfaceVariant"></item><br/>

    View Slide

  92. Material 3 at DNB
    Eufemia


    Android


    (View)
    Eufemia


    Android


    (Compose)
    use
    M3
    Components


    (View)
    use
    M2


    Components


    (Compose)
    Eufemia


    Android

    View Slide

  93. Material 3 at DNB
    Eufemia


    Android


    (View)
    Eufemia


    Android


    (Compose)
    use
    M3
    Components


    (View)
    use
    M2
    Components


    (Compose)
    Eufemia


    Android

    View Slide

  94. Material 3 at DNB
    Eufemia


    Android


    (View)
    Eufemia


    Android


    (Compose)
    use
    M3
    Components


    (View)
    use
    M2 + M3
    Components


    (Compose)
    Eufemia


    Android

    View Slide

  95. Material 3 at DNB
    Material3Theme(
    colorScheme = getMaterial3ColorScheme(),
    typography = provideM3Typography(),
    ) {}
    Theme.kt

    View Slide

  96. Material 3 at DNB
    Theme.kt
    Material3Theme(
    colorScheme = getMaterial3ColorScheme(),
    typography = provideM3Typography(),
    ) {
    Material2Theme(
    colors = getMaterialColors(),
    typography = provideM2Typography(),
    content = content
    )
    }

    View Slide

  97. Material 3 at DNB
    Eufemia


    Android


    (View)
    Eufemia


    Android


    (Compose)
    use
    M3
    Components


    (View)
    use
    M2 + M3
    Components


    (Compose)
    Eufemia


    Android

    View Slide

  98. Material 3 at DNB
    Eufemia


    Android
    use Material
    Components
    App1
    App2


    View Slide

  99. Takeaways & learnings

    View Slide

  100. Takeaways & learnings
    • Color


    • Talk with the designers
    fi
    rst


    • Lots of color attributes


    • Tonal palette

    View Slide

  101. Takeaways & learnings
    • Typography


    • 5 different roles


    • M2 to M3 mapping

    View Slide

  102. Takeaways & learnings
    • Components


    • Navigation bar, buttons, chips, switches visually different


    • Toggle buttons -> Segmented buttons


    • Scaffold APIs are different


    • Screenshot tests for all components

    View Slide

  103. THANKS ♥

    View Slide

  104. QUESTIONS
    @oas004


    @fatih_grs

    View Slide