Discovering Material 3

Material 3 was announced on October 28, 2021, and how come we developers don't seem to be in a rush to transition to Material 3?

Is the adoption slow because our designers don't see much value in it or because we developers are already putting our efforts into a transition to Jetpack Compose?

In this talk, we will see how Material Design has evolved over the year and we will provide in deep dive into Material 3. We will then delve into the new components and patterns introduced in Material 3, such as the new `SearchBar`, `DatePicker`, and `BottomSheet`. We will also discuss how Material 3 supports the latest Android platform features, including a foldable device theming system. We will explore how Material 3 can be used to enhance user experience.

Transcript

1. T renaud_mathieu Mastodon & @renaud@androiddev.social linkedIn & renaudmathieu1 Discovering Material 3 droidcon Berlin 2023
2. Agenda 1. What is a Design System ? 2. A Brief History of Material Design 3. BREAK: Relay 4. Material You
3. What is a Design System?
4. What is a Design System? Design Principles Branding Guidelines Visual Style Guide Component Library Interaction Patterns Documentation
5. Why a Design System?
6. Why not a Design System?
11. Take your Shot of Vitamin Gerard Paligot • Booth • 2:35pm
12. A Brief History of Material Design
13. Prequel Ø → Holo A Brief History of Material Design
14. Prequel Ø → Holo Android version 2.3: Gingerbread Android version 4.0: Ice Cream Sandwich Android versions 1.0 to 1.1 A Brief History of Material Design 10 Years of Android Development Julien Salvi • Booth • Friday 11:45am
15. Material 1 h tt ps://m1.material.io/ A Brief History of Material Design
16. Material 1 h tt ps://m1.material.io/ A Brief History of Material Design
17. Material 1 h tt ps://m1.material.io/ A Brief History of Material Design Multiple elevation measurements for two objects
18. Material 1 h tt ps://m1.material.io/ A Brief History of Material Design
19. Material 1 h tt ps://m1.material.io/ A Brief History of Material Design
20. Material 1 h tt ps://m1.material.io/ A Brief History of Material Design
21. Material 1 h tt ps://m1.material.io/ A Brief History of Material Design
22. Material 2 h tt ps://m2.material.io/ A Brief History of Material Design
23. Material 2 h tt ps://m2.material.io/ Colors Typography Shapes A Brief History of Material Design
24. Material 2 h tt ps://m2.material.io/ Colors Typography Shapes A Brief History of Material Design
25. Material 2 h tt ps://m2.material.io/ Colors Typography Shapes A Brief History of Material Design
26. Material 2 h tt ps://m2.material.io/ A Brief History of Material Design
27. Material 3 h tt ps://m3.material.io/ Introducing Material You
28. Material 3 h tt ps://m3.material.io/
30. Figma Account Android Studio Chipmunk or later Jetpack Compose version 1.2 or later Figma Personal Access Token plugins { id("com.android.application") id("org.jetbrains.kotlin.android") id("com.google.relay") version "0.3.06" }
31. DEMO Figma + Android Studio
33. Material 3 h tt ps://m3.material.io/
35. Material 3 h tt ps://m3.material.io/
38. Material 3 h tt ps://m3.material.io/ Colors Icons Motion Elevation Typography Shape
39. Typography
40. Material 3 h tt ps://m3.material.io/ Colors Icons Motion Elevation Typography Shape
41. Shape M2: Three-level shape scale based on the size of the component container M3: Seven-level shape scale based on the roundedness of shape corners
42. Material 3 h tt ps://m3.material.io/ Colors Icons Motion Elevation Typography Shape
43. Icons
44. Material 3 h tt ps://m3.material.io/ Colors Icons Motion Elevation Typography Shape
45. Colors Understanding Color Theming and Color Roles
46. Colors Understanding Color Theming and Color Roles
47. Colors Understanding Color Theming and Color Roles
48. Colors Understanding Color Theming and Color Roles
49. Colors
50. Colors
51. Colors Dynamic Color // Dynamic color is available on Android 12+ val dynamicColor = Build.VERSION.SDK_INT > = Build.VERSION_CODES.S val colors = when { dynamicColor & & darkTheme - > dynamicDarkColorScheme(LocalContext.current) dynamicColor & & !darkTheme - > dynamicLightColorScheme(LocalContext.current) darkTheme - > darkColorScheme else - > lightColorScheme }
52. Material 3 h tt ps://m3.material.io/ Colors Icons Motion Elevation Typography Shape
53. Elevation M2: Shadows applied at all levels M3: Using color instead of shadows to communicate elevation
54. Elevation M2: Shadows applied at all levels M3: Using color instead of shadows to communicate elevation
55. Elevation 1. One su rf ace at 1dp elevation and another su rf ace at 8dp elevation, as viewed from the front 2. The di ff erence in elevation between the two su rf aces is 7dp, as viewed from the side
58. Material 3 h tt ps://m3.material.io/ Colors Icons Motion Elevation Typography Shape Layouts
59. Layouts
60. Layouts
61. Box { if (windowSizeClass.widthSizeClass == Compact) { LayoutForSmall() } else { LayoutForLarge() } } implementation("androidx.compose.material3:material3-window-size-class:1.2.0-alpha03") Layouts
62. Migrating To Material3
63. Migrating To Material3 Phased Migration Add M3 dependency alongside M2 dependency. Add M3 version of your app’s theme alongside M2 version. Migrate individual modules, screens, or composables to M3, depending on the size and complexity of your app. Once fully migrated, remove the M2 version of your app’s theme.
64. Migrating To Material3 Phased Migration Getting your apps ready for M3 Fatih & Odin • Hopper • 9:20pm
65. Conclusion
66. Conclusion
67. Conclusion h tt ps://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary.html
68. Conclusion h tt ps://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary.html
69. Every detail makes the design. Thank You! renaudmathieu.com