ssbg04/AndroidLiquidGlass
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move previous docs to legacy docs

Browse Source
This commit is contained in:
Kyant0 committed 2025-09-16 15:01:58 +08:00
1 parent f190d314a8
commit 5313ad8939
3 files changed
+108 -169
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.idea/dictionaries/project.xml
Generated
+7
View File
@@ -0,0 +1,7 @@
<component name="ProjectDictionaryState">
<dictionary name="project">
<words>
<w>agsl</w>
</words>
</dictionary>
</component>
README.md
+3 -169
View File
@@ -18,179 +18,13 @@ Apple's Liquid Glass effect for Android Jetpack Compose.
⚠️ The library is in alpha stage, every API may be changed, use it on your own risk. ⚠️ The library is in alpha stage, every API may be changed, use it on your own risk.
### Add to project ### Docs
[![JitPack Release](https://jitpack.io/v/Kyant0/AndroidLiquidGlass.svg)](https://jitpack.io/#Kyant0/AndroidLiquidGlass) [![JitPack Release](https://jitpack.io/v/Kyant0/AndroidLiquidGlass.svg)](https://jitpack.io/#Kyant0/AndroidLiquidGlass)
```kotlin [1.0.0-alpha10](https://kyant.gitbook.io/backdrop)
// settings.gradle.kts in root project
dependencyResolutionManagement {
repositories {
maven("https://jitpack.io")
}
}
// build.gradle.kts in module [before 1.0.0-alpha09](docs/LegacyDocs.md)
implementation("com.github.Kyant0:AndroidLiquidGlass:<version>")
```
### Examples
### After 1.0.0-alpha10
See [docs](https://kyant.gitbook.io/backdrop/hello-glass).
### 1.0.0-alpha09
#### Basic example
```kotlin
val backdrop = rememberLayerBackdrop(backgroundColor = Color.White)
Box {
// backdrop content used to fill the backdrop layer
Box(Modifier.backdrop(backdrop))
// icon button with glass effect
Box(
Modifier
// [optional] drop shadow effect
.backdropShadow(CircleShape)
// draw the backdrop with glass effect
.drawBackdrop(backdrop) {
// set the shape
shape = CircleShape
// apply visual effects
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
saturation()
blur(2f.dp)
// here is the glass effect
refraction(height = 8f.dp.toPx(), amount = size.minDimension)
}
// [optional] draw a brilliant highlight
drawHighlight()
}
.clickable {}
.size(48.dp),
contentAlignment = Alignment.Center
) {}
}
```
#### Advanced example
```kotlin
val backdrop = rememberLayerBackdrop(backgroundColor = Color.White)
Box {
// backdrop content used to fill the backdrop layer
Box(Modifier.backdrop(backdrop))
// [optional] scale if needed
val originalScale = 1f
// icon button with glass effect
Box(
Modifier
// [optional] scale if needed
.graphicsLayer {
scaleX = originalScale
scaleY = originalScale
}
// [optional] drop shadow effect
.backdropShadow(CircleShape)
// draw the backdrop with glass effect
.drawBackdrop(backdrop) {
// set the shape
shape = CircleShape
// apply visual effects
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
saturation()
blur(2f.dp)
// here is the glass effect with dispersion
refractionWithDispersion(height = 8f.dp.toPx(), amount = size.minDimension)
}
// [optional] draw custom content on the backdrop layer
onDrawBackdrop { drawBackdrop ->
// apply the inverse scale to the backdrop content
scale(1f / originalScale, 1f / originalScale, Offset.Zero) {
drawBackdrop()
}
}
// [optional] draw a scrim with a brilliant highlight
onDrawSurfaceWithHighlight { drawRect(Color.White.copy(alpha = 0.3f)) }
}
.clickable {}
.size(48.dp),
contentAlignment = Alignment.Center
) {}
}
```
### Before 1.0.0-alpha09 (exclusive)
```kotlin
val providerState = rememberLiquidGlassProviderState(
// if the providing content has any transparent area and there is a background behind the content, set the
// background color here, or set it to null
backgroundColor = Color.White
)
// the content behind the glass
Box(Modifier.liquidGlassProvider(providerState))
// glass
Box(
Modifier.liquidGlass(
providerState,
GlassStyle(
shape = RoundedCornerShape(16f.dp),
// you can customize more properties
innerRefraction = InnerRefraction(
height = RefractionHeight(8f.dp),
amount = RefractionAmount((-16f).dp),
depthEffect = 0f // or `1f` to have more 3D effect
),
dispersion = Dispersion.None, // or `Dispersion.Automatic` to enable dispersion effect
material = GlassMaterial(
blurRadius = 2f.dp,
brush = SolidColor(Color.White),
alpha = 0.3f
),
highlight = GlassHighlight.Default,
shadow = GlassShadow.Default // or `null` to disable shadow
)
)
)
```
Use the block modifier variant to improve performance when the style changes frequently:
```kotlin
val progress by animateFloatAsState(if (isPressed) 1f else 0f)
Box(
Modifier.liquidGlass(providerState) {
GlassStyle(
shape = RoundedCornerShape(16f.dp),
innerRefraction = InnerRefraction(
height = RefractionHeight(8f.dp * progress),
amount = RefractionAmount((-16f).dp * progress)
),
material = GlassMaterial(
blurRadius = 2f.dp * progress,
brush = SolidColor(Color.White),
alpha = 0.3f * progress
)
)
}
)
```
## Comparing with iOS ## Comparing with iOS
docs/LegacyDocs.md
+98
View File
@@ -0,0 +1,98 @@
# Legacy Documentation
## 1.0.0-alpha09
```kotlin
val backdrop = rememberLayerBackdrop(backgroundColor = Color.White)
Box {
// backdrop content used to fill the backdrop layer
Box(Modifier.backdrop(backdrop))
// icon button with glass effect
Box(
Modifier
// [optional] drop shadow effect
.backdropShadow(CircleShape)
// draw the backdrop with glass effect
.drawBackdrop(backdrop) {
// set the shape
shape = CircleShape
// apply visual effects
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
saturation()
blur(2f.dp)
// here is the glass effect
refraction(height = 8f.dp.toPx(), amount = size.minDimension)
}
// [optional] draw a brilliant highlight
drawHighlight()
}
.clickable {}
.size(48.dp),
contentAlignment = Alignment.Center
) {}
}
```
## Before 1.0.0-alpha09 (exclusive)
```kotlin
val providerState = rememberLiquidGlassProviderState(
// if the providing content has any transparent area and there is a background behind the content, set the
// background color here, or set it to null
backgroundColor = Color.White
)
// the content behind the glass
Box(Modifier.liquidGlassProvider(providerState))
// glass
Box(
Modifier.liquidGlass(
providerState,
GlassStyle(
shape = RoundedCornerShape(16f.dp),
// you can customize more properties
innerRefraction = InnerRefraction(
height = RefractionHeight(8f.dp),
amount = RefractionAmount((-16f).dp),
depthEffect = 0f // or `1f` to have more 3D effect
),
dispersion = Dispersion.None, // or `Dispersion.Automatic` to enable dispersion effect
material = GlassMaterial(
blurRadius = 2f.dp,
brush = SolidColor(Color.White),
alpha = 0.3f
),
highlight = GlassHighlight.Default,
shadow = GlassShadow.Default // or `null` to disable shadow
)
)
)
```
Use the block modifier variant to improve performance when the style changes frequently:
```kotlin
val progress by animateFloatAsState(if (isPressed) 1f else 0f)
Box(
Modifier.liquidGlass(providerState) {
GlassStyle(
shape = RoundedCornerShape(16f.dp),
innerRefraction = InnerRefraction(
height = RefractionHeight(8f.dp * progress),
amount = RefractionAmount((-16f).dp * progress)
),
material = GlassMaterial(
blurRadius = 2f.dp * progress,
brush = SolidColor(Color.White),
alpha = 0.3f * progress
)
)
}
)
```