Merge pull request #342 from android/parallax_effect

Parallax effect

Author: thedmail

compose/snippets/src/main/java/com/example/compose/snippets/images/ParallaxEffect.kt

@@ -0,0 +1,74 @@
+/*
+ * 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.
+ */
+
+package com.example.compose.snippets.images
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.example.compose.snippets.R
+
+// [START android_compose_images_parallax]
+@Composable
+fun ParallaxEffect() {
+    fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) =
+        layout { measurable, constraints ->
+            val placeable = measurable.measure(constraints)
+            val height = if (rate > 0) scrollState.value / rate else scrollState.value
+            layout(placeable.width, placeable.height) {
+                placeable.place(0, height)
+            }
+        }
+
+    val scrollState = rememberScrollState()
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .verticalScroll(scrollState),
+    ) {
+
+        Image(
+            painterResource(id = R.drawable.cupcake),
+            contentDescription = "Android logo",
+            contentScale = ContentScale.Fit,
+            // Reduce scrolling rate by half.
+            modifier = Modifier.parallaxLayoutModifier(scrollState, 2)
+        )
+
+        Text(
+            text = stringResource(R.string.detail_placeholder),
+            modifier = Modifier
+                .background(Color.White)
+                .padding(horizontal = 8.dp),
+
+        )
+    }
+}
+// [END android_compose_images_parallax]

compose/snippets/src/main/res/values-es/strings.xml

@@ -52,4 +52,5 @@
   <string name="favorites">Favoritos</string>
   <string name="shopping">Compras</string>
   <string name="profile">Perfil</string>
+  <string name="detail_placeholder">Esto es sólo un texto de marcador de posición.</string>
 </resources>

compose/snippets/src/main/res/values/strings.xml

@@ -52,4 +52,5 @@
     <string name="favorites">Favorites</string>
     <string name="shopping">Shopping</string>
     <string name="profile">Profile</string>
+    <string name="detail_placeholder">This is just a placeholder.</string>
 </resources>