From f28b96404c067b7f0f343567524fed509f87b430 Mon Sep 17 00:00:00 2001 From: Suhas Dissanayake Date: Mon, 14 Aug 2023 17:50:10 +0530 Subject: [PATCH] Add shimmer effect for the wallpaperPage --- .../wallpaper/ui/components/ShimmerGrid.kt | 30 ++++++++++ .../bnyro/wallpaper/ui/pages/WallpaperPage.kt | 27 ++++----- .../com/bnyro/wallpaper/util/ShimmerEffect.kt | 59 +++++++++++++++++++ 3 files changed, 101 insertions(+), 15 deletions(-) create mode 100644 app/src/main/java/com/bnyro/wallpaper/ui/components/ShimmerGrid.kt create mode 100644 app/src/main/java/com/bnyro/wallpaper/util/ShimmerEffect.kt diff --git a/app/src/main/java/com/bnyro/wallpaper/ui/components/ShimmerGrid.kt b/app/src/main/java/com/bnyro/wallpaper/ui/components/ShimmerGrid.kt new file mode 100644 index 00000000..ebca1e2a --- /dev/null +++ b/app/src/main/java/com/bnyro/wallpaper/ui/components/ShimmerGrid.kt @@ -0,0 +1,30 @@ +package com.bnyro.wallpaper.ui.components + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.lazy.grid.GridCells +import androidx.compose.foundation.lazy.grid.LazyVerticalGrid +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.unit.dp +import com.bnyro.wallpaper.util.shimmer + +@Composable +fun ShimmerGrid() { + LazyVerticalGrid( + columns = GridCells.Fixed(2) + ) { + items(10) { + Box( + modifier = Modifier + .height(300.dp) + .padding(5.dp) + .clip(RoundedCornerShape(10.dp)) + .shimmer(600f) + ) + } + } +} diff --git a/app/src/main/java/com/bnyro/wallpaper/ui/pages/WallpaperPage.kt b/app/src/main/java/com/bnyro/wallpaper/ui/pages/WallpaperPage.kt index 7bfdfe20..cd5a435f 100644 --- a/app/src/main/java/com/bnyro/wallpaper/ui/pages/WallpaperPage.kt +++ b/app/src/main/java/com/bnyro/wallpaper/ui/pages/WallpaperPage.kt @@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.padding import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.FilterList import androidx.compose.material.icons.filled.Shuffle -import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.FloatingActionButton import androidx.compose.material3.Icon import androidx.compose.runtime.Composable @@ -24,6 +23,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.unit.dp import com.bnyro.wallpaper.db.obj.Wallpaper +import com.bnyro.wallpaper.ui.components.ShimmerGrid import com.bnyro.wallpaper.ui.components.WallpaperGrid import com.bnyro.wallpaper.ui.components.WallpaperPreview import com.bnyro.wallpaper.ui.components.dialogs.FilterDialog @@ -64,10 +64,7 @@ fun WallpaperPage( } } } else { - CircularProgressIndicator( - modifier = Modifier - .align(Alignment.Center) - ) + ShimmerGrid() } Row( @@ -79,19 +76,19 @@ fun WallpaperPage( FloatingActionButton( modifier = Modifier .padding(horizontal = 10.dp), - /*.combinedClickable( - onLongClick = { - Toast.makeText(context, R.string.applying_random, Toast.LENGTH_SHORT).show() - CoroutineScope(Dispatchers.IO).launch { - val wallpaperUrl = viewModel.api.getRandomWallpaperUrl() - ImageHelper.urlToBitmap(this, wallpaperUrl, context) { - WallpaperHelper.setWallpaper(context, it, WallpaperMode.BOTH) - } + /*.combinedClickable( + onLongClick = { + Toast.makeText(context, R.string.applying_random, Toast.LENGTH_SHORT).show() + CoroutineScope(Dispatchers.IO).launch { + val wallpaperUrl = viewModel.api.getRandomWallpaperUrl() + ImageHelper.urlToBitmap(this, wallpaperUrl, context) { + WallpaperHelper.setWallpaper(context, it, WallpaperMode.BOTH) } } - ), + } + ), - */ + */ onClick = { selectedWallpaper = viewModel.wallpapers.randomOrNull() } diff --git a/app/src/main/java/com/bnyro/wallpaper/util/ShimmerEffect.kt b/app/src/main/java/com/bnyro/wallpaper/util/ShimmerEffect.kt new file mode 100644 index 00000000..57efec25 --- /dev/null +++ b/app/src/main/java/com/bnyro/wallpaper/util/ShimmerEffect.kt @@ -0,0 +1,59 @@ +package com.bnyro.wallpaper.util + +import androidx.compose.animation.core.RepeatMode +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.isSystemInDarkTheme +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.size +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.composed +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp + +/** + * @param length Diagonal length of the element + */ +fun Modifier.shimmer(length: Float): Modifier = composed { + val transition = rememberInfiniteTransition(label = "shimmer transition") + val offset by transition.animateFloat( + initialValue = -100f, + targetValue = length + 100f, + animationSpec = infiniteRepeatable( + animation = tween(1500), + repeatMode = RepeatMode.Restart + ), + label = "gradient offset" + ) + val color = if (isSystemInDarkTheme()) Color.DarkGray else Color.LightGray + val startOffset = -length / 4 + offset + val endOffset = length / 4 + offset + val brush = Brush.linearGradient( + colors = listOf( + color.copy(alpha = 0.2f), + color.copy(alpha = 0.6f), + color.copy(alpha = 0.2f) + ), + start = Offset(x = startOffset, y = startOffset), + end = Offset(x = endOffset, y = endOffset) + ) + this.then(background(brush)) +} + +@Preview +@Composable +private fun ShimmerPreview() { + Box( + modifier = Modifier + .size(300.dp) + .shimmer(400f) + ) +}