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
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 • 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.
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
77. Material 3 at DNB
78. Material 3 at DNB • Custom design system called Eufemia
79. Design System at DNB www.eufemia.dnb.no
80. Design System at DNB Eufemia Android use Material Components
81. Design System at DNB Eufemia Android use Material Components App1 App2
82. Design System at DNB Eufemia Android use Material Components
83. Design System at DNB Eufemia Android (View) Eufemia Android (Compose) use Material Components (View) use Material Components (Compose) Eufemia Android
84. How to start using M3?
85. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose) use M2 Components (View) use M2 Components (Compose) Eufemia Android
86. Material 3 at DNB Eufemia Android (View) Eufemia Android use M2 Components (View) use M2 Components femia droid
87. Material 3 at DNB Eufemia Android (View) Eufemia Android use M3 Components (View) use M2 Components femia droid
88. Material 3 at DNB theme.xml <style name=“Theme.Eufemia” parent=“Theme.MaterialComponents.DayNight.NoActionBar">
89. Material 3 at DNB theme.xml <style name=“Theme.Eufemia” parent=“Theme.MaterialComponents.DayNight.NoActionBar">
90. Material 3 at DNB theme.xml <style name=“Theme.Eufemia” parent=“Theme.Material3.DayNight.NoActionBar”>
91. 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>
92. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose) use M3 Components (View) use M2 Components (Compose) Eufemia Android
93. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose) use M3 Components (View) use M2 Components (Compose) Eufemia Android
94. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose) use M3 Components (View) use M2 + M3 Components (Compose) Eufemia Android
95. Material 3 at DNB Material3Theme( colorScheme = getMaterial3ColorScheme(), typography = provideM3Typography(), ) {} Theme.kt
96. Material 3 at DNB Theme.kt Material3Theme( colorScheme = getMaterial3ColorScheme(), typography = provideM3Typography(), ) { Material2Theme( colors = getMaterialColors(), typography = provideM2Typography(), content = content ) }
97. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose) use M3 Components (View) use M2 + M3 Components (Compose) Eufemia Android
98. Material 3 at DNB Eufemia Android use Material Components App1 App2 ❌ ❌
99. Takeaways & learnings
100. Takeaways & learnings • Color • Talk with the designers fi rst • Lots of color attributes • Tonal palette
101. Takeaways & learnings • Typography • 5 different roles • M2 to M3 mapping
102. Takeaways & learnings • Components • Navigation bar, buttons, chips, switches visually different • Toggle buttons -> Segmented buttons • Scaffold APIs are different • Screenshot tests for all components
103. THANKS ♥
104. QUESTIONS @oas004 @fatih_grs