Material Design 3 in Jetpack Compose

Transcript

1. Material Design 3 in Jetpack Compose Loveleen Kaur Software Engineer @ Astrotalk Google Android Educator
2. Who am I? • Loveleen Kaur • Software Engineer - Android @ Astrotalk • Core Team Member @ Google Developer Groups Chandigarh • Android Educator @ Android Educators Community India • Phd Research Scholar • Develop Mobile Applications • Technical Speaker • Happy Android Developer :)
3. Material Design 3 M3
4. • M3 is the latest version of Google’s open-source design system What is Material Design 3?
5. • M3 is the latest version of Google’s open-source design system • New set of Design Capabilities What is Material Design 3?
6. • M3 is the latest version of Google’s open-source design system • New set of Design Capabilities • Updated theming What is Material Design 3?
7. • M3 is the latest version of Google’s open-source design system • New set of Design Capabilities • Updated theming • Material You personalization What is Material Design 3?
8. • M3 is the latest version of Google’s open-source design system • New set of Design Capabilities • Updated theming • Material You personalization • Updates to Android 12 visual style and system UI What is Material Design 3?
9. • M3 is the latest version of Google’s open-source design system • New set of Design Capabilities • Updated theming • Material You personalization • Updates to Android 12 visual style and system UI What is Material Design 3?
10. Google Compose Material 3 (1.0.1) What is Material Design 3?
11. What is Material Design 3?
12. Compose Material 3 M3
13. • Compose is combination of 7 Maven Group Ids within androidx. Compose Material 3
14. • Compose is combination of 7 Maven Group Ids within androidx. • Each Group contains a targeted subset of functionality. Compose Material 3
15. • Compose is combination of 7 Maven Group Ids within androidx. • Each Group contains a targeted subset of functionality • Each with its own set of release notes. Compose Material 3
16. • Compose is combination of 7 Maven Group Ids within androidx. • Each Group contains a targeted subset of functionality • Each with its own set of release notes. Compose Material 3
17. compose.animation Build animations in their Jetpack Compose applications to enrich the UX. compose.compiler Transform @Composable functions and enable optimizations with a Kotlin compiler plugin. compose.foundation Write Jetpack Compose applications with ready to use building blocks. compose.material Build Jetpack Compose UIs with ready to use Material Design Components. compose.material3 Build Jetpack Compose UIs with Material Design 3 Components. compose.runtime Fundamental building blocks of Compose's programming model and state management. compose.ui Fundamental components of compose UI needed to interact with the device, including layout, drawing, and input. Stable Release-1.0.1 Latest Update-April 19, 2023 Compose Material 3
18. Declaring dependencies dependencies { implementation("androidx.compose.material3:material3:1.0.1") } android { buildFeatures { compose = true } composeOptions { kotlinCompilerExtensionVersion = "1.1.1" } kotlinOptions { jvmTarget = "1.8" } }
19. Experimental APIs import androidx.compose.material3.ExperimentalMaterial3Api @OptIn(ExperimentalMaterial3Api::class) @Composable fun AppComposable() { // M3 composables }
20. Material Theming M3
21. • Color Scheme Material Theming
22. • Color Scheme • Typography Material Theming
23. • Color Scheme • Typography • Shapes Material Theming
24. • Color Scheme • Typography • Shapes Material Theming
25. MaterialTheme( colorScheme = …, typography = …, shapes = …) { // M3 app content } Material Theming
26. Material Theming
27. Color Scheme M3
28. • The foundation of a color scheme is the set of five key colors. Color Scheme
29. • 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. Color Scheme
30. • 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. Color Scheme
31. Color Scheme
32. Generating Color Scheme Color.kt contains the colors of your theme with all the roles defined for both light and dark theme colors. 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) // .. // ..
33. Generating Color Scheme Theme.kt contains a setup for light and dark color schemes and the app theme. 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, // .. )
34. Dynamic Color Scheme M3
35. Dynamic Color Scheme
36. • Dynamic color is the key part of Material You. Dynamic Color Scheme
37. • Dynamic color is the key part of Material You. • This color palette is used as the starting point to generate light and dark color schemes. Dynamic Color Scheme
38. • Dynamic color is the key part of Material You. • This color palette is used as the starting point to generate light and dark color schemes. • Dynamic color is available on Android 12 and above. Dynamic Color Scheme
39. • Dynamic color is the key part of Material You. • This color palette is used as the starting point to generate light and dark color schemes. • Dynamic color is available on Android 12 and above. Dynamic Color Scheme
40. Dynamic Color Scheme // 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 }
41. Color Usage • Primary is the base color, used for main components like prominent buttons, active states, and the tint of elevated surfaces. • The secondary key color is used for less prominent components in the UI, such as filter chips, and expands the opportunity for color expression. • The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring enhanced attention to an element.
44. Typography M3
45. Default typography scale
46. Defining Typography val replyTypography = Typography( titleLarge = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 22. sp, lineHeight = 28. sp, letterSpacing = 0. sp ), titleMedium = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 16. sp, lineHeight = 24. sp, letterSpacing = 0.15.sp ), ) ...
48. Custom Typography bodyLarge = TextStyle( fontWeight = FontWeight.Normal, fontFamily = FontFamily.SansSerif, fontStyle = FontStyle.Italic, fontSize = 16. sp, lineHeight = 24. sp, letterSpacing = 0.15.sp, baselineShift = BaselineShift.Subscript ),
49. Shapes M3
50. • Material surfaces can be displayed in different shapes. Shapes
51. • Material surfaces can be displayed in different shapes. • Shape scale defines style of container corners, offering a range of roundedness. Shapes
52. • Material surfaces can be displayed in different shapes. • Shape scale defines style of container corners, offering a range of roundedness. • There are different sizes of shapes- Extra Small, Small, Medium, Large, Extra Large Shapes
53. • Material surfaces can be displayed in different shapes. • Shape scale defines style of container corners, offering a range of roundedness. • There are different sizes of shapes- Extra Small, Small, Medium, Large, Extra Large Shapes
54. Default Shapes for M3 Components
55. Shapes val replyShapes = Shapes( extraSmall = RoundedCornerShape(4. dp), small = RoundedCornerShape(8. dp), medium = RoundedCornerShape(12. dp), large = RoundedCornerShape(16. dp), extraLarge = RoundedCornerShape(24. dp) )
56. Shapes Medium shape for Card and Large shape for Floating action button in Reply sample app
57. Migration from Material Design 2 M3
58. 1. Add M3 dependency alongside M2 dependency. Steps of Migration
59. 1. Add M3 dependency alongside M2 dependency. 2. Add M3 version(s) of your app’s theme(s) alongside M2 version(s) of your app’s theme(s). Steps of Migration
60. 1. Add M3 dependency alongside M2 dependency. 2. Add M3 version(s) of your app’s theme(s) alongside M2 version(s) of your app’s theme(s). 3. Migrate individual modules, screens, or composables to M3, depending on the size and complexity of your app. Steps of Migration
61. 1. Add M3 dependency alongside M2 dependency. 2. Add M3 version(s) of your app’s theme(s) alongside M2 version(s) of your app’s theme(s). 3. Migrate individual modules, screens, or composables to M3, depending on the size and complexity of your app. 4. Once fully migrated, remove the M2 version(s) of your app’s theme(s). Steps of Migration
62. 1. Add M3 dependency alongside M2 dependency. 2. Add M3 version(s) of your app’s theme(s) alongside M2 version(s) of your app’s theme(s). 3. Migrate individual modules, screens, or composables to M3, depending on the size and complexity of your app. 4. Once fully migrated, remove the M2 version(s) of your app’s theme(s). 5. Remove M2 dependency. Steps of Migration
63. 1. Add M3 dependency alongside M2 dependency. 2. Add M3 version(s) of your app’s theme(s) alongside M2 version(s) of your app’s theme(s). 3. Migrate individual modules, screens, or composables to M3, depending on the size and complexity of your app. 4. Once fully migrated, remove the M2 version(s) of your app’s theme(s). 5. Remove M2 dependency. Steps of Migration
64. Official Resources • https://developer.android.com/jetpack/compose/desig nsystems/material3 • https://m3.material.io/ • https://developer.android.com/jetpack/androidx/releas es/compose-material3 • https://github.com/android/compose-samples
65. Thank you! Loveleen Kaur Software Engineer @ Astrotalk Google Android Educator