From 825a4c5397972062e924d1bfcd40227dad34677b Mon Sep 17 00:00:00 2001 From: MagicalMeghan Date: Mon, 7 Aug 2023 18:32:10 -0700 Subject: [PATCH 1/4] Layouts codelab - M3 starter code --- BasicLayoutsCodelab/app/build.gradle | 3 +- .../codelab/basiclayouts/ui/theme/Color.kt | 57 ++++++++++-- .../codelab/basiclayouts/ui/theme/Shape.kt | 4 +- .../codelab/basiclayouts/ui/theme/Theme.kt | 88 +++++++++++++------ .../com/codelab/basiclayouts/ui/theme/Type.kt | 68 +++++++++----- .../app/src/main/res/values-night/colors.xml | 2 +- .../app/src/main/res/values/colors.xml | 2 +- .../app/src/main/res/values/strings.xml | 6 +- 8 files changed, 165 insertions(+), 65 deletions(-) diff --git a/BasicLayoutsCodelab/app/build.gradle b/BasicLayoutsCodelab/app/build.gradle index fc75f80d3..cadf03eae 100644 --- 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/ui/theme/Color.kt b/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/ui/theme/Color.kt index 2209e1513..d36e9281c 100644 --- 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(0xFF1D1B1A) +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(0xFFCBC5C2) +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 index b47d019db..395e7ae10 100644 --- 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 index d0c60e2fb..e49daf6ea 100644 --- 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 index 60fb99339..2cb1dcbd3 100644 --- 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 + ) ) diff --git a/BasicLayoutsCodelab/app/src/main/res/values-night/colors.xml b/BasicLayoutsCodelab/app/src/main/res/values-night/colors.xml index 8674ee31e..007841d3b 100644 --- a/BasicLayoutsCodelab/app/src/main/res/values-night/colors.xml +++ b/BasicLayoutsCodelab/app/src/main/res/values-night/colors.xml @@ -12,5 +12,5 @@ the License. --> - #333333 + #32302F \ No newline at end of file diff --git a/BasicLayoutsCodelab/app/src/main/res/values/colors.xml b/BasicLayoutsCodelab/app/src/main/res/values/colors.xml index aa255b5a9..b94156844 100644 --- a/BasicLayoutsCodelab/app/src/main/res/values/colors.xml +++ b/BasicLayoutsCodelab/app/src/main/res/values/colors.xml @@ -12,5 +12,5 @@ the License. --> - #F0EAE2 + #F5F0EE \ No newline at end of file diff --git a/BasicLayoutsCodelab/app/src/main/res/values/strings.xml b/BasicLayoutsCodelab/app/src/main/res/values/strings.xml index 60ef608af..5f979c4e4 100644 --- a/BasicLayoutsCodelab/app/src/main/res/values/strings.xml +++ b/BasicLayoutsCodelab/app/src/main/res/values/strings.xml @@ -14,7 +14,7 @@ MySoothe Favorite Collections - Align your body + Align your Body Inversions Quick yoga Stretching @@ -28,7 +28,7 @@ Overwhelmed Nightly wind down start - HOME - PROFILE + Home + Profile Search \ No newline at end of file From 99e5ca17ab589fefc4df34f110861d090241afef Mon Sep 17 00:00:00 2001 From: MagicalMeghan Date: Mon, 7 Aug 2023 19:01:55 -0700 Subject: [PATCH 2/4] Landscape mode - starter code --- .../com/codelab/basiclayouts/MainActivity.kt | 34 +++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/MainActivity.kt b/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/MainActivity.kt index e779da65c..c03a7a742 100644 --- 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 } @@ -180,8 +198,20 @@ fun BottomNavigationPreview() { MySootheTheme { SootheBottomNavigation(Modifier.padding(top = 24.dp)) } } +@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2) +@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() } From 7c4bae80341bda6548d67a2fda22e653e443c525 Mon Sep 17 00:00:00 2001 From: MagicalMeghan Date: Tue, 8 Aug 2023 15:51:45 -0700 Subject: [PATCH 3/4] Update Preview background colors --- .../com/codelab/basiclayouts/MainActivity.kt | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/MainActivity.kt b/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/MainActivity.kt index c03a7a742..80d77cfbd 100644 --- a/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/MainActivity.kt +++ b/BasicLayoutsCodelab/app/src/main/java/com/codelab/basiclayouts/MainActivity.kt @@ -142,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 { @@ -158,7 +158,7 @@ fun AlignYourBodyElementPreview() { } } -@Preview(showBackground = true, backgroundColor = 0xFFF0EAE2) +@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE) @Composable fun FavoriteCollectionCardPreview() { MySootheTheme { @@ -168,37 +168,37 @@ 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 = 0xFFF0EAE2) +@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE) @Composable fun NavigationRailPreview() { MySootheTheme { SootheNavigationRail() } From cdcef789fb00f8451217ff652073479c6bd8d6a7 Mon Sep 17 00:00:00 2001 From: MagicalMeghan Date: Mon, 14 Aug 2023 00:36:49 -0400 Subject: [PATCH 4/4] updating colors for dark mode --- .../src/main/java/com/codelab/basiclayouts/ui/theme/Color.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index d36e9281c..6046f6790 100644 --- 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 @@ -60,9 +60,9 @@ 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(0xFF1D1B1A) +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(0xFFCBC5C2) +val md_theme_dark_onSurfaceVariant = Color(0xFFE6E1E0) val md_theme_dark_outline = Color(0xFF94908D)