Android Worldwide Material Design 3 in Compose

Transcript

1. Loveleen Kaur
   Software Engineer (Astrotalk)
   Android Educator
   Material Design 3 in Compose
   

   View Slide

2. Table of Contents
   ● Using Material Design 3 and understanding component changes it brings.
   ● Migrating from Material Design 2.
   ● Using Material You personalization features and Material Theme Builder.
   ● Transition patterns and how to use them in your app.
   ● Adding Material Motion to your app.
   

   View Slide

3. Material
   Design 3
   

   View Slide

4. Understanding Material 3
   ● It introduces a new set of capabilities to adapt to users’ preferences, allowing
   users to customize the appearance of most things on their phones.
   ● It also provides app support in a more personal feeling, something that
   wasn’t possible before.
   ● Material Components have a lot of updates too. All these changes will be
   available to Android 12 users first.
   

   View Slide

5. Material Design 3 & Android 13
   ● Better accessibility support.
   ● Support for foldable devices.
   ● Ability to customize the operating system and give it a personal feel.
   ● Introduction of dynamic color, which enables you to personalize the colors in
   your apps.
   ● Very responsive UI.
   

   View Slide

6. Migrating From
   Material Design 2
   Theming
   

   View Slide

7. Migrating From Material Design 2
   First of all, you need to have an access to the Material Design 3 library. Make
   sure you have this dependency in your app build.gradle file:
   implementation
   "androidx.compose.material3:material3:$latest_material_3_version"
   

   View Slide

8. ● You need to ensure your app uses the correct imports for all the Material
   Components. The components should use the androidx.compose.material3
   package namespace.
   ● In your app build.gradle file, set the targetSdkVersion to 31 for Android 12
   compilation support. Upgrading targetSdkVersion forces you to set
   android:exported="true" in all your activities in the manifest file.
   ● In styles.xml, replace Theme.MaterialComponents.* with Theme.Material3.*
   for themes and Widget.MaterialComponents.* with Widget.Material3.* for
   widget styles.
   ● Lastly, migrate your colors to the Material3 theme.
   Migrating From Material Design 2
   

   View Slide

9. View Slide

10. ● Material You is a new addition in Material Design 3. It focuses more on
    aspects like personalization and adaptability.
    ● Material You makes it easy to customize your app, and it’s also very
    responsive.
    ● To generate the color scheme that can map with your newly used Material
    Design 3 components, you’ll use the Material Theme Builder tool.
    Material You
    

    View Slide

11. Material
    Theming
    Theming
    

    View Slide

12. An M3 theme contains the following subsystems: color scheme, typography and
    shapes. When you customize these values, your changes are automatically
    reflected in the M3 components you use to build your app.
    Material theming
    

    View Slide

13. Material theming
    Jetpack Compose implements these concepts with the M3 MaterialTheme
    composable:
    MaterialTheme(
    colorScheme = …,
    typography = …,
    shapes = …) {
    // M3 app content
    }
    

    View Slide

14. Color Scheme,
    Typography
    and shapes
    Theming
    

    View Slide

15. Color scheme
    The foundation of a
    color scheme is the
    set of five key
    colors. Each of
    these colors relate
    to a tonal palette of
    13 tones, which are
    used by Material 3
    components.
    

    View Slide

16. Generating color schemes
    While you can create a custom ColorScheme manually, it’s often easier to
    generate one using source colors from your brand.
    Color.kt
    val md_theme_light_primary = Color(0xFF476810)
    val md_theme_light_onPrimary = Color(0xFFFFFFFF)
    val md_theme_light_primaryContainer = Color(0xFFC7F089)
    // ..
    val md_theme_dark_primary = Color(0xFFACD370)
    val md_theme_dark_onPrimary = Color(0xFF213600)
    val md_theme_dark_primaryContainer = Color(0xFF324F00)
    // ..
    

    View Slide

17. Theme.kt
    private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    onPrimaryContainer = md_theme_light_onPrimaryContainer,
    // ..
    )
    private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
    // ..
    )
    

    View Slide

18. Theme.kt
    @Composable
    fun ReplyTheme(
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
    ) {
    val colorScheme =
    if (!useDarkTheme) {
    LightColorScheme
    } else {
    DarkColorScheme
    }
    MaterialTheme(
    colorScheme = colorScheme,
    content = content
    )
    }
    

    View Slide

19. Dynamic color
    schemes
    Theming
    

    View Slide

20. Material Theme Builder is a tool that
    helps you generate and visualize
    themes using Material You guidelines.
    It has a Figma plugin and a web
    platform too.
    Dynamic color schemes
    

    View Slide

21. ColorScheme
    //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
    }
    

    View Slide

22. Dynamic
    color
    Theming
    

    View Slide

23. val dynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
    val colorScheme = if (dynamic) {
    val context = LocalContext.current
    if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context)
    } else {
    // Use lightColorScheme, darkColorScheme, etc.
    }
    Dynamic ColorScheme
    

    View Slide

24. val dynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
    val colorScheme = if (dynamic) {
    val context = LocalContext.current
    if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context)
    } else {
    // Use lightColorScheme, darkColorScheme, etc.
    }
    Dynamic ColorScheme
    

    View Slide

25. val dynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S val
    colorScheme = if (dynamic) {
    val context = LocalContext.current
    if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context)
    } else {
    // Use lightColorScheme, darkColorScheme, etc.
    }
    Dynamic ColorScheme
    

    View Slide

26. Typography
    Theming
    

    View Slide

27. M3 M2
    

    View Slide

28. import androidx.compose.material3.Typography
    class Typography(
    val displayLarge: TextStyle,
    val displayMedium: TextStyle,
    val displaySmall: TextStyle,
    // headlineLarge, titleMedium, bodySmall,
    etc.
    )
    Typography
    

    View Slide

29. labelSmall
    titleMedium
    bodyLarge
    

    View Slide

30. Resources
    ● Material You using Jetpack Compose: https://youtu.be/jrfuHyMlehc
    ● Compose layout codelab:
    d.android.com/codelabs/jetpack-compose-layouts
    

    View Slide

31. Thank you!
    Loveleen Kaur
    Software Engineer (Astrotalk)
    Android Educator
    

    View Slide