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