Skip to content

liquid glass #231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hamza417 wants to merge 6 commits into
base: master
Choose a base branch
from
Open

liquid glass #231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5e52373
add: liquid glass effect on wallpaper details panel
Hamza417 Jul 28, 2025
39d1bc9
add: liquid glass effect on bottom header
Hamza417 Jul 28, 2025
a9f2bd6
add: liquid glass effect on wallpaper card
Hamza417 Jul 28, 2025
41c4da7
add: liquid glass effect on selecion menu
Hamza417 Jul 28, 2025
ffc2cb2
update: tweak values for optimal effect
Hamza417 Jul 28, 2025
18aae7b
Merge branch 'master' of https://github.com/Hamza417/Peristyle into l…
Hamza417 Jul 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .idea/deploymentTargetSelector.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions app/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ android {

kotlinOptions {
jvmTarget = JavaVersion.VERSION_17
freeCompilerArgs += ["-Xskip-prerelease-check"]
}

flavorDimensions.add("default")
Expand Down Expand Up @@ -199,6 +200,7 @@ dependencies {
implementation 'dev.chrisbanes.haze:haze-materials:1.6.9'
implementation 'com.squareup.retrofit2:retrofit:3.0.0'
implementation "com.squareup.retrofit2:converter-gson:2.9.0"
implementation 'com.github.Kyant0:AndroidLiquidGlass:530bed05f8'

testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.2.1'
Expand Down
33 changes: 25 additions & 8 deletions app/src/main/java/app/simple/peri/ui/commons/Header.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Schedule
import androidx.compose.material.icons.rounded.Search
Expand All @@ -21,6 +22,8 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
Expand All @@ -33,10 +36,13 @@ import androidx.navigation.NavController
import app.simple.peri.R
import app.simple.peri.ui.dialogs.autowallpaper.AutoWallpaperPageSelectionDialog
import app.simple.peri.ui.nav.Routes
import dev.chrisbanes.haze.HazeState
import dev.chrisbanes.haze.hazeEffect
import com.kyant.liquidglass.GlassStyle
import com.kyant.liquidglass.LiquidGlassProviderState
import com.kyant.liquidglass.liquidGlass
import com.kyant.liquidglass.refraction.InnerRefraction
import com.kyant.liquidglass.refraction.RefractionAmount
import com.kyant.liquidglass.refraction.RefractionHeight
import dev.chrisbanes.haze.materials.ExperimentalHazeMaterialsApi
import dev.chrisbanes.haze.materials.HazeMaterials

val COMMON_PADDING = 16.dp

Expand Down Expand Up @@ -154,8 +160,8 @@ fun BottomHeader(title: String,
isSearch: Boolean = false,
isAutoWallpaper: Boolean = false,
onSearch: (() -> Unit)? = null,
hazeState: HazeState,
navigationBarHeight: Dp
navigationBarHeight: Dp,
providerState: LiquidGlassProviderState? = null
) {

val context = LocalContext.current
Expand Down Expand Up @@ -193,9 +199,20 @@ fun BottomHeader(title: String,
.shadow(elevation = 24.dp,
spotColor = MaterialTheme.colorScheme.onSurfaceVariant,
ambientColor = MaterialTheme.colorScheme.surfaceVariant)
.hazeEffect(
state = hazeState,
style = HazeMaterials.regular()
.liquidGlass(
providerState!!,
GlassStyle(
shape = RoundedCornerShape(0.dp),
innerRefraction = InnerRefraction(
height = RefractionHeight(8.dp),
amount = RefractionAmount((-50).dp)
),
material = com.kyant.liquidglass.material.GlassMaterial(
blurRadius = 8.dp,
brush = SolidColor(Color.Transparent),
alpha = 0.3f
)
)
),
) {
HorizontalDivider(
Expand Down
57 changes: 42 additions & 15 deletions app/src/main/java/app/simple/peri/ui/commons/WallpaperListCommons.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
Expand Down Expand Up @@ -86,12 +87,16 @@ import com.bumptech.glide.load.engine.GlideException
import com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions.withCrossFade
import com.bumptech.glide.request.RequestListener
import com.bumptech.glide.request.target.Target
import dev.chrisbanes.haze.HazeDefaults
import dev.chrisbanes.haze.HazeState
import dev.chrisbanes.haze.hazeEffect
import dev.chrisbanes.haze.hazeSource
import com.kyant.liquidglass.GlassStyle
import com.kyant.liquidglass.LiquidGlassProviderState
import com.kyant.liquidglass.liquidGlass
import com.kyant.liquidglass.liquidGlassProvider
import com.kyant.liquidglass.material.GlassMaterial
import com.kyant.liquidglass.refraction.InnerRefraction
import com.kyant.liquidglass.refraction.RefractionAmount
import com.kyant.liquidglass.refraction.RefractionHeight
import com.kyant.liquidglass.rememberLiquidGlassProviderState
import dev.chrisbanes.haze.materials.ExperimentalHazeMaterialsApi
import dev.chrisbanes.haze.materials.HazeMaterials

@OptIn(ExperimentalGlideComposeApi::class, ExperimentalFoundationApi::class)
@Composable
Expand All @@ -105,7 +110,9 @@ fun WallpaperItem(
wallpaperListViewModel: WallpaperListViewModel,
list: List<Wallpaper>
) {
val hazeState = remember { HazeState() }
val providerState = rememberLiquidGlassProviderState(
backgroundColor = Color.Transparent
)
var showDialog by remember { mutableStateOf(false) }
var isSelected by remember { mutableStateOf(wallpaper.isSelected) }
val showTagDialog = remember { mutableStateOf(false) }
Expand Down Expand Up @@ -246,7 +253,7 @@ fun WallpaperItem(
contentDescription = null,
transition = CrossFade,
modifier = Modifier
.hazeSource(hazeState)
.liquidGlassProvider(providerState)
.fillMaxSize(),
contentScale = ContentScale.Crop
) {
Expand Down Expand Up @@ -279,11 +286,19 @@ fun WallpaperItem(
modifier = Modifier
.wrapContentHeight()
.fillMaxWidth()
.hazeEffect(
state = hazeState,
style = HazeDefaults.style(
backgroundColor = Color(0x50000000),
blurRadius = 5.dp
.liquidGlass(
providerState,
GlassStyle(
shape = RoundedCornerShape(0.dp),
innerRefraction = InnerRefraction(
height = RefractionHeight(8.dp),
amount = RefractionAmount((-50).dp)
),
material = GlassMaterial(
blurRadius = 8.dp,
brush = SolidColor(Color.Black),
alpha = 0.3f
)
)
)
.align(Alignment.BottomCenter)
Expand Down Expand Up @@ -404,7 +419,7 @@ fun SelectionMenu(
modifier: Modifier = Modifier,
selectedWallpapers: List<Wallpaper>,
count: Int = selectedWallpapers.count { it.isSelected },
hazeState: HazeState,
providerState: LiquidGlassProviderState,
wallpaperListViewModel: WallpaperListViewModel,
navigationBarHeight: Dp
) {
Expand Down Expand Up @@ -469,8 +484,20 @@ fun SelectionMenu(
.padding(16.dp)
.padding(bottom = navigationBarHeight)
.clip(RoundedCornerShape(16.dp))
.hazeEffect(state = hazeState,
style = HazeMaterials.thin()
.liquidGlass(
providerState,
GlassStyle(
shape = RoundedCornerShape(16.dp),
innerRefraction = InnerRefraction(
height = RefractionHeight(8.dp),
amount = RefractionAmount((-50).dp)
),
material = GlassMaterial(
blurRadius = 8.dp,
brush = SolidColor(Color.Transparent),
alpha = 0.3f
)
)
),
colors = CardDefaults.cardColors(
containerColor = Color.Transparent,
Expand Down
44 changes: 33 additions & 11 deletions app/src/main/java/app/simple/peri/ui/screens/Folders.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalDensity
Expand Down Expand Up @@ -69,10 +70,14 @@ import app.simple.peri.viewmodels.ComposeWallpaperViewModel
import com.bumptech.glide.integration.compose.CrossFade
import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
import com.bumptech.glide.integration.compose.GlideImage
import dev.chrisbanes.haze.HazeDefaults
import dev.chrisbanes.haze.HazeState
import dev.chrisbanes.haze.hazeEffect
import dev.chrisbanes.haze.hazeSource
import com.kyant.liquidglass.GlassStyle
import com.kyant.liquidglass.liquidGlass
import com.kyant.liquidglass.liquidGlassProvider
import com.kyant.liquidglass.material.GlassMaterial
import com.kyant.liquidglass.refraction.InnerRefraction
import com.kyant.liquidglass.refraction.RefractionAmount
import com.kyant.liquidglass.refraction.RefractionHeight
import com.kyant.liquidglass.rememberLiquidGlassProviderState

@Composable
fun Folders(navController: NavController? = null) {
Expand All @@ -81,7 +86,6 @@ fun Folders(navController: NavController? = null) {
var requestPermission by remember { mutableStateOf(false) }
var statusBarHeight by remember { mutableIntStateOf(0) }
var navigationBarHeight by remember { mutableIntStateOf(0) }
val hazeState = remember { HazeState() }

statusBarHeight = WindowInsetsCompat.toWindowInsetsCompat(
LocalView.current.rootWindowInsets
Expand All @@ -103,6 +107,10 @@ fun Folders(navController: NavController? = null) {
navigationBarHeightDp
}

val providerState = rememberLiquidGlassProviderState(
backgroundColor = Color.Transparent
)

if (requestPermission) {
FolderBrowser(
onCancel = { requestPermission = false },
Expand All @@ -119,7 +127,7 @@ fun Folders(navController: NavController? = null) {
columns = StaggeredGridCells.Fixed(2),
modifier = Modifier
.fillMaxSize()
.hazeSource(state = hazeState),
.liquidGlassProvider(providerState),
contentPadding = PaddingValues(
top = topPadding,
start = 8.dp,
Expand Down Expand Up @@ -181,8 +189,8 @@ fun Folders(navController: NavController? = null) {
bottomHeaderHeight = with(density) { it.size.height.toDp() }
},
navController = navController,
hazeState = hazeState,
navigationBarHeight = navigationBarHeightDp,
providerState = providerState
)
}
}
Expand All @@ -191,11 +199,13 @@ fun Folders(navController: NavController? = null) {
@OptIn(ExperimentalGlideComposeApi::class, ExperimentalFoundationApi::class)
@Composable
fun FolderItem(folder: Folder, navController: NavController? = null, composeWallpaperViewModel: ComposeWallpaperViewModel, onRevoke: (Folder) -> Unit) {
val hazeState = remember { HazeState() }
val context = LocalContext.current
var showFolderMenu by remember { mutableStateOf(false) }
var showNomediaSuccess by remember { mutableStateOf(false) }
var showNomediaRemoveSuccess by remember { mutableStateOf(false) }
val providerState = rememberLiquidGlassProviderState(
backgroundColor = Color.Transparent
)

if (showFolderMenu) {
FolderMenu(
Expand Down Expand Up @@ -270,7 +280,7 @@ fun FolderItem(folder: Folder, navController: NavController? = null, composeWall
model = ContextFolder(folder, context = LocalContext.current.applicationContext),
contentDescription = null,
transition = CrossFade,
modifier = Modifier.hazeSource(hazeState),
modifier = Modifier.liquidGlassProvider(providerState),
) {
it
.disallowHardwareConfig()
Expand All @@ -280,8 +290,20 @@ fun FolderItem(folder: Folder, navController: NavController? = null, composeWall
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.hazeEffect(state = hazeState,
style = HazeDefaults.style(backgroundColor = Color(0x50000000), blurRadius = 5.dp)
.liquidGlass(
providerState,
GlassStyle(
shape = RoundedCornerShape(0.dp),
innerRefraction = InnerRefraction(
height = RefractionHeight(8.dp),
amount = RefractionAmount((-50).dp)
),
material = GlassMaterial(
blurRadius = 8.dp,
brush = SolidColor(Color.Transparent),
alpha = 0.3f
)
)
)
.align(Alignment.BottomCenter)
) {
Expand Down
36 changes: 28 additions & 8 deletions app/src/main/java/app/simple/peri/ui/screens/Home.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.graphics.vector.ImageVector
Expand Down Expand Up @@ -99,10 +100,14 @@ import com.bumptech.glide.load.DataSource
import com.bumptech.glide.load.engine.GlideException
import com.bumptech.glide.request.RequestListener
import com.bumptech.glide.request.target.Target
import dev.chrisbanes.haze.HazeDefaults
import dev.chrisbanes.haze.HazeState
import dev.chrisbanes.haze.hazeEffect
import dev.chrisbanes.haze.hazeSource
import com.kyant.liquidglass.GlassStyle
import com.kyant.liquidglass.liquidGlass
import com.kyant.liquidglass.liquidGlassProvider
import com.kyant.liquidglass.material.GlassMaterial
import com.kyant.liquidglass.refraction.InnerRefraction
import com.kyant.liquidglass.refraction.RefractionAmount
import com.kyant.liquidglass.refraction.RefractionHeight
import com.kyant.liquidglass.rememberLiquidGlassProviderState
import kotlin.math.absoluteValue

val displayDimension = DisplayDimension(1080, 1920)
Expand Down Expand Up @@ -276,9 +281,12 @@ fun WallpaperItem(title: String, position: Int, onClick: () -> Unit, onNextWallp
mutableStateOf(ContentScale.Crop)
}

val hazeState = remember { HazeState() }
val showDeleteDialog = remember { mutableStateOf(false) }

val providerState = rememberLiquidGlassProviderState(
backgroundColor = Color.Transparent
)

if (showDeleteDialog.value) {
SureDialog(
message = wallpaper?.name ?: wallpaper?.filePath ?: "",
Expand Down Expand Up @@ -317,7 +325,7 @@ fun WallpaperItem(title: String, position: Int, onClick: () -> Unit, onNextWallp
transition = CrossFade,
modifier = Modifier
.fillMaxSize()
.hazeSource(state = hazeState),
.liquidGlassProvider(providerState),
alignment = Alignment.Center,
contentScale = currentScale.value,
) {
Expand Down Expand Up @@ -372,8 +380,20 @@ fun WallpaperItem(title: String, position: Int, onClick: () -> Unit, onNextWallp
modifier = Modifier
.wrapContentHeight()
.fillMaxWidth()
.hazeEffect(state = hazeState,
style = HazeDefaults.style(backgroundColor = Color(0x50000000), blurRadius = 15.dp)
.liquidGlass(
providerState,
GlassStyle(
shape = RoundedCornerShape(0.dp),
innerRefraction = InnerRefraction(
height = RefractionHeight(8.dp),
amount = RefractionAmount((-50).dp)
),
material = GlassMaterial(
blurRadius = 8.dp,
brush = SolidColor(Color.Transparent),
alpha = 0.3f
)
)
)
.align(Alignment.BottomCenter)
) {
Expand Down
Loading