Skip to content

Commit 192285c

Browse files
Hamza417Hamza417
committed
add: liquid glass effect on wallpaper card
1 parent 39d1bc9 commit 192285c

File tree

4 files changed

+103
-28
lines changed

4 files changed

+103
-28
lines changed

‎app/src/main/java/app/simple/peri/ui/commons/WallpaperListCommons.kt‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ import androidx.compose.ui.draw.blur
5151
import androidx.compose.ui.draw.clip
5252
import androidx.compose.ui.draw.shadow
5353
import androidx.compose.ui.graphics.Color
54+
import androidx.compose.ui.graphics.SolidColor
5455
import androidx.compose.ui.graphics.graphicsLayer
5556
import androidx.compose.ui.layout.ContentScale
5657
import androidx.compose.ui.platform.LocalContext
@@ -86,10 +87,16 @@ import com.bumptech.glide.load.engine.GlideException
8687
import com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions.withCrossFade
8788
import com.bumptech.glide.request.RequestListener
8889
import com.bumptech.glide.request.target.Target
89-
import dev.chrisbanes.haze.HazeDefaults
90+
import com.kyant.liquidglass.GlassStyle
91+
import com.kyant.liquidglass.liquidGlass
92+
import com.kyant.liquidglass.liquidGlassProvider
93+
import com.kyant.liquidglass.material.GlassMaterial
94+
import com.kyant.liquidglass.refraction.InnerRefraction
95+
import com.kyant.liquidglass.refraction.RefractionAmount
96+
import com.kyant.liquidglass.refraction.RefractionHeight
97+
import com.kyant.liquidglass.rememberLiquidGlassProviderState
9098
import dev.chrisbanes.haze.HazeState
9199
import dev.chrisbanes.haze.hazeEffect
92-
import dev.chrisbanes.haze.hazeSource
93100
import dev.chrisbanes.haze.materials.ExperimentalHazeMaterialsApi
94101
import dev.chrisbanes.haze.materials.HazeMaterials
95102

@@ -105,7 +112,9 @@ fun WallpaperItem(
105112
wallpaperListViewModel: WallpaperListViewModel,
106113
list: List<Wallpaper>
107114
) {
108-
val hazeState = remember { HazeState() }
115+
val providerState = rememberLiquidGlassProviderState(
116+
backgroundColor = Color.Transparent
117+
)
109118
var showDialog by remember { mutableStateOf(false) }
110119
var isSelected by remember { mutableStateOf(wallpaper.isSelected) }
111120
val showTagDialog = remember { mutableStateOf(false) }
@@ -246,7 +255,7 @@ fun WallpaperItem(
246255
contentDescription = null,
247256
transition = CrossFade,
248257
modifier = Modifier
249-
.hazeSource(hazeState)
258+
.liquidGlassProvider(providerState)
250259
.fillMaxSize(),
251260
contentScale = ContentScale.Crop
252261
) {
@@ -279,11 +288,19 @@ fun WallpaperItem(
279288
modifier = Modifier
280289
.wrapContentHeight()
281290
.fillMaxWidth()
282-
.hazeEffect(
283-
state = hazeState,
284-
style = HazeDefaults.style(
285-
backgroundColor = Color(0x50000000),
286-
blurRadius = 5.dp
291+
.liquidGlass(
292+
providerState,
293+
GlassStyle(
294+
shape = RoundedCornerShape(0.dp),
295+
innerRefraction = InnerRefraction(
296+
height = RefractionHeight(16.dp),
297+
amount = RefractionAmount((-100).dp)
298+
),
299+
material = GlassMaterial(
300+
blurRadius = 8.dp,
301+
brush = SolidColor(Color.Black),
302+
alpha = 0.3f
303+
)
287304
)
288305
)
289306
.align(Alignment.BottomCenter)

‎app/src/main/java/app/simple/peri/ui/screens/Folders.kt‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import androidx.compose.runtime.setValue
4040
import androidx.compose.ui.Alignment
4141
import androidx.compose.ui.Modifier
4242
import androidx.compose.ui.graphics.Color
43+
import androidx.compose.ui.graphics.SolidColor
4344
import androidx.compose.ui.layout.onGloballyPositioned
4445
import androidx.compose.ui.platform.LocalContext
4546
import androidx.compose.ui.platform.LocalDensity
@@ -69,12 +70,14 @@ import app.simple.peri.viewmodels.ComposeWallpaperViewModel
6970
import com.bumptech.glide.integration.compose.CrossFade
7071
import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
7172
import com.bumptech.glide.integration.compose.GlideImage
73+
import com.kyant.liquidglass.GlassStyle
74+
import com.kyant.liquidglass.liquidGlass
7275
import com.kyant.liquidglass.liquidGlassProvider
76+
import com.kyant.liquidglass.material.GlassMaterial
77+
import com.kyant.liquidglass.refraction.InnerRefraction
78+
import com.kyant.liquidglass.refraction.RefractionAmount
79+
import com.kyant.liquidglass.refraction.RefractionHeight
7380
import com.kyant.liquidglass.rememberLiquidGlassProviderState
74-
import dev.chrisbanes.haze.HazeDefaults
75-
import dev.chrisbanes.haze.HazeState
76-
import dev.chrisbanes.haze.hazeEffect
77-
import dev.chrisbanes.haze.hazeSource
7881

7982
@Composable
8083
fun Folders(navController: NavController? = null) {
@@ -196,11 +199,13 @@ fun Folders(navController: NavController? = null) {
196199
@OptIn(ExperimentalGlideComposeApi::class, ExperimentalFoundationApi::class)
197200
@Composable
198201
fun FolderItem(folder: Folder, navController: NavController? = null, composeWallpaperViewModel: ComposeWallpaperViewModel, onRevoke: (Folder) -> Unit) {
199-
val hazeState = remember { HazeState() }
200202
val context = LocalContext.current
201203
var showFolderMenu by remember { mutableStateOf(false) }
202204
var showNomediaSuccess by remember { mutableStateOf(false) }
203205
var showNomediaRemoveSuccess by remember { mutableStateOf(false) }
206+
val providerState = rememberLiquidGlassProviderState(
207+
backgroundColor = Color.Transparent
208+
)
204209

205210
if (showFolderMenu) {
206211
FolderMenu(
@@ -275,7 +280,7 @@ fun FolderItem(folder: Folder, navController: NavController? = null, composeWall
275280
model = ContextFolder(folder, context = LocalContext.current.applicationContext),
276281
contentDescription = null,
277282
transition = CrossFade,
278-
modifier = Modifier.hazeSource(hazeState),
283+
modifier = Modifier.liquidGlassProvider(providerState),
279284
) {
280285
it
281286
.disallowHardwareConfig()
@@ -285,8 +290,20 @@ fun FolderItem(folder: Folder, navController: NavController? = null, composeWall
285290
modifier = Modifier
286291
.fillMaxWidth()
287292
.wrapContentHeight()
288-
.hazeEffect(state = hazeState,
289-
style = HazeDefaults.style(backgroundColor = Color(0x50000000), blurRadius = 5.dp)
293+
.liquidGlass(
294+
providerState,
295+
GlassStyle(
296+
shape = RoundedCornerShape(0.dp),
297+
innerRefraction = InnerRefraction(
298+
height = RefractionHeight(16.dp),
299+
amount = RefractionAmount((-100).dp)
300+
),
301+
material = GlassMaterial(
302+
blurRadius = 8.dp,
303+
brush = SolidColor(Color.Transparent),
304+
alpha = 0.3f
305+
)
306+
)
290307
)
291308
.align(Alignment.BottomCenter)
292309
) {

‎app/src/main/java/app/simple/peri/ui/screens/Home.kt‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ import androidx.compose.ui.Alignment
5757
import androidx.compose.ui.Modifier
5858
import androidx.compose.ui.draw.shadow
5959
import androidx.compose.ui.graphics.Color
60+
import androidx.compose.ui.graphics.SolidColor
6061
import androidx.compose.ui.graphics.graphicsLayer
6162
import androidx.compose.ui.graphics.toArgb
6263
import androidx.compose.ui.graphics.vector.ImageVector
@@ -99,6 +100,14 @@ import com.bumptech.glide.load.DataSource
99100
import com.bumptech.glide.load.engine.GlideException
100101
import com.bumptech.glide.request.RequestListener
101102
import com.bumptech.glide.request.target.Target
103+
import com.kyant.liquidglass.GlassStyle
104+
import com.kyant.liquidglass.liquidGlass
105+
import com.kyant.liquidglass.liquidGlassProvider
106+
import com.kyant.liquidglass.material.GlassMaterial
107+
import com.kyant.liquidglass.refraction.InnerRefraction
108+
import com.kyant.liquidglass.refraction.RefractionAmount
109+
import com.kyant.liquidglass.refraction.RefractionHeight
110+
import com.kyant.liquidglass.rememberLiquidGlassProviderState
102111
import dev.chrisbanes.haze.HazeDefaults
103112
import dev.chrisbanes.haze.HazeState
104113
import dev.chrisbanes.haze.hazeEffect
@@ -276,9 +285,12 @@ fun WallpaperItem(title: String, position: Int, onClick: () -> Unit, onNextWallp
276285
mutableStateOf(ContentScale.Crop)
277286
}
278287

279-
val hazeState = remember { HazeState() }
280288
val showDeleteDialog = remember { mutableStateOf(false) }
281289

290+
val providerState = rememberLiquidGlassProviderState(
291+
backgroundColor = Color.Transparent
292+
)
293+
282294
if (showDeleteDialog.value) {
283295
SureDialog(
284296
message = wallpaper?.name ?: wallpaper?.filePath ?: "",
@@ -317,7 +329,7 @@ fun WallpaperItem(title: String, position: Int, onClick: () -> Unit, onNextWallp
317329
transition = CrossFade,
318330
modifier = Modifier
319331
.fillMaxSize()
320-
.hazeSource(state = hazeState),
332+
.liquidGlassProvider(providerState),
321333
alignment = Alignment.Center,
322334
contentScale = currentScale.value,
323335
) {
@@ -372,8 +384,20 @@ fun WallpaperItem(title: String, position: Int, onClick: () -> Unit, onNextWallp
372384
modifier = Modifier
373385
.wrapContentHeight()
374386
.fillMaxWidth()
375-
.hazeEffect(state = hazeState,
376-
style = HazeDefaults.style(backgroundColor = Color(0x50000000), blurRadius = 15.dp)
387+
.liquidGlass(
388+
providerState,
389+
GlassStyle(
390+
shape = RoundedCornerShape(0.dp),
391+
innerRefraction = InnerRefraction(
392+
height = RefractionHeight(16.dp),
393+
amount = RefractionAmount((-100).dp)
394+
),
395+
material = GlassMaterial(
396+
blurRadius = 8.dp,
397+
brush = SolidColor(Color.Transparent),
398+
alpha = 0.3f
399+
)
400+
)
377401
)
378402
.align(Alignment.BottomCenter)
379403
) {

‎app/src/main/java/app/simple/peri/ui/screens/Wallhaven.kt‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import androidx.compose.ui.draw.alpha
3535
import androidx.compose.ui.draw.blur
3636
import androidx.compose.ui.draw.shadow
3737
import androidx.compose.ui.graphics.Color
38+
import androidx.compose.ui.graphics.SolidColor
3839
import androidx.compose.ui.graphics.graphicsLayer
3940
import androidx.compose.ui.layout.ContentScale
4041
import androidx.compose.ui.layout.onGloballyPositioned
@@ -76,7 +77,13 @@ import com.bumptech.glide.load.engine.GlideException
7677
import com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions.withCrossFade
7778
import com.bumptech.glide.request.RequestListener
7879
import com.bumptech.glide.request.target.Target
80+
import com.kyant.liquidglass.GlassStyle
81+
import com.kyant.liquidglass.liquidGlass
7982
import com.kyant.liquidglass.liquidGlassProvider
83+
import com.kyant.liquidglass.material.GlassMaterial
84+
import com.kyant.liquidglass.refraction.InnerRefraction
85+
import com.kyant.liquidglass.refraction.RefractionAmount
86+
import com.kyant.liquidglass.refraction.RefractionHeight
8087
import com.kyant.liquidglass.rememberLiquidGlassProviderState
8188
import dev.chrisbanes.haze.HazeDefaults
8289
import dev.chrisbanes.haze.HazeState
@@ -273,7 +280,9 @@ fun WallhavenScreen(navController: NavController? = null) {
273280
@OptIn(ExperimentalGlideComposeApi::class)
274281
@Composable
275282
fun ImageCard(wallpaper: WallhavenWallpaper, navController: NavController? = null, presetFilter: WallhavenFilter? = null) {
276-
val hazeState = remember { HazeState() }
283+
val providerState = rememberLiquidGlassProviderState(
284+
backgroundColor = Color.Transparent
285+
)
277286

278287
Box {
279288
val imageShadow = remember {
@@ -357,7 +366,7 @@ fun ImageCard(wallpaper: WallhavenWallpaper, navController: NavController? = nul
357366
contentDescription = null,
358367
transition = CrossFade,
359368
modifier = Modifier
360-
.hazeSource(hazeState)
369+
.liquidGlassProvider(providerState)
361370
.fillMaxSize(),
362371
contentScale = ContentScale.Crop
363372
) {
@@ -390,11 +399,19 @@ fun ImageCard(wallpaper: WallhavenWallpaper, navController: NavController? = nul
390399
modifier = Modifier
391400
.wrapContentHeight()
392401
.fillMaxWidth()
393-
.hazeEffect(
394-
state = hazeState,
395-
style = HazeDefaults.style(
396-
backgroundColor = Color(0x50000000),
397-
blurRadius = 5.dp
402+
.liquidGlass(
403+
providerState,
404+
GlassStyle(
405+
shape = RoundedCornerShape(0.dp),
406+
innerRefraction = InnerRefraction(
407+
height = RefractionHeight(16.dp),
408+
amount = RefractionAmount((-60).dp)
409+
),
410+
material = GlassMaterial(
411+
blurRadius = 8.dp,
412+
brush = SolidColor(Color.Transparent),
413+
alpha = 0.3f
414+
)
398415
)
399416
)
400417
.align(Alignment.BottomCenter)

0 commit comments

Comments
 (0)