Getting your apps ready for Material 3

Talk about Material 3 given at GDG 2023, AppDevCon NL 2023, droidcon Berlin 2023, droidcon NYC 2023 and droidcon Lisbon 2023

By Odin Asbjørnsen & Fatih Giris

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 (Compose)
    • 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.
    Phased
    Approach
    

    View Slide

76. Material 2 to Material 3 (View)
    Non-phased
    approach
    Phased
    Approach
    

    View Slide

77. Material 2 to Material 3 (View)
    1. Replace the MaterialComponents with Material 3 in your
    parent theme
    
    
    2. Handle breaking changes for components (Chips,
    BottomNavigation, etc)
    
    
    3. Con
    fi
    gure your app theme
    Non-phased
    approach
    

    View Slide

78. Material 2 to Material 3 (View)
    1. Change the style of each component separately to M3
    
    
    2. Con
    fi
    gure app theme
    Phased
    Approach
    

    View Slide

79. Material 3 at DNB
    

    View Slide

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

    View Slide

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

    View Slide

82. Design System at DNB
    Eufemia
    
    
    Android
    use Material
    Components
    

    View Slide

83. Design System at DNB
    Eufemia
    
    
    Android
    use Material
    Components
    App1
    App2
    

    View Slide

84. Design System at DNB
    Eufemia
    
    
    Android
    use Material
    Components
    

    View Slide

85. Design System at DNB
    Eufemia
    
    
    Android
    
    
    (View)
    Eufemia
    
    
    Android
    
    
    (Compose)
    use
    Material
    Components
    
    
    (View)
    use
    Material
    Components
    
    
    (Compose)
    Eufemia
    
    
    Android
    

    View Slide

86. How to start using M3?
    

    View Slide

87. Material 3 at DNB
    Eufemia
    
    
    Android
    
    
    (View)
    Eufemia
    
    
    Android
    
    
    (Compose)
    use
    M2
    Components
    
    
    (View)
    use
    M2
    
    
    Components
    
    
    (Compose)
    Eufemia
    
    
    Android
    

    View Slide

88. Material 3 at DNB
    Eufemia
    
    
    Android
    
    
    (View)
    Eufemia
    
    
    Android
    
    
    use
    M2
    Components
    
    
    (View)
    use
    M2
    
    
    Components
    
    
    femia
    
    
    droid
    

    View Slide

89. Material 3 at DNB
    Eufemia
    
    
    Android
    
    
    (View)
    Eufemia
    
    
    Android
    
    
    use
    M3
    Components
    
    
    (View)
    use
    M2
    
    
    Components
    
    
    femia
    
    
    droid
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

93. 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

94. But wait
    
    
    All components are M3 …
    

    View Slide

95. How to do a phased migration?
    

    View Slide

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

    View Slide

97. Material 3 at DNB
    styles.xml
    <br/>…<br/>
    

    View Slide

98. Material 3 at DNB
    styles.xml
    <br/>…<br/>
    

    View Slide

99. Material 3 at DNB
    EufemiaChip.kt
    public class EufemiaChip : Chip {
    public constructor(context: Context) : super(
    ContextThemeWrapper(
    context,
    R.style.Widget_Eufemia_Chip
    )
    )
    ...

    }
    

    View Slide

100. Material 3 at DNB
     Eufemia
     
     
     Android
     
     
     (View)
     Eufemia
     
     
     Android
     
     
     (Compose)
     use
     M2 + M3
     Components
     
     
     (View)
     use
     M2
     
     
     Components
     
     
     (Compose)
     Eufemia
     
     
     Android
     

     View Slide

101. Material 3 at DNB
     Eufemia
     
     
     Android
     
     
     (View)
     Eufemia
     
     
     Android
     
     
     (Compose)
     use
     M2 + M3
     Components
     
     
     (View)
     use
     M2
     Components
     
     
     (Compose)
     Eufemia
     
     
     Android
     

     View Slide

102. Material 3 at DNB
     Eufemia
     
     
     Android
     
     
     (View)
     Eufemia
     
     
     Android
     
     
     (Compose)
     use
     M2 + M3
     Components
     
     
     (View)
     use
     M2 + M3
     Components
     
     
     (Compose)
     Eufemia
     
     
     Android
     

     View Slide

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

     View Slide

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

     View Slide

105. Material 3 at DNB
     Eufemia
     
     
     Android
     
     
     (View)
     Eufemia
     
     
     Android
     
     
     (Compose)
     use
     M2 + M3
     Components
     
     
     (View)
     use
     M2 + M3
     Components
     
     
     (Compose)
     Eufemia
     
     
     Android
     

     View Slide

106. Material 3 at DNB
     Eufemia
     
     
     Android
     use Material
     Components
     App1
     App2
     

     View Slide

107. Material 3 at DNB
     

     View Slide

108. Takeaways & learnings
     

     View Slide

109. Takeaways & learnings
     • Color
     
     
     • Talk with the designers
     fi
     rst
     
     
     • Lots of color attributes
     
     
     • Tonal palette
     

     View Slide

110. Takeaways & learnings
     • Components
     
     
     • Navigation bar, buttons, chips, switches visually different
     
     
     • Better to do phased migration
     
     
     • Screenshot tests for all components
     

     View Slide

111. THANKS ♥
     

     View Slide

112. QUESTIONS
     @oas004
     
     
     @fatih_grs
     

     View Slide