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
2. What this talk is
3. What this talk is A guide to start using or adopting Material 3
4. What this talk is not
5. What this talk is not A complete documentation and guide for Material 3
6. Agenda • Colors • Typography • Major components • Material 2 to Material 3 • Material 3 at DNB • Take-aways & learnings
7. Colors
8. Colors • Key colors • Accent • Neutral 
 
 
 
 
 

9. Key colors https://m3.material.io/styles/color/the-color-system/key-colors-tones
10. Colors • Key colors • Accent • Neutral • Additional colors • Error • Product speci fi c
11. Additional colors https://m3.material.io/styles/color/the-color-system/key-colors-tones
12. Tonal palettes
13. Tonal palettes 1 color 13 tones
14. Tonal palettes https://m3.material.io/styles/color/the-color-system/key-colors-tones
15. Tonal palettes https://m3.material.io/styles/color/the-color-system/key-colors-tones
16. Why tonal palettes?
17. Why tonal palettes? • Establish context in the visual hierarchy
18. Primary color’s tone usage in different components Why tonal palettes?
19. Different surface tones in M3 Surface tones
20. Surface tones Navigation bar Elevated card
21. Why tonal palettes? • Establish context in the visual hierarchy • Establish various level of meaning with the same color
22. Outlined button states Why tonal palettes?
23. Why tonal palettes? • Establish context in the visual hierarchy • Establish various level of meaning with the same color • Accessible contrast ratios
24. https://m3.material.io/styles/color/the-color-system/accessibility Why tonal palettes?
25. https://m3.material.io/styles/color/the-color-system/accessibility Why tonal palettes?
26. How to generate tonal palettes? 🤔
27. https://m3.material.io/theme-builder
28. https://m3.material.io/theme-builder
29. https://m3.material.io/theme-builder
30. https://m3.material.io/theme-builder
31. Colors https://m3.material.io/styles/color/the-color-system/color-roles
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 ) {
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 ) {
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
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
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
37. M3 Colors in XML theme.xml <style name=“Theme.MyApp” parent=“Theme.Material3.DayNight.NoActionBar”> … </style>
38. M3 Colors in XML theme.xml <style name=“Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar"> <item name="colorPrimary"></item> <item name="colorOnPrimary"></item> <item name="colorPrimaryInverse"></item> <item name="colorPrimaryContainer"></item> <item name="colorOnPrimaryContainer"></item> <item name="colorSecondary"></item> <item name="colorOnSecondary"></item> <item name="colorSecondaryContainer"></item> <item name="colorOnSecondaryContainer"></item> <item name="colorTertiary"></item> <item name="colorOnTertiary"></item> <item name="colorTertiaryContainer"></item> <item name="colorOnTertiaryContainer"></item> <item name="android:colorBackground"></item> <item name="colorOnBackground"></item> <item name="colorSurface"></item> <item name="colorOnSurface"></item> <item name="colorSurfaceVariant"></item> <item name="colorOnSurfaceVariant"></item>
39. <item name="colorPrimaryContainer"></item> <item name="colorOnPrimaryContainer"></item> <item name="colorSecondary"></item> <item name="colorOnSecondary"></item> <item name="colorSecondaryContainer"></item> <item name="colorOnSecondaryContainer"></item> <item name="colorTertiary"></item> <item name="colorOnTertiary"></item> <item name="colorTertiaryContainer"></item> <item name="colorOnTertiaryContainer"></item> <item name="android:colorBackground"></item> <item name="colorOnBackground"></item> <item name="colorSurface"></item> <item name="colorOnSurface"></item> <item name="colorSurfaceVariant"></item> <item name="colorOnSurfaceVariant"></item> <item name="colorSurfaceInverse"></item> <item name="colorOnSurfaceInverse"></item> <item name="colorOutline"></item> <item name="colorError"></item> <item name="colorOnError"></item> <item name="colorErrorContainer"></item> <item name="colorOnErrorContainer"></item> </style> M3 Colors in XML theme.xml
40. 28 color attributes 🤯
41. Which color attribute affects which component?
42. https://m3.material.io/theme-builder
43. https://github.com/oas004/Material3Playground
44. Typography
45. Typography • 5 roles 
 
 
 
 
 
 
 
 
 

46. Typography • 5 roles • Display 
 
 
 
 
 
 
 
 https://m3.material.io/styles/typography/applying-type
47. Typography • 5 roles • Display • Headline 
 
 
 
 
 
 https://m3.material.io/styles/typography/applying-type
48. Typography • 5 roles • Display • Headline • Title 
 
 
 
 https://m3.material.io/styles/typography/applying-type
49. Typography • 5 roles • Display • Headline • Title • Body 
 
 https://m3.material.io/styles/typography/applying-type
50. Typography • 5 roles • Display • Headline • Title • Body • Label https://m3.material.io/styles/typography/applying-type
51. Major Components
52. Top App Bars • Provide content and actions • Support for dynamic colors • No drop shadow
53. Top App Bars • 4 types • Center-aligned • Small • Medium • Large
54. Cards • 3 types • Outlined Card • Elevated Card • Filled Card
55. Cards • 3 types • Outlined Card • Elevated Card • Filled Card
56. Cards • 3 types • Outlined Card • Elevated Card • Filled Card
57. Switch • More accessible • New color mapping meets non text contrast requirements • Optional icon on the thumb • Taller and wider layout track
58. Switch M2 M3
59. Switch
60. Navigation Bar • New color mapping • No shadow • Pill shape as an active indicator • Taller height in M3
61. Navigation Bar • 3 - 5 destinations with and without label text • Provide short and meaningful label texts 
 

62. • 3 - 5 destinations with and without label text • Provide short and meaningful label texts • Optional badge Navigation Bar
63. Chips • Represent options in a speci fi c context • 4 different types
64. Chips M2 M3
65. Chips M2 M3
66. Chips M2 M3
67. Chips M2 M3
68. Buttons https://m3.material.io/components/all-buttons
69. Buttons https://m3.material.io/components/all-buttons
70. Buttons https://m3.material.io/components/all-buttons
71. Buttons https://m3.material.io/components/all-buttons
72. Buttons https://m3.material.io/components/all-buttons
73. Material 2 to Material 3
74. Material 2 to Material 3 • When should you migrate? • As soon as possible https://developer.android.com/jetpack/compose/designsystems/material2-material3
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
76. Material 2 to Material 3 (View) Non-phased approach Phased Approach
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
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
79. Material 3 at DNB
80. Material 3 at DNB • Custom design system called Eufemia
81. Design System at DNB www.eufemia.dnb.no
82. Design System at DNB Eufemia Android use Material Components
83. Design System at DNB Eufemia Android use Material Components App1 App2
84. Design System at DNB Eufemia Android use Material Components
85. Design System at DNB Eufemia Android (View) Eufemia Android (Compose) use Material Components (View) use Material Components (Compose) Eufemia Android
86. How to start using M3?
87. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose) use M2 Components (View) use M2 Components (Compose) Eufemia Android
88. Material 3 at DNB Eufemia Android (View) Eufemia Android use M2 Components (View) use M2 Components femia droid
89. Material 3 at DNB Eufemia Android (View) Eufemia Android use M3 Components (View) use M2 Components femia droid
90. Material 3 at DNB theme.xml <style name=“Theme.Eufemia” parent=“Theme.MaterialComponents.DayNight.NoActionBar">
91. Material 3 at DNB theme.xml <style name=“Theme.Eufemia” parent=“Theme.MaterialComponents.DayNight.NoActionBar">
92. Material 3 at DNB theme.xml <style name=“Theme.Eufemia” parent=“Theme.Material3.DayNight.NoActionBar”>
93. Material 3 at DNB theme.xml <style name=“Theme.Eufemia” parent=“Theme.Material3.DayNight.NoActionBar"> <item name="colorPrimary"></item> <item name="colorOnPrimary"></item> <item name="colorPrimaryInverse"></item> <item name="colorPrimaryContainer"></item> <item name="colorOnPrimaryContainer"></item> <item name="colorSecondary"></item> <item name="colorOnSecondary"></item> <item name="colorSecondaryContainer"></item> <item name="colorOnSecondaryContainer"></item> <item name="colorTertiary"></item> <item name="colorOnTertiary"></item> <item name="colorTertiaryContainer"></item> <item name="colorOnTertiaryContainer"></item> <item name="android:colorBackground"></item> <item name="colorOnBackground"></item> <item name="colorSurface"></item> <item name="colorOnSurface"></item> <item name="colorSurfaceVariant"></item>
94. But wait All components are M3 …
95. How to do a phased migration?
96. Material 3 at DNB theme.xml <style name=“Theme.Eufemia” parent=“Theme.MaterialComponents.DayNight.NoActionBar">
97. Material 3 at DNB styles.xml <style name="Widget.Eufemia.Chip" parent="Widget.MaterialComponents.Chip.Choice"> … </style>
98. Material 3 at DNB styles.xml <style name="Widget.Eufemia.Chip" parent="Widget.Material3.Chip.Suggestion"> … </style>
99. Material 3 at DNB EufemiaChip.kt public class EufemiaChip : Chip { public constructor(context: Context) : super( ContextThemeWrapper( context, R.style.Widget_Eufemia_Chip ) ) ...
 }
100. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose) use M2 + M3 Components (View) use M2 Components (Compose) Eufemia Android
101. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose) use M2 + M3 Components (View) use M2 Components (Compose) Eufemia Android
102. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose) use M2 + M3 Components (View) use M2 + M3 Components (Compose) Eufemia Android
103. Material 3 at DNB Material3Theme( colorScheme = getMaterial3ColorScheme(), typography = provideM3Typography(), ) {} Theme.kt
104. Material 3 at DNB Theme.kt Material3Theme( colorScheme = getMaterial3ColorScheme(), typography = provideM3Typography(), ) { Material2Theme( colors = getMaterialColors(), typography = provideM2Typography(), content = content ) }
105. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose) use M2 + M3 Components (View) use M2 + M3 Components (Compose) Eufemia Android
106. Material 3 at DNB Eufemia Android use Material Components App1 App2
107. Material 3 at DNB
108. Takeaways & learnings
109. Takeaways & learnings • Color • Talk with the designers fi rst • Lots of color attributes • Tonal palette
110. Takeaways & learnings • Components • Navigation bar, buttons, chips, switches visually different • Better to do phased migration • Screenshot tests for all components
111. THANKS ♥
112. QUESTIONS @oas004 @fatih_grs