Android Worldwide Material Design 3 in Compose

Transcript

1. Loveleen Kaur Software Engineer (Astrotalk) Android Educator Material Design 3 in Compose
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.
3. Material Design 3
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.
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.
6. Migrating From Material Design 2 Theming
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"
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
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
11. Material Theming Theming
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
13. Material theming Jetpack Compose implements these concepts with the M3 MaterialTheme composable: MaterialTheme( colorScheme = …, typography = …, shapes = …) { // M3 app content }
14. Color Scheme, Typography and shapes Theming
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.
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) // ..
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, // .. )
18. Theme.kt @Composable fun ReplyTheme( useDarkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colorScheme = if (!useDarkTheme) { LightColorScheme } else { DarkColorScheme } MaterialTheme( colorScheme = colorScheme, content = content ) }
19. Dynamic color schemes Theming
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
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 }
22. Dynamic color Theming
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
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
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
26. Typography Theming
27. M3 M2
28. import androidx.compose.material3.Typography class Typography( val displayLarge: TextStyle, val displayMedium: TextStyle, val displaySmall: TextStyle, // headlineLarge, titleMedium, bodySmall, etc. ) Typography
29. labelSmall titleMedium bodyLarge
30. Resources • Material You using Jetpack Compose: https://youtu.be/jrfuHyMlehc • Compose layout codelab: d.android.com/codelabs/jetpack-compose-layouts
31. Thank you! Loveleen Kaur Software Engineer (Astrotalk) Android Educator