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

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. 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.
  2. 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.
  3. 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.
  4. 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"
  5. • 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
  6. • 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
  7. 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
  8. Material theming Jetpack Compose implements these concepts with the M3

    MaterialTheme composable: MaterialTheme( colorScheme = …, typography = …, shapes = …) { // M3 app content }
  9. 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.
  10. 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) // ..
  11. 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, // .. )
  12. Theme.kt @Composable fun ReplyTheme( useDarkTheme: Boolean = isSystemInDarkTheme(), content: @Composable

    () -> Unit ) { val colorScheme = if (!useDarkTheme) { LightColorScheme } else { DarkColorScheme } MaterialTheme( colorScheme = colorScheme, content = content ) }
  13. 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
  14. 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 }
  15. 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
  16. 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
  17. 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
  18. import androidx.compose.material3.Typography class Typography( val displayLarge: TextStyle, val displayMedium: TextStyle,

    val displaySmall: TextStyle, // headlineLarge, titleMedium, bodySmall, etc. ) Typography
  19. Resources • Material You using Jetpack Compose: https://youtu.be/jrfuHyMlehc • Compose

    layout codelab: d.android.com/codelabs/jetpack-compose-layouts