Migrate to Material Design 3

[ghusta]

References :

• https://m3.material.io/
• Migrating to Material Design 3 (blog) -- Migrating from M2 to M3 (MDC 1.4.0 to MDC 1.5.0)
• Getting started with Material Components for Android
• 🎬 Migrating your app to Material Components for Android | Google Design Tutorials (MD2 only)
• Migrate from Material 2 to Material 3 in Compose (Jetpack Compose)
• 🎬 How to Build Stunning Material 3 Apps with Jetpack Compose - Android Studio Tutorial
• Material Design 3 in Compose
• Introducing Material Theme Builder
• Codelabs
  • Theming in Compose with Material 3

---

Theme Builder :

• https://material.io/blog/material-theme-builder
• https://material-foundation.github.io/material-theme-builder/

---

Material3 themes :

• https://github.com/material-components/material-components-android/blob/1.8.0/docs/getting-started.md#material3-themes
• https://github.com/material-components/material-components-android/blob/1.10.0/docs/getting-started.md#material3-themes (updated)
• https://developer.android.com/codelabs/m3-design-theming

⚠ Replacement for Theme.MaterialComponents.Light.DarkActionBar ???

---

Dynamic Color:

• https://developer.android.com/develop/ui/views/theming/dynamic-colors (from Android 12)
• https://m3.material.io/styles/color/dynamic-color/overview
• material-components/material-components-android@ad63d3f (in 1.11.0-beta01)

[ghusta]

NOTE: For MD2 only

[ghusta]

See also : https://www.youtube.com/watch?v=QDp8X43oFy8

[ghusta]

For status bar theme :

See : Android theming: Set Status Bar color to Action Bar color in Material3

Example :

<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowLightStatusBar">true</item>

[ghusta]

Color system change from M2 to M3 :

Source : https://developer.android.com/develop/ui/compose/designsystems/material2-material3#color

[ghusta]

Given the significant differences between the M2 and M3 color systems, there’s no reasonable mapping for Color parameters. Instead, use the Material Theme Builder tool to generate an M3 color scheme. Use the M2 colors as “core” source colors in the tool, which the tool expands into tonal palettes used by the M3 color scheme. The following mappings are recommended as a starting point:

M2	Material Theme Builder
primary	Primary
primaryVariant	Secondary
secondary	Tertiary
surface or background	Neutral