Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Discovering Material 3

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.

Renaud MATHIEU

July 06, 2023
Tweet

More Decks by Renaud MATHIEU

Other Decks in Programming

Transcript

  1. Agenda 1. What is a Design System ? 2. A

    Brief History of Material Design 3. BREAK: Relay 4. Material You
  2. What is a Design System? Design Principles Branding Guidelines Visual

    Style Guide Component Library Interaction Patterns Documentation
  3. 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
  4. Material 1 h tt ps://m1.material.io/ A Brief History of Material

    Design Multiple elevation measurements for two objects
  5. 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" }
  6. 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
  7. 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 }
  8. Elevation M2: Shadows applied at all levels M3: Using color

    instead of shadows to communicate elevation
  9. Elevation M2: Shadows applied at all levels M3: Using color

    instead of shadows to communicate elevation
  10. 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
  11. Box { if (windowSizeClass.widthSizeClass == Compact) { LayoutForSmall() } else

    { LayoutForLarge() } } implementation("androidx.compose.material3:material3-window-size-class:1.2.0-alpha03") Layouts
  12. 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.