Update to material3-adaptive 1.1

alexvanyo · alexvanyo · commit f3cf2379a341 · 2025-03-10T15:49:40.000-07:00
Change-Id: I4b3b68face17149ab87135df28baa41cd5bacb0f
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -86,6 +86,7 @@ dependencies {
     implementation(projects.sync.work)
 
     implementation(libs.androidx.activity.compose)
+    implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.compose.material3.adaptive)
     implementation(libs.androidx.compose.material3.adaptive.layout)
     implementation(libs.androidx.compose.material3.adaptive.navigation)
diff --git a/app/src/main/kotlin/com/google/samples/apps/nowinandroid/ui/interests2pane/InterestsListDetailScreen.kt b/app/src/main/kotlin/com/google/samples/apps/nowinandroid/ui/interests2pane/InterestsListDetailScreen.kt
@@ -18,25 +18,36 @@ package com.google.samples.apps.nowinandroid.ui.interests2pane
 
 import androidx.activity.compose.BackHandler
 import androidx.annotation.Keep
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.material3.LocalMinimumInteractiveComponentSize
+import androidx.compose.material3.VerticalDragHandle
 import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
 import androidx.compose.material3.adaptive.WindowAdaptiveInfo
 import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
 import androidx.compose.material3.adaptive.layout.AnimatedPane
 import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
 import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
 import androidx.compose.material3.adaptive.layout.PaneAdaptedValue
+import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
 import androidx.compose.material3.adaptive.layout.ThreePaneScaffoldDestinationItem
 import androidx.compose.material3.adaptive.layout.calculatePaneScaffoldDirective
+import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
 import androidx.compose.material3.adaptive.navigation.ThreePaneScaffoldNavigator
 import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.key
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.Saver
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.navigation.NavGraphBuilder
@@ -49,8 +60,10 @@ import com.google.samples.apps.nowinandroid.feature.topic.TopicDetailPlaceholder
 import com.google.samples.apps.nowinandroid.feature.topic.navigation.TopicRoute
 import com.google.samples.apps.nowinandroid.feature.topic.navigation.navigateToTopic
 import com.google.samples.apps.nowinandroid.feature.topic.navigation.topicScreen
+import kotlinx.coroutines.launch
 import kotlinx.serialization.Serializable
 import java.util.UUID
+import kotlin.math.max
 
 @Serializable internal object TopicPlaceholderRoute
 
@@ -93,8 +106,20 @@ internal fun InterestsListDetailScreen(
             },
         ),
     )
+    val coroutineScope = rememberCoroutineScope()
+
+    val paneExpansionState = rememberPaneExpansionState(
+        anchors = listOf(
+            PaneExpansionAnchor.Proportion(0f),
+            PaneExpansionAnchor.Proportion(0.5f),
+            PaneExpansionAnchor.Proportion(1f),
+        ),
+    )
+
     BackHandler(listDetailNavigator.canNavigateBack()) {
-        listDetailNavigator.navigateBack()
+        coroutineScope.launch {
+            listDetailNavigator.navigateBack()
+        }
     }
 
     var nestedNavHostStartRoute by remember {
@@ -123,40 +148,99 @@ internal fun InterestsListDetailScreen(
             nestedNavHostStartRoute = TopicRoute(id = topicId)
             nestedNavKey = UUID.randomUUID()
         }
-        listDetailNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
+        coroutineScope.launch {
+            listDetailNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
+        }
     }
 
+    val mutableInteractionSource = remember { MutableInteractionSource() }
+    val minPaneWidth = 300.dp
+
     ListDetailPaneScaffold(
         value = listDetailNavigator.scaffoldValue,
         directive = listDetailNavigator.scaffoldDirective,
         listPane = {
             AnimatedPane {
-                InterestsRoute(
-                    onTopicClick = ::onTopicClickShowDetailPane,
-                    highlightSelectedTopic = listDetailNavigator.isDetailPaneVisible(),
-                )
+                Box(
+                    modifier = Modifier.clipToBounds()
+                        .layout { measurable, constraints ->
+                            val width = max(minPaneWidth.roundToPx(), constraints.maxWidth)
+                            val placeable = measurable.measure(
+                                constraints.copy(
+                                    minWidth = minPaneWidth.roundToPx(),
+                                    maxWidth = width,
+                                ),
+                            )
+                            layout(constraints.maxWidth, placeable.height) {
+                                placeable.placeRelative(
+                                    x = 0,
+                                    y = 0,
+                                )
+                            }
+                        },
+                ) {
+                    InterestsRoute(
+                        onTopicClick = ::onTopicClickShowDetailPane,
+                        highlightSelectedTopic = listDetailNavigator.isDetailPaneVisible(),
+                    )
+                }
             }
         },
         detailPane = {
             AnimatedPane {
-                key(nestedNavKey) {
-                    NavHost(
-                        navController = nestedNavController,
-                        startDestination = nestedNavHostStartRoute,
-                        route = DetailPaneNavHostRoute::class,
-                    ) {
-                        topicScreen(
-                            showBackButton = !listDetailNavigator.isListPaneVisible(),
-                            onBackClick = listDetailNavigator::navigateBack,
-                            onTopicClick = ::onTopicClickShowDetailPane,
-                        )
-                        composable<TopicPlaceholderRoute> {
-                            TopicDetailPlaceholder()
+                Box(
+                    modifier = Modifier.clipToBounds()
+                        .layout { measurable, constraints ->
+                            val width = max(minPaneWidth.roundToPx(), constraints.maxWidth)
+                            val placeable = measurable.measure(
+                                constraints.copy(
+                                    minWidth = minPaneWidth.roundToPx(),
+                                    maxWidth = width,
+                                ),
+                            )
+                            layout(constraints.maxWidth, placeable.height) {
+                                placeable.placeRelative(
+                                    x = constraints.maxWidth -
+                                        max(constraints.maxWidth, placeable.width),
+                                    y = 0,
+                                )
+                            }
+                        },
+                ) {
+                    key(nestedNavKey) {
+                        NavHost(
+                            navController = nestedNavController,
+                            startDestination = nestedNavHostStartRoute,
+                            route = DetailPaneNavHostRoute::class,
+                        ) {
+                            topicScreen(
+                                showBackButton = !listDetailNavigator.isListPaneVisible(),
+                                onBackClick = {
+                                    coroutineScope.launch {
+                                        listDetailNavigator.navigateBack()
+                                    }
+                                },
+                                onTopicClick = ::onTopicClickShowDetailPane,
+                            )
+                            composable<TopicPlaceholderRoute> {
+                                TopicDetailPlaceholder()
+                            }
                         }
                     }
                 }
             }
         },
+        paneExpansionState = paneExpansionState,
+        paneExpansionDragHandle = {
+            VerticalDragHandle(
+                modifier = Modifier.paneExpansionDraggable(
+                    state = paneExpansionState,
+                    minTouchTargetSize = LocalMinimumInteractiveComponentSize.current,
+                    interactionSource = mutableInteractionSource,
+                ),
+                interactionSource = mutableInteractionSource,
+            )
+        },
     )
 }
 
diff --git a/feature/interests/src/main/kotlin/com/google/samples/apps/nowinandroid/feature/interests/InterestsScreen.kt b/feature/interests/src/main/kotlin/com/google/samples/apps/nowinandroid/feature/interests/InterestsScreen.kt
@@ -70,7 +70,6 @@ internal fun InterestsScreen(
         when (uiState) {
             InterestsUiState.Loading ->
                 NiaLoadingWheel(
-                    modifier = modifier,
                     contentDesc = stringResource(id = R.string.feature_interests_loading),
                 )
 
@@ -81,7 +80,6 @@ internal fun InterestsScreen(
                     onFollowButtonClick = followTopic,
                     selectedTopicId = uiState.selectedTopicId,
                     highlightSelectedTopic = highlightSelectedTopic,
-                    modifier = modifier,
                 )
 
             is InterestsUiState.Empty -> InterestsEmptyScreen()
diff --git a/feature/interests/src/main/kotlin/com/google/samples/apps/nowinandroid/feature/interests/TabContent.kt b/feature/interests/src/main/kotlin/com/google/samples/apps/nowinandroid/feature/interests/TabContent.kt
@@ -75,6 +75,7 @@ fun TopicsTabContent(
                         onClick = { onTopicClick(topicId) },
                         onFollowButtonClick = { onFollowButtonClick(topicId, it) },
                         isSelected = isSelected,
+                        modifier = Modifier.fillMaxWidth(),
                     )
                 }
             }
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -9,6 +9,7 @@ androidxAppCompat = "1.7.0"
 androidxBrowser = "1.8.0"
 androidxComposeBom = "2024.12.01"
 androidxComposeFoundation = "1.8.0-alpha07"
+androidxComposeMaterial3Adaptive = "1.1.0-alpha08"
 androidxComposeRuntimeTracing = "1.7.6"
 androidxCore = "1.15.0"
 androidxCoreSplashscreen = "1.0.1"
@@ -69,15 +70,15 @@ androidx-activity-compose = { group = "androidx.activity", name = "activity-comp
 androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "androidxAppCompat" }
 androidx-benchmark-macro = { group = "androidx.benchmark", name = "benchmark-macro-junit4", version.ref = "androidxMacroBenchmark" }
 androidx-browser = { group = "androidx.browser", name = "browser", version.ref = "androidxBrowser" }
-androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "androidxComposeBom" }
+androidx-compose-bom = { group = "androidx.compose", name = "compose-bom-alpha", version.ref = "androidxComposeBom" }
 androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "androidxComposeFoundation" }
 androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout" }
 androidx-compose-material-iconsExtended = { group = "androidx.compose.material", name = "material-icons-extended" }
 androidx-compose-material3 = { group = "androidx.compose.material3", name = "material3" }
 androidx-compose-material3-navigationSuite = { group = "androidx.compose.material3", name = "material3-adaptive-navigation-suite" }
-androidx-compose-material3-adaptive = { group = "androidx.compose.material3.adaptive", name = "adaptive" }
-androidx-compose-material3-adaptive-layout = { group = "androidx.compose.material3.adaptive", name = "adaptive-layout" }
-androidx-compose-material3-adaptive-navigation = { group = "androidx.compose.material3.adaptive", name = "adaptive-navigation" }
+androidx-compose-material3-adaptive = { group = "androidx.compose.material3.adaptive", name = "adaptive", version.ref = "androidxComposeMaterial3Adaptive" }
+androidx-compose-material3-adaptive-layout = { group = "androidx.compose.material3.adaptive", name = "adaptive-layout", version.ref = "androidxComposeMaterial3Adaptive" }
+androidx-compose-material3-adaptive-navigation = { group = "androidx.compose.material3.adaptive", name = "adaptive-navigation", version.ref = "androidxComposeMaterial3Adaptive" }
 androidx-compose-material3-windowSizeClass = { group = "androidx.compose.material3", name = "material3-window-size-class" }
 androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime" }
 androidx-compose-runtime-tracing = { group = "androidx.compose.runtime", name = "runtime-tracing", version.ref = "androidxComposeRuntimeTracing" }

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,6 @@ internal fun InterestsScreen(`
`70`	`70`	`when (uiState) {`
`71`	`71`	`InterestsUiState.Loading ->`
`72`	`72`	`NiaLoadingWheel(`
`73`		`- modifier = modifier,`
`74`	`73`	`contentDesc = stringResource(id = R.string.feature_interests_loading),`
`75`	`74`	`)`
`76`	`75`
`@@ -81,7 +80,6 @@ internal fun InterestsScreen(`
`81`	`80`	`onFollowButtonClick = followTopic,`
`82`	`81`	`selectedTopicId = uiState.selectedTopicId,`
`83`	`82`	`highlightSelectedTopic = highlightSelectedTopic,`
`84`		`- modifier = modifier,`
`85`	`83`	`)`
`86`	`84`
`87`	`85`	`is InterestsUiState.Empty -> InterestsEmptyScreen()`
Original file line number	Diff line number	Diff line change
`@@ -75,6 +75,7 @@ fun TopicsTabContent(`
`75`	`75`	`onClick = { onTopicClick(topicId) },`
`76`	`76`	`onFollowButtonClick = { onFollowButtonClick(topicId, it) },`
`77`	`77`	`isSelected = isSelected,`
	`78`	`+ modifier = Modifier.fillMaxWidth(),`
`78`	`79`	`)`
`79`	`80`	`}`
`80`	`81`	`}`