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.

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