Support landscape orientation

michaelbel · Nov 19, 2023 · d545047 · d545047
1 parent 6e39dd0
commit d545047
Show file tree

Hide file tree

Showing 21 changed files with 637 additions and 344 deletions.
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -39,7 +39,7 @@
         <activity
             android:name="org.michaelbel.movies.MainActivity"
             android:exported="true"
-            android:screenOrientation="portrait">
+            android:screenOrientation="fullUser">
 
             <intent-filter>
                 <category android:name="android.intent.category.LAUNCHER" />

diff --git a/core/ui/src/main/kotlin/org/michaelbel/movies/ui/preview/DeviceLandscapePreviews.kt b/core/ui/src/main/kotlin/org/michaelbel/movies/ui/preview/DeviceLandscapePreviews.kt
@@ -0,0 +1,18 @@
+package org.michaelbel.movies.ui.preview
+
+import android.content.res.Configuration
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(
+    name = "Day Landscape",
+    uiMode = Configuration.UI_MODE_NIGHT_NO,
+    widthDp = 800,
+    heightDp = 360
+)
+@Preview(
+    name = "Night Landscape",
+    uiMode = Configuration.UI_MODE_NIGHT_YES,
+    widthDp = 800,
+    heightDp = 360
+)
+annotation class DeviceLandscapePreviews
diff --git a/core/ui/src/main/kotlin/org/michaelbel/movies/ui/preview/DevicePreviews.kt b/core/ui/src/main/kotlin/org/michaelbel/movies/ui/preview/DevicePreviews.kt
@@ -4,11 +4,11 @@ import android.content.res.Configuration
 import androidx.compose.ui.tooling.preview.Preview
 
 @Preview(
-    uiMode = Configuration.UI_MODE_NIGHT_NO,
-    name = "Day theme"
+    name = "Day theme",
+    uiMode = Configuration.UI_MODE_NIGHT_NO
 )
 @Preview(
-    uiMode = Configuration.UI_MODE_NIGHT_YES,
-    name = "Night theme"
+    name = "Night theme",
+    uiMode = Configuration.UI_MODE_NIGHT_YES
 )
 annotation class DevicePreviews
diff --git a/core/ui/src/main/kotlin/org/michaelbel/movies/ui/preview/DeviceUserPreviews.kt b/core/ui/src/main/kotlin/org/michaelbel/movies/ui/preview/DeviceUserPreviews.kt
@@ -0,0 +1,26 @@
+package org.michaelbel.movies.ui.preview
+
+import android.content.res.Configuration
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(
+    name = "Day",
+    uiMode = Configuration.UI_MODE_NIGHT_NO
+)
+@Preview(
+    name = "Night",
+    uiMode = Configuration.UI_MODE_NIGHT_YES
+)
+@Preview(
+    name = "Day Landscape",
+    uiMode = Configuration.UI_MODE_NIGHT_NO,
+    widthDp = 800,
+    heightDp = 360
+)
+@Preview(
+    name = "Night Landscape",
+    uiMode = Configuration.UI_MODE_NIGHT_YES,
+    widthDp = 800,
+    heightDp = 360
+)
+annotation class DeviceUserPreviews
diff --git a/feature/auth-impl/src/main/kotlin/org/michaelbel/movies/auth/ui/AuthScreenContent.kt b/feature/auth-impl/src/main/kotlin/org/michaelbel/movies/auth/ui/AuthScreenContent.kt
@@ -5,13 +5,16 @@ import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
@@ -23,7 +26,6 @@ import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
@@ -85,9 +87,10 @@ internal fun AuthScreenContent(
     val toolbarColor: Int = MaterialTheme.colorScheme.primary.toArgb()
 
     val focusManager: FocusManager = LocalFocusManager.current
+    val scrollState: ScrollState = rememberScrollState()
 
-    var username: String by remember { mutableStateOf("") }
-    var password: String by remember { mutableStateOf("") }
+    var username: String by rememberSaveable { mutableStateOf("") }
+    var password: String by rememberSaveable { mutableStateOf("") }
     var passwordVisible: Boolean by rememberSaveable { mutableStateOf(false) }
 
     ConstraintLayout(
@@ -98,6 +101,7 @@ internal fun AuthScreenContent(
                 color = MaterialTheme.colorScheme.primaryContainer,
                 shape = MaterialTheme.shapes.small
             )
+            .verticalScroll(scrollState)
     ) {
         val (
             toolbar,

diff --git a/...ure/details-impl/src/main/kotlin/org/michaelbel/movies/details/ui/DetailsScreenContent.kt b/...ure/details-impl/src/main/kotlin/org/michaelbel/movies/details/ui/DetailsScreenContent.kt
@@ -1,13 +1,16 @@
 package org.michaelbel.movies.details.ui
 
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import java.net.UnknownHostException
@@ -50,18 +53,22 @@ private fun DetailsScreenContent(
     onRetry: () -> Unit,
     modifier: Modifier = Modifier
 ) {
+    val topAppBarScrollBehavior: TopAppBarScrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
+
     if (networkStatus.isAvailable && detailsState.isFailure && detailsState.throwable is UnknownHostException) {
         onRetry()
     }
 
     Scaffold(
-        modifier = modifier,
+        modifier = modifier
+            .nestedScroll(topAppBarScrollBehavior.nestedScrollConnection),
         topBar = {
             DetailsToolbar(
                 movieTitle = detailsState.toolbarTitle,
                 movieUrl = detailsState.movieUrl,
                 onNavigationIconClick = onBackClick,
-                modifier = Modifier.statusBarsPadding()
+                topAppBarScrollBehavior = topAppBarScrollBehavior,
+                modifier = Modifier.fillMaxWidth()
             )
         },
         containerColor = MaterialTheme.colorScheme.primaryContainer

diff --git a/feature/details-impl/src/main/kotlin/org/michaelbel/movies/details/ui/DetailsToolbar.kt b/feature/details-impl/src/main/kotlin/org/michaelbel/movies/details/ui/DetailsToolbar.kt
@@ -9,9 +9,9 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
@@ -25,6 +25,7 @@ fun DetailsToolbar(
     movieTitle: String,
     movieUrl: String?,
     onNavigationIconClick: () -> Unit,
+    topAppBarScrollBehavior: TopAppBarScrollBehavior,
     modifier: Modifier = Modifier
 ) {
     TopAppBar(
@@ -65,8 +66,10 @@ fun DetailsToolbar(
             }
         },
         colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = Color.Transparent
-        )
+            containerColor = MaterialTheme.colorScheme.primaryContainer,
+            scrolledContainerColor = MaterialTheme.colorScheme.inversePrimary
+        ),
+        scrollBehavior = topAppBarScrollBehavior
     )
 }
 
@@ -80,6 +83,7 @@ private fun DetailsToolbarPreview(
             movieTitle = title,
             movieUrl = null,
             onNavigationIconClick = {},
+            topAppBarScrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(),
             modifier = Modifier.statusBarsPadding()
         )
     }

diff --git a/feature/feed-impl/src/main/kotlin/org/michaelbel/movies/feed/ktx/ConfigurationKtx.kt b/feature/feed-impl/src/main/kotlin/org/michaelbel/movies/feed/ktx/ConfigurationKtx.kt
@@ -0,0 +1,17 @@
+package org.michaelbel.movies.feed.ktx
+
+import android.content.res.Configuration
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalConfiguration
+
+private const val FEED_GRID_PORTRAIT_COLUMNS_COUNT = 2
+private const val FEED_GRID_LANDSCAPE_COLUMNS_COUNT = 4
+
+val isPortrait: Boolean
+    @Composable get() {
+        val configuration = LocalConfiguration.current
+        return configuration.orientation == Configuration.ORIENTATION_PORTRAIT
+    }
+
+val gridColumnsCount: Int
+    @Composable get() = if (isPortrait) FEED_GRID_PORTRAIT_COLUMNS_COUNT else FEED_GRID_LANDSCAPE_COLUMNS_COUNT
diff --git a/feature/feed-impl/src/main/kotlin/org/michaelbel/movies/feed/ui/FeedCellLoading.kt b/feature/feed-impl/src/main/kotlin/org/michaelbel/movies/feed/ui/FeedCellLoading.kt
diff --git a/feature/feed-impl/src/main/kotlin/org/michaelbel/movies/feed/ui/FeedCellMovieBox.kt b/feature/feed-impl/src/main/kotlin/org/michaelbel/movies/feed/ui/FeedCellMovieBox.kt
@@ -23,8 +23,8 @@ import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.constraintlayout.compose.Dimension
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
-import org.michaelbel.movies.network.formatBackdropImage
 import org.michaelbel.movies.feed_impl.R
+import org.michaelbel.movies.network.formatBackdropImage
 import org.michaelbel.movies.persistence.database.entity.MovieDb
 import org.michaelbel.movies.ui.ktx.context
 import org.michaelbel.movies.ui.ktx.isErrorOrEmpty
@@ -35,7 +35,8 @@ import org.michaelbel.movies.ui.theme.MoviesTheme
 @Composable
 fun FeedCellMovieBox(
     movie: MovieDb,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    maxLines: Int = 10
 ) {
     var isNoImageVisible: Boolean by remember { mutableStateOf(false) }
 
@@ -96,7 +97,7 @@ fun FeedCellMovieBox(
                     end.linkTo(parent.end, 16.dp)
                     bottom.linkTo(parent.bottom, 16.dp)
                 },
-            maxLines = 10,
+            maxLines = maxLines,
             overflow = TextOverflow.Ellipsis,
             style = MaterialTheme.typography.bodyLarge.copy(
                 color = MaterialTheme.colorScheme.onPrimaryContainer