Adding landscape mode

android · Aug 4, 2023 · 3ce499d · 3ce499d
1 parent 86104ff
commit 3ce499d
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 5 deletions.
diff --git a/BasicLayoutsCodelab/app/build.gradle b/BasicLayoutsCodelab/app/build.gradle
@@ -70,6 +70,7 @@ dependencies {
     implementation 'androidx.core:core-ktx:1.10.1'
     implementation "androidx.compose.ui:ui"
     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
@@ -22,11 +22,13 @@ import androidx.activity.compose.setContent
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
@@ -54,7 +56,13 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.AccountCircle
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.icons.filled.Spa
+import androidx.compose.material3.NavigationRail
+import androidx.compose.material3.NavigationRailItem
 import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
+import androidx.compose.material3.windowsizeclass.WindowSizeClass
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
+import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -67,9 +75,13 @@ import androidx.compose.ui.unit.dp
 import com.codelab.basiclayouts.ui.theme.MySootheTheme
 
 class MainActivity : ComponentActivity() {
+    @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        setContent { MySootheApp() }
+        setContent {
+            val windowSizeClass = calculateWindowSizeClass(this)
+            MySootheApp(windowSizeClass)
+        }
     }
 }
 
@@ -216,7 +228,7 @@ fun HomeSection(
 fun HomeScreen(modifier: Modifier = Modifier) {
     Column(
         modifier
-            .verticalScroll(rememberScrollState())
+            .verticalScroll(rememberScrollState()).background(MaterialTheme.colorScheme.surface)
     ) {
         Spacer(Modifier.height(16.dp))
         SearchBar(Modifier.padding(horizontal = 16.dp))
@@ -226,6 +238,7 @@ fun HomeScreen(modifier: Modifier = Modifier) {
         HomeSection(title = R.string.favorite_collections) {
             FavoriteCollectionsGrid()
         }
+        Spacer(Modifier.height(16.dp))
     }
 }
 
@@ -265,9 +278,67 @@ private fun SootheBottomNavigation(modifier: Modifier = Modifier) {
     }
 }
 
+// Step: Navigation Rail - Material
+@Composable
+private fun SootheNavigationRail(modifier: Modifier = Modifier) {
+    NavigationRail(
+        containerColor = MaterialTheme.colorScheme.secondaryContainer,
+    ) {
+        Column(
+            modifier = modifier.fillMaxHeight(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            NavigationRailItem(
+                icon = {
+                    Icon(
+                        imageVector = Icons.Default.Spa,
+                        contentDescription = null
+                    )
+                },
+                label = {
+                    Text(stringResource(R.string.bottom_navigation_home))
+                },
+                selected = true,
+                onClick = {},
+                modifier = Modifier.padding(bottom = 8.dp)
+            )
+            NavigationRailItem(
+                icon = {
+                    Icon(
+                        imageVector = Icons.Default.AccountCircle,
+                        contentDescription = null
+                    )
+                },
+                label = {
+                    Text(stringResource(R.string.bottom_navigation_profile))
+                },
+                selected = false,
+                onClick = {},
+                modifier = Modifier.padding(top = 8.dp)
+            )
+        }
+    }
+}
+
 // Step: MySoothe App - Scaffold
 @Composable
-fun MySootheApp() {
+fun MySootheApp(windowSize: WindowSizeClass) {
+    when (windowSize.widthSizeClass) {
+        WindowWidthSizeClass.Compact -> {
+            MySootheAppPortrait()
+        }
+        WindowWidthSizeClass.Medium -> {
+            MySootheAppLandscape()
+        }
+        WindowWidthSizeClass.Expanded -> {
+            MySootheAppLandscape()
+        }
+    }
+}
+
+@Composable
+fun MySootheAppPortrait() {
     MySootheTheme {
         Scaffold(
             bottomBar = { SootheBottomNavigation() }
@@ -277,6 +348,18 @@ fun MySootheApp() {
     }
 }
 
+@Composable
+fun MySootheAppLandscape() {
+    MySootheTheme {
+        Surface {
+            Row {
+                SootheNavigationRail()
+                HomeScreen()
+            }
+        }
+    }
+}
+
 private val alignYourBodyData = listOf(
     R.drawable.ab1_inversions to R.string.ab1_inversions,
     R.drawable.ab2_quick_yoga to R.string.ab2_quick_yoga,
@@ -364,8 +447,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()
 }