Shimmer compose added

README.md

@@ -77,6 +77,7 @@ sense.
 |[How do I get FrameLayout like functionality to stack views on top of one another?](https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/stack/StackActivity.kt)| |
 |How do I do animation in Jetpack Compose? <br/>[Example: Rotation Animation](https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/animation/Animation1Activity.kt) <br/> [Example: Color Change Animation](https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/animation/Animation2Activity.kt) |<img src ="screenshots/animation_rotation.gif" width=214 height=400> <br/> <br/> <img src ="screenshots/color_animation.gif" width=214 height=400>|
 |[How do styles & themes work in Jetpack Compose?](https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/theme/DarkModeActivity.kt) <br/> [How do I add dark mode capability to my app?](https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/theme/DarkModeActivity.kt)|<img src ="screenshots/dark_mode.gif" width=214 height=400> |
+|[How do I display a shimmer using Jetpack Compose?](https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/shimmer/ShimmerActivity.kt)|<img src ="screenshots/shimmer.gif" width=214 height=400> |
 
 
 ### State Management

app/src/main/AndroidManifest.xml

@@ -193,6 +193,12 @@
             android:exported="true"
             android:label="@string/title_compose_navigation_example"
             android:theme="@style/AppTheme.NoActionBar" />
+
+        <activity
+            android:name=".shimmer.ShimmerActivity"
+            android:exported="true"
+            android:label="@string/title_shimmer_example"
+            android:theme="@style/AppTheme.NoActionBar" />
     </application>
 
-</manifest>
+</manifest>

app/src/main/java/com/example/jetpackcompose/core/MainActivity.kt

@@ -31,6 +31,7 @@ import com.example.jetpackcompose.material.ShadowActivity
 import com.example.jetpackcompose.navigation.ComposeNavigationActivity
 import com.example.jetpackcompose.scrollers.HorizontalScrollableActivity
 import com.example.jetpackcompose.scrollers.VerticalScrollableActivity
+import com.example.jetpackcompose.shimmer.ShimmerActivity
 import com.example.jetpackcompose.stack.StackActivity
 import com.example.jetpackcompose.state.ProcessDeathActivity
 import com.example.jetpackcompose.state.StateActivity
@@ -190,4 +191,8 @@ class MainActivity : AppCompatActivity() {
     fun startComposeNavigationExample(view: View) {
         startActivity(Intent(this, ComposeNavigationActivity::class.java))
     }
+
+    fun startShimmerExample(view: View) {
+        startActivity(Intent(this, ShimmerActivity::class.java))
+    }
 }

app/src/main/java/com/example/jetpackcompose/shimmer/ShimmerActivity.kt

@@ -0,0 +1,193 @@
+package com.example.jetpackcompose.shimmer
+
+import android.os.Bundle
+import androidx.activity.compose.setContent
+import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.animation.core.Easing
+import androidx.compose.animation.core.FastOutLinearInEasing
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.LinearOutSlowInEasing
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+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.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+class ShimmerActivity : AppCompatActivity() {
+
+    private val lightRed = Color(0xFFFFCDD2)
+    private val lightPurple = Color(0xFFE1BEE7)
+    private val lightBlue = Color(0xFFBBDEFB)
+    private val lightCyan = Color(0xFFB2EBF2)
+    private val lightTeal = Color(0xFFB2DFDB)
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            LazyColumn(modifier = Modifier.padding(16.dp)) {
+                item {
+                    item(
+                        color = lightRed,
+                        tweenType = FastOutSlowInEasing,
+                    )
+
+                    spacerHeight(height = 8.dp)
+
+                    item(
+                        color = lightPurple,
+                        tweenType = LinearOutSlowInEasing
+                    )
+
+                    spacerHeight(height = 8.dp)
+
+
+                    item(
+                        color = lightBlue,
+                        tweenType = FastOutLinearInEasing
+                    )
+
+                    spacerHeight(height = 8.dp)
+
+
+                    item(
+                        color = lightCyan,
+                        tweenType = LinearEasing
+                    )
+
+                    spacerHeight(height = 8.dp)
+
+
+                    item(
+                        color = lightTeal,
+                        tweenType = LinearOutSlowInEasing
+                    )
+                }
+            }
+        }
+    }
+
+    @Composable
+    private fun item(color: Color, tweenType: Easing) {
+        ImagePlaceHolder(
+            color = color,
+            tweenType = tweenType,
+            size = 100.dp
+        )
+        spacerHeight(height = 4.dp)
+        LinePlaceHolder(
+            color = color,
+            tweenType = tweenType, width = 1f
+        )
+    }
+}
+
+@Composable
+fun ImagePlaceHolder(
+    color: Color = Color.LightGray,
+    tweenType: Easing = FastOutSlowInEasing,
+    size: Dp = 100.dp
+) = ShimmerAnimation(
+    color = color,
+    tweenType = tweenType
+) {
+    Spacer(
+        modifier = Modifier
+            .size(size)
+            .background(
+                brush = it,
+            )
+    )
+}
+
+@Composable
+fun LinePlaceHolder(
+    color: Color = Color.LightGray,
+    tweenType: Easing = FastOutSlowInEasing,
+    width: Float = 0.5f
+) = ShimmerAnimation(
+    color = color,
+    tweenType = tweenType
+) {
+    Spacer(
+        modifier = Modifier
+            .fillMaxWidth(width)
+            .height(16.dp)
+            .background(
+                brush = it,
+            )
+    )
+}
+
+@Composable
+fun spacerHeight(height: Dp) = Spacer(modifier = Modifier.height(height))
+
+@Composable
+fun ShimmerAnimation(
+    color: Color = Color.LightGray,
+    tweenType: Easing = FastOutSlowInEasing,
+    content: @Composable (Brush) -> Unit
+) {
+
+    /*
+    Create InfiniteTransition
+    which holds child animation like [Transition]
+    animations start running as soon as they enter
+    the composition and do not stop unless they are removed
+    */
+
+    val transition = rememberInfiniteTransition()
+    val translateAnim by transition.animateFloat(
+        /*
+        Specify animation positions,
+        initial Values 0F means it starts from 0 position
+        */
+        initialValue = 0f,
+        targetValue = 1000f,
+        animationSpec = infiniteRepeatable(
+
+            /*
+             Tween Animates between values over specified [durationMillis]
+            */
+            tween(durationMillis = 1200, easing = tweenType),
+        )
+    )
+
+    /*
+      Create a gradient using the list of colors
+      Use Linear Gradient for animating in any direction according to requirement
+      start=specifies the position to start with in cartesian like system Offset(10f,10f) means x(10,0) , y(0,10)
+      end= Animate the end position to give the shimmer effect using the transition created above
+    */
+
+    val shimmerColorShades = listOf(
+
+        color.copy(0.9f),
+
+        color.copy(0.2f),
+
+        color.copy(0.9f)
+
+    )
+    val brush = Brush.linearGradient(
+        colors = shimmerColorShades,
+        start = Offset(10f, 10f),
+        end = Offset(translateAnim, translateAnim)
+    )
+
+    content(brush)
+}

app/src/main/res/layout/activity_main.xml

@@ -677,5 +677,24 @@
                 android:layout_gravity="center"
                 android:fontFamily="monospace" />
         </androidx.cardview.widget.CardView>
+
+        <androidx.cardview.widget.CardView
+            android:id="@+id/load_shimmer_example"
+            android:layout_width="match_parent"
+            android:layout_height="@dimen/cardview_height"
+            app:cardBackgroundColor="@color/colorPrimary"
+            android:padding="@dimen/default_padding"
+            android:onClick="startShimmerExample"
+            android:layout_marginTop="@dimen/default_padding"
+            app:cardCornerRadius="@dimen/card_corner_radius">
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/tv_shimmer_example"
+                android:textColor="@color/white"
+                android:layout_gravity="center"
+                android:fontFamily="monospace" />
+        </androidx.cardview.widget.CardView>
     </LinearLayout>
 </ScrollView>

app/src/main/res/values/strings.xml

@@ -34,6 +34,7 @@
     <string name="title_back_press_example">Back Press Example</string>
     <string name="title_zoomable_example">Zoomable Example</string>
     <string name="title_compose_navigation_example">Compose Navigation Example</string>
+    <string name="title_shimmer_example">Shimmer Example</string>
 
     <string name="tv_simple_text_example">Display Text</string>
     <string name="tv_custom_text_example">Display Styled Text</string>
@@ -70,4 +71,5 @@
     <string name="tv_back_press_example">Back Press Component</string>
     <string name="tv_zoomable_example">Zoomable Component</string>
     <string name="tv_compose_navigation_example">Compose Navigation</string>
+    <string name="tv_shimmer_example">Shimmer Component</string>
 </resources>