Merge pull request #371 from android/main-m3-conversion

Layouts codelab - M3 starter code
android · Aug 16, 2023 · 44d5ec4 · 44d5ec4
2 parents 9ff7b4c + cdcef78
commit 44d5ec4
Show file tree

Hide file tree

Showing 9 changed files with 205 additions and 75 deletions.
diff --git a/BasicLayoutsCodelab/app/build.gradle b/BasicLayoutsCodelab/app/build.gradle
@@ -69,7 +69,8 @@ dependencies {
 
     implementation 'androidx.core:core-ktx:1.10.1'
     implementation "androidx.compose.ui:ui"
-    implementation "androidx.compose.material:material"
+    implementation 'androidx.compose.material3:material3'
+    implementation 'androidx.compose.material3:material3-window-size-class:1.1.1'
     implementation "androidx.compose.material:material-icons-extended"
     implementation "androidx.compose.ui:ui-tooling-preview"
     implementation "com.google.android.material:material:1.9.0"

diff --git a/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/MainActivity.kt b/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/MainActivity.kt
@@ -97,6 +97,24 @@ private fun SootheBottomNavigation(modifier: Modifier = Modifier) {
 
 // Step: MySoothe App - Scaffold
 @Composable
+fun MySootheAppPortrait() {
+    // Implement composable here
+}
+
+// Step: Bottom navigation - Material
+@Composable
+private fun SootheNavigationRail(modifier: Modifier = Modifier) {
+    // Implement composable here
+}
+
+// Step: Landscape Mode
+@Composable
+fun MySootheAppLandscape(){
+    // Implement composable here
+}
+
+// Step: MySoothe App
+@Composable
 fun MySootheApp() {
     // Implement composable here
 }
@@ -124,13 +142,13 @@ private data class DrawableStringPair(
     @StringRes val text: Int
 )
 
-@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
+@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE)
 @Composable
 fun SearchBarPreview() {
     MySootheTheme { SearchBar(Modifier.padding(8.dp)) }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
+@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE)
 @Composable
 fun AlignYourBodyElementPreview() {
     MySootheTheme {
@@ -140,7 +158,7 @@ fun AlignYourBodyElementPreview() {
     }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
+@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE)
 @Composable
 fun FavoriteCollectionCardPreview() {
     MySootheTheme {
@@ -150,38 +168,50 @@ fun FavoriteCollectionCardPreview() {
     }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
+@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE)
 @Composable
 fun FavoriteCollectionsGridPreview() {
     MySootheTheme { FavoriteCollectionsGrid() }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
+@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE)
 @Composable
 fun AlignYourBodyRowPreview() {
     MySootheTheme { AlignYourBodyRow() }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
+@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE)
 @Composable
 fun HomeSectionPreview() {
     MySootheTheme { HomeSection() }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
+@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE)
 @Composable
 fun ScreenContentPreview() {
     MySootheTheme { HomeScreen() }
 }
 
-@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
+@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE)
 @Composable
 fun BottomNavigationPreview() {
     MySootheTheme { SootheBottomNavigation(Modifier.padding(top = 24.dp)) }
 }
 
+@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE)
+@Composable
+fun NavigationRailPreview() {
+    MySootheTheme { SootheNavigationRail() }
+}
+
 @Preview(widthDp = 360, heightDp = 640)
 @Composable
-fun MySoothePreview() {
-    MySootheApp()
+fun MySoothePortraitPreview() {
+    MySootheAppPortrait()
+}
+
+@Preview(widthDp = 640, heightDp = 360)
+@Composable
+fun MySootheLandscapePreview() {
+    MySootheAppLandscape()
 }
diff --git a/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/ui/theme/Color.kt b/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/ui/theme/Color.kt
@@ -18,12 +18,51 @@ package com.codelab.basiclayouts.ui.theme
 
 import androidx.compose.ui.graphics.Color
 
-val taupe100 = Color(0xFFF0EAE2)
-val taupe800 = Color(0xFF655454)
-val rust300 = Color(0xFFE1AFAF)
-val rust600 = Color(0xFF886363)
-val gray900 = Color(0xFF333333)
-val white150 = Color.White.copy(alpha = 0.15f)
-val white800 = Color.White.copy(alpha = 0.8f)
-val white850 = Color.White.copy(alpha = 0.85f)
-val gray800 = gray900.copy(alpha = 0.8f)
+val md_theme_light_primary = Color(0xFF6B5C4D)
+val md_theme_light_onPrimary = Color(0xFFFFFFFF)
+val md_theme_light_primaryContainer = Color(0xFFF4DFCD)
+val md_theme_light_onPrimaryContainer = Color(0xFF241A0E)
+val md_theme_light_secondary = Color(0xFF635D59)
+val md_theme_light_onSecondary = Color(0xFFFFFFFF)
+val md_theme_light_secondaryContainer = Color(0xFFEAE1DB)
+val md_theme_light_onSecondaryContainer = Color(0xFF1F1B17)
+val md_theme_light_tertiary = Color(0xFF5E5F58)
+val md_theme_light_onTertiary = Color(0xFFFFFFFF)
+val md_theme_light_tertiaryContainer = Color(0xFFE3E3DA)
+val md_theme_light_onTertiaryContainer = Color(0xFF1B1C17)
+val md_theme_light_error = Color(0xFFBA1A1A)
+val md_theme_light_errorContainer = Color(0xFFFFDAD6)
+val md_theme_light_onError = Color(0xFFFFFFFF)
+val md_theme_light_onErrorContainer = Color(0xFF410002)
+val md_theme_light_background = Color(0xFFF5F0EE)
+val md_theme_light_onBackground = Color(0xFF1D1B1A)
+val md_theme_light_surface = Color(0xFFFFFBFF)
+val md_theme_light_onSurface = Color(0xFF1D1B1A)
+val md_theme_light_surfaceVariant = Color(0xFFE7E1DE)
+val md_theme_light_onSurfaceVariant = Color(0xFF494644)
+val md_theme_light_outline = Color(0xFF7A7674)
+val md_theme_light_inverseOnSurface = Color(0xFFF5F0EE)
+
+val md_theme_dark_primary = Color(0xFFD7C3B1)
+val md_theme_dark_onPrimary = Color(0xFF3A2E22)
+val md_theme_dark_primaryContainer = Color(0xFF524437)
+val md_theme_dark_onPrimaryContainer = Color(0xFFF4DFCD)
+val md_theme_dark_secondary = Color(0xFFCDC5BF)
+val md_theme_dark_onSecondary = Color(0xFF34302C)
+val md_theme_dark_secondaryContainer = Color(0xFF4B4642)
+val md_theme_dark_onSecondaryContainer = Color(0xFFEAE1DB)
+val md_theme_dark_tertiary = Color(0xFFC7C7BE)
+val md_theme_dark_onTertiary = Color(0xFF30312B)
+val md_theme_dark_tertiaryContainer = Color(0xFF464741)
+val md_theme_dark_onTertiaryContainer = Color(0xFFE3E3DA)
+val md_theme_dark_error = Color(0xFFFFB4AB)
+val md_theme_dark_errorContainer = Color(0xFF93000A)
+val md_theme_dark_onError = Color(0xFF690005)
+val md_theme_dark_onErrorContainer = Color(0xFFFFB4AB)
+val md_theme_dark_background = Color(0xFF32302F)
+val md_theme_dark_onBackground = Color(0xFFE6E1E0)
+val md_theme_dark_surface = Color(0xFF1D1B1A)
+val md_theme_dark_onSurface = Color(0xFFE6E1E0)
+val md_theme_dark_surfaceVariant = Color(0xFF494644)
+val md_theme_dark_onSurfaceVariant = Color(0xFFE6E1E0)
+val md_theme_dark_outline = Color(0xFF94908D)
diff --git a/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/ui/theme/Shape.kt b/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/ui/theme/Shape.kt
@@ -17,10 +17,10 @@
 package com.codelab.basiclayouts.ui.theme
 
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Shapes
+import androidx.compose.material3.Shapes
 import androidx.compose.ui.unit.dp
 
 val shapes = Shapes(
     small = RoundedCornerShape(4.dp),
-    medium = RoundedCornerShape(16.dp)
+    medium = RoundedCornerShape(12.dp)
 )
diff --git a/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/ui/theme/Theme.kt b/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/ui/theme/Theme.kt
@@ -17,44 +17,78 @@
 package com.codelab.basiclayouts.ui.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.darkColors
-import androidx.compose.material.lightColors
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.Color
-
-private val LightColorPalette = lightColors(
-    primary = gray900,
-    secondary = rust600,
-    background = taupe100,
-    surface = Color.White.copy(alpha = .85f),
-    onPrimary = Color.White,
-    onSecondary = Color.White,
-    onBackground = taupe800,
-    onSurface = gray900.copy(alpha = 0.8f)
+
+private val LightColors = lightColorScheme(
+    primary = md_theme_light_primary,
+    onPrimary = md_theme_light_onPrimary,
+    primaryContainer = md_theme_light_primaryContainer,
+    onPrimaryContainer = md_theme_light_onPrimaryContainer,
+    secondary = md_theme_light_secondary,
+    onSecondary = md_theme_light_onSecondary,
+    secondaryContainer = md_theme_light_secondaryContainer,
+    onSecondaryContainer = md_theme_light_onSecondaryContainer,
+    tertiary = md_theme_light_tertiary,
+    onTertiary = md_theme_light_onTertiary,
+    tertiaryContainer = md_theme_light_tertiaryContainer,
+    onTertiaryContainer = md_theme_light_onTertiaryContainer,
+    error = md_theme_light_error,
+    errorContainer = md_theme_light_errorContainer,
+    onError = md_theme_light_onError,
+    onErrorContainer = md_theme_light_onErrorContainer,
+    background = md_theme_light_background,
+    onBackground = md_theme_light_onBackground,
+    surface = md_theme_light_surface,
+    onSurface = md_theme_light_onSurface,
+    surfaceVariant = md_theme_light_surfaceVariant,
+    onSurfaceVariant = md_theme_light_onSurfaceVariant,
+    outline = md_theme_light_outline
 )
 
-private val DarkColorPalette = darkColors(
-    primary = Color.White,
-    secondary = rust300,
-    background = gray900,
-    surface = Color.White.copy(alpha = 0.15f),
-    onPrimary = gray900,
-    onSecondary = gray900,
-    onBackground = taupe100,
-    onSurface = Color.White.copy(alpha = .8f)
+
+private val DarkColors = darkColorScheme(
+    primary = md_theme_dark_primary,
+    onPrimary = md_theme_dark_onPrimary,
+    primaryContainer = md_theme_dark_primaryContainer,
+    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
+    secondary = md_theme_dark_secondary,
+    onSecondary = md_theme_dark_onSecondary,
+    secondaryContainer = md_theme_dark_secondaryContainer,
+    onSecondaryContainer = md_theme_dark_onSecondaryContainer,
+    tertiary = md_theme_dark_tertiary,
+    onTertiary = md_theme_dark_onTertiary,
+    tertiaryContainer = md_theme_dark_tertiaryContainer,
+    onTertiaryContainer = md_theme_dark_onTertiaryContainer,
+    error = md_theme_dark_error,
+    errorContainer = md_theme_dark_errorContainer,
+    onError = md_theme_dark_onError,
+    onErrorContainer = md_theme_dark_onErrorContainer,
+    background = md_theme_dark_background,
+    onBackground = md_theme_dark_onBackground,
+    surface = md_theme_dark_surface,
+    onSurface = md_theme_dark_onSurface,
+    surfaceVariant = md_theme_dark_surfaceVariant,
+    onSurfaceVariant = md_theme_dark_onSurfaceVariant,
+    outline = md_theme_dark_outline
 )
 
 @Composable
-fun MySootheTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
+fun MySootheTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable() () -> Unit
+) {
     val colors = if (darkTheme) {
-        DarkColorPalette
+        DarkColors
     } else {
-        LightColorPalette
+        LightColors
     }
 
     MaterialTheme(
-        colors = colors,
+        colorScheme = colors,
         typography = typography,
         shapes = shapes,
         content = content

diff --git a/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/ui/theme/Type.kt b/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/ui/theme/Type.kt
@@ -16,11 +16,12 @@
 
 package com.codelab.basiclayouts.ui.theme
 
-import androidx.compose.material.Typography
+import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.sp
 import com.codelab.basiclayouts.R
 
@@ -49,35 +50,60 @@ private val fontFamilyLato = FontFamily(
 )
 
 val typography = Typography(
-    defaultFontFamily = fontFamilyLato,
-    h1 = TextStyle(
+    displayLarge = TextStyle(
         fontFamily = fontFamilyKulim,
         fontWeight = FontWeight.Light,
-        fontSize = 28.sp,
-        letterSpacing = (1.15).sp
+        fontSize = 57.sp,
+        lineHeight = 64.sp,
+        letterSpacing = (-0.25).sp
     ),
-    h2 = TextStyle(
+    displayMedium = TextStyle(
         fontFamily = fontFamilyKulim,
-        fontSize = 15.sp,
-        letterSpacing = (1.15).sp
+        fontSize = 45.sp,
+        lineHeight = 52.sp
     ),
-    h3 = TextStyle(
-        fontWeight = FontWeight.Bold,
-        fontSize = 14.sp,
-        letterSpacing = 0.sp
+    displaySmall = TextStyle(
+        fontFamily = fontFamilyKulim,
+        fontSize = 36.sp,
+        lineHeight = 44.sp
     ),
-    body1 = TextStyle(
-        fontSize = 14.sp,
-        letterSpacing = 0.sp
+    titleMedium = TextStyle(
+        fontFamily = fontFamilyLato,
+        fontWeight = FontWeight(500),
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = (0.15).sp
+    ),
+    bodySmall = TextStyle(
+        fontFamily = fontFamilyLato,
+        fontSize = 12.sp,
+        lineHeight = 16.sp,
+        letterSpacing = (0.4).sp
     ),
-    button = TextStyle(
-        fontWeight = FontWeight.Bold,
+    bodyMedium = TextStyle(
+        fontFamily = fontFamilyLato,
         fontSize = 14.sp,
-        letterSpacing = (1.15).sp
+        lineHeight = 20.sp,
+        letterSpacing = (0.25).sp
     ),
-    caption = TextStyle(
-        fontFamily = fontFamilyKulim,
+    bodyLarge = TextStyle(
+        fontFamily = fontFamilyLato,
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = (0.5).sp
+    ),
+    labelMedium = TextStyle(
+        fontFamily = fontFamilyLato,
+        fontWeight = FontWeight(500),
         fontSize = 12.sp,
-        letterSpacing = (1.15).sp
+        lineHeight = 16.sp,
+        letterSpacing = (0.5).sp,
+        textAlign = TextAlign.Center
     ),
+    labelLarge = TextStyle(
+        fontFamily = fontFamilyLato,
+        fontSize = 14.sp,
+        lineHeight = 20.sp,
+        letterSpacing = (0.1).sp
+    )
 )