Add shared transition search demo

app/build.gradle.kts

@@ -81,6 +81,7 @@ dependencies {
     implementation(libs.androidx.lifecycle.runtime.ktx)
     implementation(libs.androidx.activity.compose)
     implementation(platform(libs.androidx.compose.bom))
+    implementation(libs.androidx.compose.animation)
     implementation(libs.androidx.ui)
     implementation(libs.androidx.ui.graphics)
     implementation(libs.androidx.ui.tooling.preview)

app/src/main/java/com/redstar/redefinencm/activity/mainActivity/MainActivity.kt

@@ -9,6 +9,8 @@ import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.activity.result.ActivityResultLauncher
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.animation.ExperimentalSharedTransitionApi
+import androidx.compose.animation.SharedTransitionLayout
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
@@ -50,7 +52,7 @@ import com.redstar.redefinencm.viewmodel.MainViewModel
 class MainActivity : ComponentActivity() {
     val viewModel: MainViewModel = MainViewModel()
 
-    @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
+    @OptIn(ExperimentalMaterial3WindowSizeClassApi::class, ExperimentalSharedTransitionApi::class)
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
@@ -105,45 +107,52 @@ class MainActivity : ComponentActivity() {
                             if (widthClass != WindowWidthSizeClass.Compact) {
                                 ResponsiveNavigation(navController, items, currentRoute, widthClass)
                             }
-                            NavHost(
-                                navController = navController,
-                                startDestination = "recommend",
-                                // Apply padding from the scaffold but not for system bars
-                                modifier = Modifier.padding(innerPadding),
-                            ) {
-                                composable("recommend") {
-                                    RecommendPage(navController, viewModel)
-                                }
+                            SharedTransitionLayout {
+                                val sharedTransitionScope = this
+                                NavHost(
+                                    navController = navController,
+                                    startDestination = "recommend",
+                                    // Apply padding from the scaffold but not for system bars
+                                    modifier = Modifier.padding(innerPadding),
+                                ) {
+                                    composable("recommend") {
+                                        RecommendPage(
+                                            navController,
+                                            viewModel,
+                                            sharedTransitionScope,
+                                        )
+                                    }
 
-                                composable("recommend/playlistDetailPage/{songId}") { backStackEntry ->
-                                    val songId = backStackEntry.arguments?.getString("songId")
-                                    if (BuildConfig.DEBUG) {
-                                        Log.d("Main", "SongList ID: $songId")
+                                    composable("recommend/playlistDetailPage/{songId}") { backStackEntry ->
+                                        val songId = backStackEntry.arguments?.getString("songId")
+                                        if (BuildConfig.DEBUG) {
+                                            Log.d("Main", "SongList ID: $songId")
+                                        }
+                                        ShowPlaylistDetailPage(
+                                            viewModel = viewModel,
+                                            songlistID = songId!!.toLong(),
+                                        )
                                     }
-                                    ShowPlaylistDetailPage(
-                                        viewModel = viewModel,
-                                        songlistID = songId!!.toLong(),
-                                    )
-                                }
 
-                                composable("my") {
-                                    ShowUserPlaylistPage(
-                                        navController = navController,
-                                        viewModel = viewModel,
-                                    )
-                                }
-                                composable("my/playlistDetailPage/{songId}") { backStackEntry ->
-                                    val songId = backStackEntry.arguments?.getString("songId")
-                                    if (BuildConfig.DEBUG) {
-                                        Log.d("Main", "SongList ID: $songId")
+                                    composable("my") {
+                                        ShowUserPlaylistPage(
+                                            navController = navController,
+                                            viewModel = viewModel,
+                                        )
+                                    }
+                                    composable("my/playlistDetailPage/{songId}") { backStackEntry ->
+                                        val songId = backStackEntry.arguments?.getString("songId")
+                                        if (BuildConfig.DEBUG) {
+                                            Log.d("Main", "SongList ID: $songId")
+                                        }
+                                        ShowPlaylistDetailPage(
+                                            viewModel = viewModel,
+                                            songlistID = songId!!.toLong(),
+                                        )
+                                    }
+                                    composable("settings") {
+                                        SettingPage(this@MainActivity, importSettingLauncher)
                                     }
-                                    ShowPlaylistDetailPage(
-                                        viewModel = viewModel,
-                                        songlistID = songId!!.toLong(),
-                                    )
-                                }
-                                composable("settings") {
-                                    SettingPage(this@MainActivity, importSettingLauncher)
                                 }
                             }
                         }

app/src/main/java/com/redstar/redefinencm/activity/mainActivity/RecommendPage.kt

@@ -1,5 +1,9 @@
 package com.redstar.redefinencm.activity.mainActivity
 
+import androidx.compose.animation.AnimatedVisibilityScope
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExperimentalSharedTransitionApi
+import androidx.compose.animation.SharedTransitionScope
 import androidx.compose.foundation.background
 import androidx.compose.foundation.basicMarquee
 import androidx.compose.foundation.layout.Box
@@ -16,6 +20,10 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
@@ -32,50 +40,82 @@ import com.redstar.redefinencm.viewmodel.MainViewModel
 fun RecommendPage(
     navController: NavController,
     viewModel: MainViewModel,
+    sharedTransitionScope: SharedTransitionScope,
 ) {
     val recommendResource = viewModel.recommendResource.collectAsState()
     val recommendSongs = viewModel.recommendSongs.collectAsState()
+    var showSearch by rememberSaveable { mutableStateOf(false) }
 
-    Column(modifier = Modifier.padding(16.dp)) {
-        SearchBox()
+    Box(modifier = Modifier.fillMaxSize()) {
+        AnimatedVisibility(visible = !showSearch) {
+            val animatedVisibilityScope = this
+            Column(modifier = Modifier.padding(16.dp)) {
+                SearchBox(
+                    onClick = { showSearch = true },
+                    sharedTransitionScope = sharedTransitionScope,
+                    animatedVisibilityScope = animatedVisibilityScope,
+                )
 
-        SectionWithLazyRow(
-            title = "Recommend Resources",
-            items = recommendResource.value?.recommend ?: emptyList(),
-            itemContent = { eachRecommend ->
+                SectionWithLazyRow(
+                    title = "Recommend Resources",
+                    items = recommendResource.value?.recommend ?: emptyList(),
+                    itemContent = { eachRecommend ->
 
-                RecommendSquareCard(
-                    eachRecommend.picUrl,
-                    eachRecommend.name,
-                    { navController.navigate("recommend/playlistDetailPage/${eachRecommend.id}") },
+                        RecommendSquareCard(
+                            eachRecommend.picUrl,
+                            eachRecommend.name,
+                            { navController.navigate("recommend/playlistDetailPage/${eachRecommend.id}") },
+                        )
+                    },
                 )
-            },
-        )
 
-        SectionWithLazyRow(
-            title = "Recommend Songs",
-            items = recommendSongs.value?.data?.dailySongs ?: emptyList(),
-            itemContent = { eachSong ->
-                RecommendSquareCard(
-                    eachSong.al.picUrl,
-                    eachSong.name,
-                    { viewModel.onPlaySingleSongClick(eachSong) },
+                SectionWithLazyRow(
+                    title = "Recommend Songs",
+                    items = recommendSongs.value?.data?.dailySongs ?: emptyList(),
+                    itemContent = { eachSong ->
+                        RecommendSquareCard(
+                            eachSong.al.picUrl,
+                            eachSong.name,
+                            { viewModel.onPlaySingleSongClick(eachSong) },
+                        )
+                    },
                 )
-            },
-        )
+            }
+        }
+
+        AnimatedVisibility(visible = showSearch) {
+            val animatedVisibilityScope = this
+            SearchDemoPage(
+                onBack = { showSearch = false },
+                sharedTransitionScope = sharedTransitionScope,
+                animatedVisibilityScope = animatedVisibilityScope,
+            )
+        }
     }
 }
 
+@OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
-fun SearchBox() {
-    Card(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(vertical = 8.dp),
-        elevation = CardDefaults.cardElevation(4.dp),
-    ) {
-        Box(modifier = Modifier.padding(16.dp)) {
-            Text(text = "Search TODO", fontSize = 16.sp)
+fun SearchBox(
+    onClick: () -> Unit,
+    sharedTransitionScope: SharedTransitionScope,
+    animatedVisibilityScope: AnimatedVisibilityScope,
+) {
+    with(sharedTransitionScope) {
+        Card(
+            onClick = onClick,
+            modifier = Modifier
+                .sharedBounds(
+                    rememberSharedContentState(SharedKeys.search()),
+                    animatedVisibilityScope,
+                )
+                .fillMaxWidth()
+                .padding(vertical = 8.dp),
+            elevation = CardDefaults.cardElevation(4.dp),
+        ) {
+            Box(modifier = Modifier.padding(16.dp)) {
+                Text(text = "Search", fontSize = 16.sp)
+            }
         }
     }
 }

app/src/main/java/com/redstar/redefinencm/activity/mainActivity/SearchDemoPage.kt

@@ -0,0 +1,67 @@
+package com.redstar.redefinencm.activity.mainActivity
+
+import androidx.compose.animation.AnimatedVisibilityScope
+import androidx.compose.animation.ExperimentalSharedTransitionApi
+import androidx.compose.animation.SharedTransitionScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@OptIn(ExperimentalSharedTransitionApi::class)
+@Composable
+fun SearchDemoPage(
+    onBack: () -> Unit,
+    sharedTransitionScope: SharedTransitionScope,
+    animatedVisibilityScope: AnimatedVisibilityScope,
+) {
+    val queryState = remember { mutableStateOf("") }
+    Column(modifier = Modifier.padding(16.dp)) {
+        IconButton(onClick = onBack) {
+            Icon(
+                imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                contentDescription = "Back",
+            )
+        }
+        with(sharedTransitionScope) {
+            TextField(
+                value = queryState.value,
+                onValueChange = { queryState.value = it },
+                placeholder = { Text("Search") },
+                modifier = Modifier
+                    .sharedBounds(
+                        rememberSharedContentState(SharedKeys.search()),
+                        animatedVisibilityScope,
+                    )
+                    .fillMaxWidth(),
+                colors = TextFieldDefaults.colors(
+                    focusedContainerColor = MaterialTheme.colorScheme.surfaceVariant,
+                    unfocusedContainerColor = MaterialTheme.colorScheme.surfaceVariant,
+                ),
+            )
+        }
+        Spacer(modifier = Modifier.height(16.dp))
+        Text(
+            text = "Search demo page",
+            style = MaterialTheme.typography.titleMedium,
+        )
+        Text(
+            text = "Type to see shared bounds from the home search card.",
+            style = MaterialTheme.typography.bodyMedium,
+        )
+    }
+}

app/src/main/java/com/redstar/redefinencm/activity/mainActivity/SharedKeys.kt

@@ -0,0 +1,5 @@
+package com.redstar.redefinencm.activity.mainActivity
+
+object SharedKeys {
+    fun search(): String = "shared_search_box"
+}

gradle/libs.versions.toml

@@ -68,6 +68,7 @@ androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-toolin
 androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
 androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
 androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
+androidx-compose-animation = { group = "androidx.compose.animation", name = "animation" }
 exoplayer = { group = "com.google.android.exoplayer", name = "exoplayer", version.ref = "exoplayer" }
 exoplayer-common = { group = "com.google.android.exoplayer", name = "exoplayer-common", version.ref = "exoplayerCommon" }
 exoplayer-core = { group = "com.google.android.exoplayer", name = "exoplayer-core", version.ref = "exoplayerCore" }
@@ -85,4 +86,3 @@ hyperfocus-api = { module = "com.github.ghhccghk:HyperFocusApi", version.ref = "
 android-application = { id = "com.android.application", version.ref = "agp" }
 kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
 kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
-