[AdaptiveUiCodelab] Use ListDetailPaneScaffold

Author: jdkoren

AdaptiveUiCodelab/app/build.gradle.kts

@@ -73,7 +73,9 @@ dependencies {
 
     implementation(libs.androidx.material3)
     implementation(libs.androidx.material3.adaptive)
+    implementation(libs.androidx.material3.adaptive.layout)
     implementation(libs.androidx.material3.adaptive.nav.suite)
+    implementation(libs.androidx.material3.adaptive.navigation)
     implementation(libs.androidx.material.icons.extended)
     implementation(libs.androidx.ui.tooling.preview)
     androidTestImplementation(libs.androidx.ui.test.junit4)

AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyApp.kt

@@ -16,62 +16,37 @@
 
 package com.example.reply.ui
 
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
+import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
+import androidx.compose.material3.adaptive.layout.AnimatedPane
+import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
+import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
 import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.window.core.layout.WindowWidthSizeClass
+import com.example.reply.data.Email
 import com.example.reply.ui.utils.DevicePosture
-import com.example.reply.ui.utils.ReplyContentType
 
 @Composable
 fun ReplyApp(
     windowSize: WindowWidthSizeClass,
     foldingDevicePosture: DevicePosture,
     replyHomeUIState: ReplyHomeUIState
 ) {
-    /**
-     * This will help us select type of navigation and content type depending on window size and
-     * fold state of the device.
-     *
-     * In the state of folding device If it's half fold in BookPosture we want to avoid content
-     * at the crease/hinge
-     */
-    val contentType: ReplyContentType
-
-    when (windowSize) {
-        WindowWidthSizeClass.COMPACT -> {
-            contentType = ReplyContentType.LIST_ONLY
-        }
-        WindowWidthSizeClass.MEDIUM -> {
-            contentType = if (foldingDevicePosture != DevicePosture.NormalPosture) {
-                ReplyContentType.LIST_AND_DETAIL
-            } else {
-                ReplyContentType.LIST_ONLY
-            }
-        }
-        WindowWidthSizeClass.EXPANDED -> {
-            contentType = ReplyContentType.LIST_AND_DETAIL
-        }
-        else -> {
-            contentType = ReplyContentType.LIST_ONLY
-        }
+    ReplyNavigationWrapperUI {
+        ReplyAppContent(replyHomeUIState)
     }
-
-    ReplyNavigationWrapperUI(contentType, replyHomeUIState)
 }
 
 @Composable
 private fun ReplyNavigationWrapperUI(
-    contentType: ReplyContentType,
-    replyHomeUIState: ReplyHomeUIState
+    content: @Composable () -> Unit = {}
 ) {
     var selectedDestination: ReplyDestination by remember {
         mutableStateOf(ReplyDestination.Inbox)
@@ -88,25 +63,33 @@ private fun ReplyNavigationWrapperUI(
             }
         }
     ) {
-        ReplyAppContent(contentType, replyHomeUIState)
+        content()
     }
 }
 
 
+@OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @Composable
 fun ReplyAppContent(
-    contentType: ReplyContentType,
     replyHomeUIState: ReplyHomeUIState,
 ) {
-    if (contentType == ReplyContentType.LIST_AND_DETAIL) {
-        ReplyListAndDetailContent(
-            replyHomeUIState = replyHomeUIState,
-            modifier = Modifier.fillMaxSize(),
-        )
-    } else {
-        ReplyListOnlyContent(
-            replyHomeUIState = replyHomeUIState,
-            modifier = Modifier.fillMaxSize(),
-        )
-    }
+    val selectedEmail: Email? = replyHomeUIState.emails.firstOrNull()
+    val navigator = rememberListDetailPaneScaffoldNavigator()
+
+    ListDetailPaneScaffold(
+        directive = navigator.scaffoldDirective,
+        value = navigator.scaffoldValue,
+        listPane = {
+           AnimatedPane {
+               ReplyListPane(replyHomeUIState)
+           }
+        },
+        detailPane = {
+            AnimatedPane {
+                if (selectedEmail != null) {
+                    ReplyDetailPane(selectedEmail)
+                }
+            }
+        }
+    )
 }

AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt

@@ -51,7 +51,7 @@ import com.example.reply.R
 import com.example.reply.data.Email
 
 @Composable
-fun ReplyListOnlyContent(
+fun ReplyListPane(
     replyHomeUIState: ReplyHomeUIState,
     modifier: Modifier = Modifier
 ) {
@@ -66,24 +66,13 @@ fun ReplyListOnlyContent(
 }
 
 @Composable
-fun ReplyListAndDetailContent(
-    replyHomeUIState: ReplyHomeUIState,
-    modifier: Modifier = Modifier,
-    selectedItemIndex: Int = 0
+fun ReplyDetailPane(
+    email: Email,
+    modifier: Modifier = Modifier
 ) {
-    Row(modifier = modifier, horizontalArrangement = Arrangement.spacedBy(12.dp)) {
-        LazyColumn(modifier = modifier.weight(1f)) {
-            item {
-                ReplySearchBar(modifier = Modifier.fillMaxWidth())
-            }
-            items(replyHomeUIState.emails) { email ->
-                ReplyEmailListItem(email = email)
-            }
-        }
-        LazyColumn(modifier = modifier.weight(1f)) {
-            items(replyHomeUIState.emails[selectedItemIndex].threads) { email ->
-                ReplyEmailThreadItem(email = email)
-            }
+    LazyColumn(modifier = modifier) {
+        items(email.threads) {
+            ReplyEmailThreadItem(it)
         }
     }
 }
@@ -92,15 +81,16 @@ fun ReplyListAndDetailContent(
 @Composable
 fun ReplyEmailListItem(
     email: Email,
-    modifier: Modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)) {
+    modifier: Modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
+) {
     Card(modifier = modifier) {
         Column(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(20.dp)
         ) {
             Row(modifier = Modifier.fillMaxWidth()) {
-               ReplyProfileImage(
+                ReplyProfileImage(
                     drawableResource = email.sender.avatar,
                     description = email.sender.fullName,
                 )
@@ -155,15 +145,19 @@ fun ReplyEmailListItem(
 @Composable
 fun ReplyEmailThreadItem(
     email: Email,
-    modifier: Modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)) {
-    Card(modifier = modifier, colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)) {
+    modifier: Modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
+) {
+    Card(
+        modifier = modifier,
+        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)
+    ) {
         Column(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(20.dp)
         ) {
             Row(modifier = Modifier.fillMaxWidth()) {
-              ReplyProfileImage(
+                ReplyProfileImage(
                     drawableResource = email.sender.avatar,
                     description = email.sender.fullName,
                 )
@@ -203,13 +197,13 @@ fun ReplyEmailThreadItem(
                 color = MaterialTheme.colorScheme.outline,
                 modifier = Modifier.padding(top = 12.dp, bottom = 8.dp),
             )
-            
+
             Text(
                 text = email.body,
                 style = MaterialTheme.typography.bodyLarge,
                 color = MaterialTheme.colorScheme.onSurfaceVariant,
             )
-            
+
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -284,4 +278,4 @@ fun ReplySearchBar(modifier: Modifier = Modifier) {
                 .size(32.dp)
         )
     }
-}
+}

AdaptiveUiCodelab/gradle/libs.versions.toml

@@ -10,7 +10,7 @@ kotlin = "1.9.23"
 kotlinxCoroutinesAndroid = "1.8.0"
 lifecycleViewmodelCompose = "2.7.0"
 lifecycleRuntimeKtx = "2.7.0"
-material3Adaptive = "1.0.0-alpha12"
+material3Adaptive = "1.0.0-beta01"
 material3AdaptiveNavSuite = "1.3.0-beta01"
 window = "1.2.0"
 
@@ -25,7 +25,9 @@ androidx-lifecycle-viewmodel-compose = { module = "androidx.lifecycle:lifecycle-
 androidx-material-icons-extended = { module = "androidx.compose.material:material-icons-extended" }
 androidx-material3 = { module = "androidx.compose.material3:material3" }
 androidx-material3-adaptive = { module = "androidx.compose.material3.adaptive:adaptive", version.ref = "material3Adaptive" }
+androidx-material3-adaptive-layout = { module = "androidx.compose.material3.adaptive:adaptive-layout", version.ref = "material3Adaptive" }
 androidx-material3-adaptive-nav-suite = { module = "androidx.compose.material3:material3-adaptive-navigation-suite", version.ref = "material3AdaptiveNavSuite" }
+androidx-material3-adaptive-navigation = { module = "androidx.compose.material3.adaptive:adaptive-navigation", version.ref = "material3Adaptive" }
 androidx-ui-test-manifest = { module = "androidx.compose.ui:ui-test-manifest" }
 androidx-ui-tooling = { module = "androidx.compose.ui:ui-tooling" }
 androidx-ui-test-junit4 = { module = "androidx.compose.ui:ui-test-junit4" }