Merge pull request #475 from tiwiz/material-1.1.0-alpha01

Update project to Material Adaptive Library 3 v 1.1.0-alpha02

CanonicalLayouts/list-detail-compose/app/build.gradle

@@ -20,12 +20,12 @@ plugins {
 
 android {
     namespace 'com.example.listdetailcompose'
-    compileSdk 34
+    compileSdk 35
 
     defaultConfig {
         applicationId "com.example.listdetailcompose"
         minSdk 21
-        targetSdk 34
+        targetSdk 35
         versionCode 1
         versionName "1.0"
 
@@ -62,21 +62,22 @@ android {
 }
 
 dependencies {
-    def composeBom = platform('androidx.compose:compose-bom:2024.03.00')
+    def composeBom = platform('androidx.compose:compose-bom:2024.09.00')
     implementation(composeBom)
 
     implementation "com.google.accompanist:accompanist-adaptive:0.32.0"
-    implementation 'androidx.core:core-ktx:1.12.0'
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0'
-    implementation 'androidx.activity:activity-compose:1.8.2'
-    implementation "androidx.compose.foundation:foundation:1.6.4"
-    implementation "androidx.compose.ui:ui:1.6.4"
+    implementation 'androidx.core:core-ktx:1.13.1'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.8.5'
+    implementation 'androidx.activity:activity-compose:1.9.2'
+    implementation "androidx.compose.foundation:foundation:1.7.0"
+    implementation "androidx.compose.ui:ui:1.7.0"
     implementation "androidx.compose.ui:ui-tooling-preview"
-    implementation "androidx.window:window:1.2.0"
-    implementation 'androidx.compose.material3:material3:1.3.0-alpha03'
-    implementation 'androidx.compose.material3.adaptive:adaptive:1.0.0-alpha09'
-    implementation 'androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha09'
-    implementation 'androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha09'
-    implementation "androidx.compose.material3:material3-window-size-class:1.3.0-alpha03"
+    implementation "androidx.window:window:1.3.0"
+    implementation 'androidx.compose.material3:material3:1.3.0'
+    implementation 'androidx.compose.material3.adaptive:adaptive:1.1.0-alpha02'
+    implementation 'androidx.compose.material3.adaptive:adaptive-layout:1.1.0-alpha02'
+    implementation 'androidx.compose.material3.adaptive:adaptive-navigation:1.1.0-alpha02'
+    implementation "androidx.compose.material3:material3-window-size-class:1.3.0"
+    implementation "androidx.compose.animation:animation:1.7.0"
     testImplementation 'junit:junit:4.13.2'
 }

CanonicalLayouts/list-detail-compose/app/src/main/java/com/example/listdetailcompose/ui/ListDetailSample.kt

@@ -14,14 +14,25 @@
  * limitations under the License.
  */
 
+@file:OptIn(ExperimentalSharedTransitionApi::class, ExperimentalSharedTransitionApi::class)
+
 package com.example.listdetailcompose.ui
 
+import android.annotation.SuppressLint
 import androidx.activity.compose.BackHandler
+import androidx.annotation.DrawableRes
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.AnimatedVisibilityScope
+import androidx.compose.animation.ExperimentalSharedTransitionApi
+import androidx.compose.animation.SharedTransitionLayout
+import androidx.compose.animation.SharedTransitionScope
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 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.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
@@ -35,18 +46,25 @@ import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
+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.PaneExpansionDragHandle
+import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
 import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import androidx.window.core.layout.WindowWidthSizeClass
 import com.example.listdetailcompose.R
 
 // Create some simple sample data
@@ -56,59 +74,84 @@ private val loremIpsum = """
         |Tempus quam pellentesque nec nam aliquam. Praesent semper feugiat nibh sed. Adipiscing elit duis tristique sollicitudin nibh sit. Netus et malesuada fames ac turpis egestas sed tempus urna. Quis varius quam quisque id diam vel quam. Urna duis convallis convallis tellus id interdum velit laoreet. Id eu nisl nunc mi ipsum. Fermentum dui faucibus in ornare. Nunc lobortis mattis aliquam faucibus. Vulputate mi sit amet mauris commodo quis. Porta nibh venenatis cras sed. Vitae tortor condimentum lacinia quis vel eros donec. Eu non diam phasellus vestibulum.
         """.trimMargin()
 private val sampleWords = listOf(
-    "Apple" to loremIpsum,
-    "Banana" to loremIpsum,
-    "Cherry" to loremIpsum,
-    "Date" to loremIpsum,
-    "Elderberry" to loremIpsum,
-    "Fig" to loremIpsum,
-    "Grape" to loremIpsum,
-    "Honeydew" to loremIpsum,
-).map { (word, definition) -> DefinedWord(word, definition) }
+    "Apple" to R.drawable.ic_food,
+    "Banana" to R.drawable.ic_no_food,
+    "Cherry" to R.drawable.ic_food,
+    "Date" to R.drawable.ic_no_food,
+    "Elderberry" to R.drawable.ic_food,
+    "Fig" to R.drawable.ic_no_food,
+    "Grape" to R.drawable.ic_food,
+    "Honeydew" to R.drawable.ic_no_food,
+).map { (word, icon) -> DefinedWord(word, icon) }
 
 private data class DefinedWord(
     val word: String,
-    val definition: String
+    @DrawableRes val icon: Int,
+    val definition: String = loremIpsum
 )
 
+@SuppressLint("UnusedContentLambdaTargetStateParameter")
 @OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @Composable
 fun ListDetailSample() {
     var selectedWordIndex: Int? by rememberSaveable { mutableStateOf(null) }
     val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>()
+    val isListAndDetailVisible =
+        navigator.scaffoldValue[ListDetailPaneScaffoldRole.Detail] == PaneAdaptedValue.Expanded && navigator.scaffoldValue[ListDetailPaneScaffoldRole.List] == PaneAdaptedValue.Expanded
 
     BackHandler(enabled = navigator.canNavigateBack()) {
         navigator.navigateBack()
     }
 
-    ListDetailPaneScaffold(
-        directive = navigator.scaffoldDirective,
-        value = navigator.scaffoldValue,
-        listPane = {
-            val currentSelectedWordIndex = selectedWordIndex
-            val isDetailVisible =
-                navigator.scaffoldValue[ListDetailPaneScaffoldRole.Detail] == PaneAdaptedValue.Expanded
-
-            ListContent(
-                words = sampleWords.map(DefinedWord::word),
-                selectionState = if (isDetailVisible && currentSelectedWordIndex != null) {
-                    SelectionVisibilityState.ShowSelection(currentSelectedWordIndex)
-                } else {
-                    SelectionVisibilityState.NoSelection
+    SharedTransitionLayout {
+        AnimatedContent(targetState = isListAndDetailVisible, label = "simple sample") {
+            ListDetailPaneScaffold(
+                directive = navigator.scaffoldDirective,
+                value = navigator.scaffoldValue,
+                listPane = {
+                    val currentSelectedWordIndex = selectedWordIndex
+                    val isDetailVisible =
+                        navigator.scaffoldValue[ListDetailPaneScaffoldRole.Detail] == PaneAdaptedValue.Expanded
+                    AnimatedPane {
+                        ListContent(
+                            words = sampleWords,
+                            selectionState = if (isDetailVisible && currentSelectedWordIndex != null) {
+                                SelectionVisibilityState.ShowSelection(currentSelectedWordIndex)
+                            } else {
+                                SelectionVisibilityState.NoSelection
+                            },
+                            onIndexClick = { index ->
+                                selectedWordIndex = index
+                                navigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
+                            },
+                            isListAndDetailVisible = isListAndDetailVisible,
+                            isListVisible = !isDetailVisible,
+                            animatedVisibilityScope = this@AnimatedPane,
+                            sharedTransitionScope = this@SharedTransitionLayout
+                        )
+                    }
+                },
+                detailPane = {
+                    val definedWord = selectedWordIndex?.let(sampleWords::get)
+                    val isDetailVisible =
+                        navigator.scaffoldValue[ListDetailPaneScaffoldRole.Detail] == PaneAdaptedValue.Expanded
+                    AnimatedPane {
+                        DetailContent(
+                            definedWord = definedWord,
+                            isListAndDetailVisible = isListAndDetailVisible,
+                            isDetailVisible = isDetailVisible,
+                            animatedVisibilityScope = this@AnimatedPane,
+                            sharedTransitionScope = this@SharedTransitionLayout
+                        )
+                    }
                 },
-                onIndexClick = { index ->
-                    selectedWordIndex = index
-                    navigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
+                paneExpansionState = rememberPaneExpansionState(navigator.scaffoldValue),
+                paneExpansionDragHandle = { state ->
+                    PaneExpansionDragHandle(state, Color.Red)
                 }
             )
-        },
-        detailPane = {
-            val definedWord = selectedWordIndex?.let(sampleWords::get)
-            DetailContent(
-                definedWord = definedWord
-            )
         }
-    )
+    }
 }
 
 /**
@@ -137,10 +180,14 @@ sealed interface SelectionVisibilityState {
  */
 @Composable
 private fun ListContent(
-    words: List<String>,
+    words: List<DefinedWord>,
     selectionState: SelectionVisibilityState,
     onIndexClick: (index: Int) -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    isListAndDetailVisible: Boolean,
+    isListVisible: Boolean,
+    sharedTransitionScope: SharedTransitionScope,
+    animatedVisibilityScope: AnimatedVisibilityScope
 ) {
     LazyColumn(
         contentPadding = PaddingValues(vertical = 16.dp),
@@ -204,12 +251,33 @@ private fun ListContent(
                     .then(interactionModifier)
                     .fillMaxWidth()
             ) {
-                Text(
-                    text = word,
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(8.dp)
-                )
+                Row {
+                    val imageModifier = Modifier.padding(horizontal = 8.dp)
+                    if (!isListAndDetailVisible && isListVisible) {
+                        with(sharedTransitionScope) {
+                            val state = rememberSharedContentState(key = word.word)
+                            imageModifier.then(
+                                Modifier.sharedElement(
+                                    state,
+                                    animatedVisibilityScope = animatedVisibilityScope
+                                )
+                            )
+                        }
+                    }
+
+                    Image(
+                        painter = painterResource(id = word.icon),
+                        contentDescription = word.word,
+                        modifier = imageModifier
+                    )
+                    Text(
+                        text = word.word,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(8.dp)
+                    )
+                }
+
             }
         }
     }
@@ -222,13 +290,39 @@ private fun ListContent(
 private fun DetailContent(
     definedWord: DefinedWord?,
     modifier: Modifier = Modifier,
+    isListAndDetailVisible: Boolean,
+    isDetailVisible: Boolean,
+    sharedTransitionScope: SharedTransitionScope,
+    animatedVisibilityScope: AnimatedVisibilityScope
 ) {
     Column(
         modifier = modifier
             .verticalScroll(rememberScrollState())
             .padding(vertical = 16.dp)
     ) {
         if (definedWord != null) {
+
+            val imageModifier = Modifier
+                .padding(horizontal = 8.dp)
+                .then(
+                    if (!isListAndDetailVisible && isDetailVisible) {
+                        with(sharedTransitionScope) {
+                            val state = rememberSharedContentState(key = definedWord.word)
+                            Modifier.sharedElement(
+                                state,
+                                animatedVisibilityScope = animatedVisibilityScope
+                            )
+                         }
+                    } else {
+                        Modifier
+                    }
+                )
+
+            Image(
+                painter = painterResource(id = definedWord.icon),
+                contentDescription = definedWord.word,
+                modifier = imageModifier
+            )
             Text(
                 text = definedWord.word,
                 style = MaterialTheme.typography.headlineMedium

CanonicalLayouts/list-detail-compose/app/src/main/res/drawable/ic_food.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="48dp" android:tint="?android:colorAccent" android:viewportHeight="24" android:viewportWidth="24" android:width="48dp">
+
+    <path android:fillColor="@android:color/white" android:pathData="M18.06,22.99h1.66c0.84,0 1.53,-0.64 1.63,-1.46L23,5.05h-5L18,1h-1.97v4.05h-4.97l0.3,2.34c1.71,0.47 3.31,1.32 4.27,2.26 1.44,1.42 2.43,2.89 2.43,5.29v8.05zM1,21.99L1,21h15.03v0.99c0,0.55 -0.45,1 -1.01,1L2.01,22.99c-0.56,0 -1.01,-0.45 -1.01,-1zM16.03,14.99c0,-8 -15.03,-8 -15.03,0h15.03zM1.02,17h15v2h-15z"/>
+
+</vector>

CanonicalLayouts/list-detail-compose/app/src/main/res/drawable/ic_no_food.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="48dp" android:tint="?android:colorAccent" android:viewportHeight="24" android:viewportWidth="24" android:width="48dp">
+
+    <path android:fillColor="@android:color/white" android:pathData="M11.35,8.52L11,5h5V1h2v4h5l-1.38,13.79L11.35,8.52zM1,21v1c0,0.55 0.45,1 1,1h13c0.55,0 1,-0.45 1,-1v-1H1zM21.9,21.9L2.1,2.1L0.69,3.51l5.7,5.7C3.28,9.87 1,11.99 1,15h11.17l2,2H1v2h15v-0.17l4.49,4.49L21.9,21.9z"/>
+
+</vector>

CanonicalLayouts/list-detail-compose/build.gradle

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 plugins {
-    id 'com.android.application' version '8.3.2' apply false
-    id 'com.android.library' version '8.3.2' apply false
+    id 'com.android.application' version '8.6.0' apply false
+    id 'com.android.library' version '8.6.0' apply false
     id 'org.jetbrains.kotlin.android' version '1.9.22' apply false
 }

CanonicalLayouts/list-detail-compose/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 #Wed May 25 14:11:15 UTC 2022
 distributionBase=GRADLE_USER_HOME
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-bin.zip
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME

CanonicalLayouts/supporting-pane-compose/app/build.gradle

@@ -21,12 +21,12 @@ plugins {
 
 android {
     namespace 'com.example.supportingpanecompose'
-    compileSdk 34
+    compileSdk 35
 
     defaultConfig {
         applicationId "com.example.supportingpanecompose"
         minSdk 21
-        targetSdk 34
+        targetSdk 35
         versionCode 1
         versionName "1.0"
 
@@ -63,19 +63,19 @@ android {
 }
 
 dependencies {
-    def composeBom = platform('androidx.compose:compose-bom:2024.03.00')
+    def composeBom = platform('androidx.compose:compose-bom:2024.09.00')
     implementation(composeBom)
 
-    implementation 'androidx.core:core-ktx:1.12.0'
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0'
-    implementation 'androidx.activity:activity-compose:1.8.2'
+    implementation 'androidx.core:core-ktx:1.13.1'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.8.5'
+    implementation 'androidx.activity:activity-compose:1.9.2'
     implementation "androidx.compose.ui:ui"
     implementation "androidx.compose.ui:ui-tooling-preview"
-    implementation "androidx.window:window:1.2.0"
-    implementation 'androidx.compose.material3:material3:1.3.0-alpha03'
-    implementation 'androidx.compose.material3.adaptive:adaptive:1.0.0-alpha09'
-    implementation 'androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha09'
-    implementation 'androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha09'
-    implementation "androidx.compose.material3:material3-window-size-class:1.3.0-alpha03"
+    implementation "androidx.window:window:1.3.0"
+    implementation 'androidx.compose.material3:material3:1.3.0'
+    implementation 'androidx.compose.material3.adaptive:adaptive:1.1.0-alpha02'
+    implementation 'androidx.compose.material3.adaptive:adaptive-layout:1.1.0-alpha02'
+    implementation 'androidx.compose.material3.adaptive:adaptive-navigation:1.1.0-alpha02'
+    implementation "androidx.compose.material3:material3-window-size-class:1.3.0"
     testImplementation 'junit:junit:4.13.2'
 }