Added AnimatedVisibilityExample.kt to MotionCompose

Author: riggaroo

MotionCompose/app/src/main/java/com/example/android/compose/motion/demo/Demo.kt

@@ -22,6 +22,7 @@ import com.example.android.compose.motion.demo.fadethrough.FadeThroughDemo
 import com.example.android.compose.motion.demo.loading.LoadingDemo
 import com.example.android.compose.motion.demo.sharedaxis.SharedAxisDemo
 import com.example.android.compose.motion.demo.sharedtransform.SharedTransformDemo
+import com.example.android.compose.motion.demo.visibility.AnimatedVisibilityExample
 
 enum class Demo(
     val title: String,
@@ -82,7 +83,14 @@ enum class Demo(
         ),
         content = { SharedAxisDemo() }
     ),
-
+    AnimatedVisibility(
+        title = "Layout > Animating a view's visibility",
+        description = """
+            Animating the views visibility from visible to invisible
+        """.trimIndent(),
+        apis = listOf("AnimatedVisibility"),
+        content = { AnimatedVisibilityExample() }
+    ),
     Loading(
         title = "List > Loading",
         description = """

MotionCompose/app/src/main/java/com/example/android/compose/motion/demo/visibility/AnimatedVisibilityExample.kt

@@ -0,0 +1,58 @@
+package com.example.android.compose.motion.demo.visibility
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+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.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+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 com.example.android.compose.motion.demo.CheeseImages
+
+@Preview
+@Composable
+fun AnimatedVisibilityExample() {
+    var visible by remember {
+        mutableStateOf(true)
+    }
+    Box(modifier = Modifier.fillMaxSize()) {
+        AnimatedVisibility(visible,
+            modifier = Modifier.align(Alignment.Center),
+            enter = fadeIn(),
+            exit = fadeOut()
+        ) {
+            Image(
+                painter = painterResource(id = CheeseImages[0]),
+                contentDescription = "Cheese",
+                modifier = Modifier
+                    .size(256.dp, 192.dp)
+                    .clip(shape = RoundedCornerShape(16.dp)),
+                contentScale = ContentScale.Crop
+            )
+        }
+        Button(
+            onClick = { visible = !visible },
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(64.dp)
+        ) {
+            Text(text = "TOGGLE VISIBILITY")
+        }
+    }
+}