diff --git a/README.md b/README.md
index d7cdc51..4414081 100644
--- a/README.md
+++ b/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?
[Example: Rotation Animation](https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/animation/Animation1Activity.kt)
[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) |
|
|[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)
[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)| |
+|[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)| |
### State Management
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 6dc0e12..5bd4578 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -193,6 +193,12 @@
android:exported="true"
android:label="@string/title_compose_navigation_example"
android:theme="@style/AppTheme.NoActionBar" />
+
+
-
+
\ No newline at end of file
diff --git a/app/src/main/java/com/example/jetpackcompose/core/MainActivity.kt b/app/src/main/java/com/example/jetpackcompose/core/MainActivity.kt
index 1c7ff84..f517aea 100644
--- a/app/src/main/java/com/example/jetpackcompose/core/MainActivity.kt
+++ b/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))
+ }
}
diff --git a/app/src/main/java/com/example/jetpackcompose/shimmer/ShimmerActivity.kt b/app/src/main/java/com/example/jetpackcompose/shimmer/ShimmerActivity.kt
new file mode 100644
index 0000000..f01b71b
--- /dev/null
+++ b/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)
+}
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index c7ff7c7..8551885 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -677,5 +677,24 @@
android:layout_gravity="center"
android:fontFamily="monospace" />
+
+
+
+
+
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index b8f3e3e..d6eb39e 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -34,6 +34,7 @@
Back Press Example
Zoomable Example
Compose Navigation Example
+ Shimmer Example
Display Text
Display Styled Text
@@ -70,4 +71,5 @@
Back Press Component
Zoomable Component
Compose Navigation
+ Shimmer Component
diff --git a/screenshots/shimmer.gif b/screenshots/shimmer.gif
new file mode 100644
index 0000000..71c0ce2
Binary files /dev/null and b/screenshots/shimmer.gif differ