Material Design 3 in Jetpack Compose

Slide 1

Slide 1 text

Material Design 3 in Jetpack Compose Loveleen Kaur Software Engineer @ Astrotalk Google Android Educator

Slide 2

Slide 2 text

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 :)

Slide 3

Slide 3 text

Material Design 3 M3

Slide 4

Slide 4 text

● M3 is the latest version of Google’s open-source design system What is Material Design 3?

Slide 5

Slide 5 text

● M3 is the latest version of Google’s open-source design system ● New set of Design Capabilities What is Material Design 3?

Slide 6

Slide 6 text

● M3 is the latest version of Google’s open-source design system ● New set of Design Capabilities ● Updated theming What is Material Design 3?

Slide 7

Slide 7 text

● 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?

Slide 8

Slide 8 text

● 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?

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Google Compose Material 3 (1.0.1) What is Material Design 3?

Slide 11

Slide 11 text

What is Material Design 3?

Slide 12

Slide 12 text

Compose Material 3 M3

Slide 13

Slide 13 text

● Compose is combination of 7 Maven Group Ids within androidx. Compose Material 3

Slide 14

Slide 14 text

● Compose is combination of 7 Maven Group Ids within androidx. ● Each Group contains a targeted subset of functionality. Compose Material 3

Slide 15

Slide 15 text

● 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

Slide 16

Slide 16 text

● 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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Declaring dependencies dependencies { implementation("androidx.compose.material3:material3:1.0.1") } android { buildFeatures { compose = true } composeOptions { kotlinCompilerExtensionVersion = "1.1.1" } kotlinOptions { jvmTarget = "1.8" } }

Slide 19

Slide 19 text

Experimental APIs import androidx.compose.material3.ExperimentalMaterial3Api @OptIn(ExperimentalMaterial3Api::class) @Composable fun AppComposable() { // M3 composables }

Slide 20

Slide 20 text

Material Theming M3

Slide 21

Slide 21 text

● Color Scheme Material Theming

Slide 22

Slide 22 text

● Color Scheme ● Typography Material Theming

Slide 23

Slide 23 text

● Color Scheme ● Typography ● Shapes Material Theming

Slide 24

Slide 24 text

● Color Scheme ● Typography ● Shapes Material Theming

Slide 25

Slide 25 text

MaterialTheme( colorScheme = …, typography = …, shapes = …) { // M3 app content } Material Theming

Slide 26

Slide 26 text

Material Theming

Slide 27

Slide 27 text

Color Scheme M3

Slide 28

Slide 28 text

● The foundation of a color scheme is the set of five key colors. Color Scheme

Slide 29

Slide 29 text

● 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

Slide 30

Slide 30 text

● 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

Slide 31

Slide 31 text

Color Scheme

Slide 32

Slide 32 text

Generating Color Scheme Color.kt contains the colors of your theme with all the roles deﬁned 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) // .. // ..

Slide 33

Slide 33 text

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, // .. )

Slide 34

Slide 34 text

Dynamic Color Scheme M3

Slide 35

Slide 35 text

Dynamic Color Scheme

Slide 36

Slide 36 text

● Dynamic color is the key part of Material You. Dynamic Color Scheme

Slide 37

Slide 37 text

● 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

Slide 38

Slide 38 text

● 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

Slide 39

Slide 39 text

Slide 40

Slide 40 text

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 }

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Typography M3

Slide 45

Slide 45 text

Default typography scale

Slide 46

Slide 46 text

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 ), ) ...

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

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 ),

Slide 49

Slide 49 text

Shapes M3

Slide 50

Slide 50 text

● Material surfaces can be displayed in different shapes. Shapes

Slide 51

Slide 51 text

● Material surfaces can be displayed in different shapes. ● Shape scale defines style of container corners, offering a range of roundedness. Shapes

Slide 52

Slide 52 text

● 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

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Default Shapes for M3 Components

Slide 55

Slide 55 text

Shapes val replyShapes = Shapes( extraSmall = RoundedCornerShape(4. dp), small = RoundedCornerShape(8. dp), medium = RoundedCornerShape(12. dp), large = RoundedCornerShape(16. dp), extraLarge = RoundedCornerShape(24. dp) )

Slide 56

Slide 56 text

Shapes Medium shape for Card and Large shape for Floating action button in Reply sample app

Slide 57

Slide 57 text

Migration from Material Design 2 M3

Slide 58

Slide 58 text

1. Add M3 dependency alongside M2 dependency. Steps of Migration

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Ofﬁcial 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

Slide 65

Slide 65 text

Thank you! Loveleen Kaur Software Engineer @ Astrotalk Google Android Educator