$30 off During Our Annual Pro Sale. View Details »

Android Worldwide Material Design 3 in Compose

Android Worldwide Material Design 3 in Compose

Loveleen Kaur

May 08, 2023
Tweet

More Decks by Loveleen Kaur

Other Decks in Technology

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