Shared element snippets

compose/snippets/src/main/java/com/example/compose/snippets/animations/sharedelement/SharedBoundsSnippets.kt

@@ -0,0 +1,201 @@
+/*
+ * Copyright 2024 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@file:OptIn(ExperimentalSharedTransitionApi::class)
+
+package com.example.compose.snippets.animations.sharedelement
+
+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.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+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.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.compose.snippets.R
+import com.example.compose.snippets.ui.theme.LavenderLight
+import com.example.compose.snippets.ui.theme.RoseLight
+
+private class SharedElementBasicUsage4 {
+
+    @Preview
+    @Composable
+    private fun SharedElementApp() {
+        var showDetails by remember {
+            mutableStateOf(false)
+        }
+        SharedTransitionLayout {
+            AnimatedContent(
+                showDetails,
+                label = "basic_transition"
+            ) { targetState ->
+                if (!targetState) {
+                    MainContent(
+                        onShowDetails = {
+                            showDetails = true
+                        },
+                        animatedVisibilityScope = this@AnimatedContent,
+                        sharedTransitionScope = this@SharedTransitionLayout
+                    )
+                } else {
+                    DetailsContent(
+                        onBack = {
+                            showDetails = false
+                        },
+                        animatedVisibilityScope = this@AnimatedContent,
+                        sharedTransitionScope = this@SharedTransitionLayout
+                    )
+                }
+            }
+        }
+    }
+
+    // [START android_compose_animations_shared_element_shared_bounds]
+    @Composable
+    private fun MainContent(
+        onShowDetails: () -> Unit,
+        modifier: Modifier = Modifier,
+        sharedTransitionScope: SharedTransitionScope,
+        animatedVisibilityScope: AnimatedVisibilityScope
+    ) {
+        with(sharedTransitionScope) {
+            Row(
+                modifier = Modifier
+                    .padding(8.dp)
+                    .sharedBounds(
+                        rememberSharedContentState(key = "bounds"),
+                        animatedVisibilityScope = animatedVisibilityScope,
+                        enter = fadeIn(),
+                        exit = fadeOut()
+                    )
+                    // [START_EXCLUDE]
+                    .border(1.dp, Color.Gray.copy(alpha = 0.5f), RoundedCornerShape(8.dp))
+                    .background(LavenderLight, RoundedCornerShape(8.dp))
+                    .clickable {
+                        onShowDetails()
+                    }
+                    .padding(8.dp)
+                // [END_EXCLUDE]
+            ) {
+                // [START_EXCLUDE]
+                Image(
+                    painter = painterResource(id = R.drawable.cupcake),
+                    contentDescription = "Cupcake",
+                    modifier = Modifier
+                        .sharedElement(
+                            rememberSharedContentState(key = "image"),
+                            animatedVisibilityScope = animatedVisibilityScope
+                        )
+                        .size(100.dp)
+                        .clip(CircleShape),
+                    contentScale = ContentScale.Crop
+                )
+                Text(
+                    "Cupcake", fontSize = 21.sp,
+                    modifier = Modifier.sharedBounds(
+                        rememberSharedContentState(key = "title"),
+                        animatedVisibilityScope = animatedVisibilityScope
+                    )
+                )
+                // [END_EXCLUDE]
+            }
+        }
+    }
+
+    @Composable
+    private fun DetailsContent(
+        modifier: Modifier = Modifier,
+        onBack: () -> Unit,
+        sharedTransitionScope: SharedTransitionScope,
+        animatedVisibilityScope: AnimatedVisibilityScope
+    ) {
+        with(sharedTransitionScope) {
+            Column(
+                modifier = Modifier
+                    .sharedBounds(
+                        rememberSharedContentState(key = "bounds"),
+                        animatedVisibilityScope = animatedVisibilityScope,
+                        enter = fadeIn(),
+                        exit = fadeOut()
+                    )
+                    // [START_EXCLUDE]
+                    .padding(top = 200.dp, start = 16.dp, end = 16.dp)
+                    .border(1.dp, Color.Gray.copy(alpha = 0.5f), RoundedCornerShape(8.dp))
+                    .background(RoseLight, RoundedCornerShape(8.dp))
+                    .clickable {
+                        onBack()
+                    }
+                    .padding(8.dp)
+                // [END_EXCLUDE]
+
+            ) {
+                // [START_EXCLUDE]
+                Image(
+                    painter = painterResource(id = R.drawable.cupcake),
+                    contentDescription = "Cupcake",
+                    modifier = Modifier
+                        .sharedElement(
+                            rememberSharedContentState(key = "image"),
+                            animatedVisibilityScope = animatedVisibilityScope
+                        )
+                        .size(200.dp)
+                        .clip(CircleShape),
+                    contentScale = ContentScale.Crop
+                )
+                Text(
+                    "Cupcake", fontSize = 28.sp,
+                    modifier = Modifier.sharedBounds(
+                        rememberSharedContentState(key = "title"),
+                        animatedVisibilityScope = animatedVisibilityScope
+                    )
+                )
+                Text(
+                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet lobortis velit. " +
+                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit." +
+                        " Curabitur sagittis, lectus posuere imperdiet facilisis, nibh massa " +
+                        "molestie est, quis dapibus orci ligula non magna. Pellentesque rhoncus " +
+                        "hendrerit massa quis ultricies. Curabitur congue ullamcorper leo, at maximus"
+                )
+                // [END_EXCLUDE]
+            }
+        }
+    }
+    // [END android_compose_animations_shared_element_shared_bounds]
+}

compose/snippets/src/main/java/com/example/compose/snippets/animations/sharedelement/SharedElementCommonUseCaseSnippets.kt

@@ -0,0 +1,99 @@
+/*
+ * Copyright 2024 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@file:OptIn(ExperimentalSharedTransitionApi::class)
+
+package com.example.compose.snippets.animations.sharedelement
+
+import androidx.annotation.DrawableRes
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.ExperimentalSharedTransitionApi
+import androidx.compose.animation.SharedTransitionLayout
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalInspectionMode
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import coil.request.ImageRequest
+
+@Preview
+@Composable
+private fun SharedAsyncImage() {
+    SharedTransitionLayout {
+        AnimatedVisibility(visible = true) {
+            // [START android_compose_shared_element_async_image_tip]
+            AsyncImage(
+                model = ImageRequest.Builder(LocalContext.current)
+                    .data("your-image-url")
+                    .crossfade(true)
+                    .build(),
+                placeholder = null,
+                contentDescription = null,
+                modifier = Modifier
+                    .size(120.dp)
+                    .sharedBounds(
+                        rememberSharedContentState(
+                            key = "image-key"
+                        ),
+                        animatedVisibilityScope = this,
+                        exit = ExitTransition.None
+                    )
+            )
+            // [END android_compose_shared_element_async_image_tip]
+        }
+    }
+}
+
+@Composable
+fun debugPlaceholder(@DrawableRes debugPreview: Int) =
+    if (LocalInspectionMode.current) {
+        painterResource(id = debugPreview)
+    } else {
+        null
+    }
+
+@Preview
+@Composable
+private fun SharedElementTypicalUseText() {
+    SharedTransitionLayout {
+        AnimatedVisibility(visible = true) {
+            // [START android_compose_shared_element_text_tip]
+            Text(
+                text = "This is an example of how to share text",
+                modifier = Modifier
+                    .wrapContentWidth()
+                    .sharedBounds(
+                        rememberSharedContentState(
+                            key = "shared Text"
+                        ),
+                        animatedVisibilityScope = this,
+                        enter = fadeIn() + scaleInSharedContentToBounds(),
+                        exit = fadeOut() + scaleOutSharedContentToBounds()
+                    )
+            )
+            // [END android_compose_shared_element_text_tip]
+        }
+    }
+}