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

Getting your apps ready for Material 3

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.

Fatih Giriş

July 06, 2023
Tweet

More Decks by Fatih Giriş

Other Decks in Technology

Transcript

  1. Getting your apps ready for Material 3 Odin Asbjørnsen Android

    Developer @ DNB Fatih Giris Android Lead @ DNB
  2. Agenda • Colors • Typography • Major components • Material

    2 to Material 3 • Material 3 at DNB • Take-aways & learnings
  3. Colors • Key colors • Accent • Neutral • Additional

    colors • Error • Product speci fi c
  4. Why tonal palettes? • Establish context in the visual hierarchy

    • Establish various level of meaning with the same color
  5. Why tonal palettes? • Establish context in the visual hierarchy

    • Establish various level of meaning with the same color • Accessible contrast ratios
  6. M3 Colors in Compose MaterialTheme.kt @Composable fun MaterialTheme( colorScheme: ColorScheme

    = MaterialTheme.colorScheme, shapes: Shapes = MaterialTheme.shapes, typography: Typography = MaterialTheme.typography, content: @Composable () -> Unit ) {
  7. M3 Colors in Compose MaterialTheme.kt @Composable fun MaterialTheme( colorScheme: ColorScheme

    = MaterialTheme.colorScheme, shapes: Shapes = MaterialTheme.shapes, typography: Typography = MaterialTheme.typography, content: @Composable () -> Unit ) {
  8. 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
  9. 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
  10. 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
  11. 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>
  12. <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
  13. Typography • 5 roles • Display 
 
 
 


    
 
 
 
 https://m3.material.io/styles/typography/applying-type
  14. Typography • 5 roles • Display • Headline 
 


    
 
 
 
 https://m3.material.io/styles/typography/applying-type
  15. Typography • 5 roles • Display • Headline • Title

    
 
 
 
 https://m3.material.io/styles/typography/applying-type
  16. Typography • 5 roles • Display • Headline • Title

    • Body 
 
 https://m3.material.io/styles/typography/applying-type
  17. Typography • 5 roles • Display • Headline • Title

    • Body • Label https://m3.material.io/styles/typography/applying-type
  18. Top App Bars • Provide content and actions • Support

    for dynamic colors • No drop shadow
  19. Switch • More accessible • New color mapping meets non

    text contrast requirements • Optional icon on the thumb • Taller and wider layout track
  20. Navigation Bar • New color mapping • No shadow •

    Pill shape as an active indicator • Taller height in M3
  21. Navigation Bar • 3 - 5 destinations with and without

    label text • Provide short and meaningful label texts 
 

  22. • 3 - 5 destinations with and without label text

    • Provide short and meaningful label texts • Optional badge Navigation Bar
  23. Material 2 to Material 3 • When should you migrate?

    • As soon as possible https://developer.android.com/jetpack/compose/designsystems/material2-material3
  24. 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.
  25. 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
  26. Design System at DNB Eufemia Android (View) Eufemia Android (Compose)

    use Material Components (View) use Material Components (Compose) Eufemia Android
  27. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose)

    use M2 Components (View) use M2 Components (Compose) Eufemia Android
  28. Material 3 at DNB Eufemia Android (View) Eufemia Android use

    M2 Components (View) use M2 Components femia droid
  29. Material 3 at DNB Eufemia Android (View) Eufemia Android use

    M3 Components (View) use M2 Components femia droid
  30. 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>
  31. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose)

    use M3 Components (View) use M2 Components (Compose) Eufemia Android
  32. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose)

    use M3 Components (View) use M2 Components (Compose) Eufemia Android
  33. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose)

    use M3 Components (View) use M2 + M3 Components (Compose) Eufemia Android
  34. Material 3 at DNB Theme.kt Material3Theme( colorScheme = getMaterial3ColorScheme(), typography

    = provideM3Typography(), ) { Material2Theme( colors = getMaterialColors(), typography = provideM2Typography(), content = content ) }
  35. Material 3 at DNB Eufemia Android (View) Eufemia Android (Compose)

    use M3 Components (View) use M2 + M3 Components (Compose) Eufemia Android
  36. Takeaways & learnings • Color • Talk with the designers

    fi rst • Lots of color attributes • Tonal palette
  37. Takeaways & learnings • Components • Navigation bar, buttons, chips,

    switches visually different • Toggle buttons -> Segmented buttons • Scaffold APIs are different • Screenshot tests for all components