e9da3e92380fbc5e5b1adfe75b438b482594942b
Liquid Glass
Apple's Liquid Glass effect for Android Jetpack Compose.
Demos
- Playground app, Android 13 and above is required.
Library
⚠️ The library is in alpha stage, every API may be changed, use it on your own risk.
Add to project
// settings.gradle.kts in root project
dependencyResolutionManagement {
repositories {
maven("https://jitpack.io")
}
}
// build.gradle.kts in module
implementation("com.github.Kyant0:AndroidLiquidGlass:<version>")
Examples
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:
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
)
)
}
)
Tips
- You should not nest
LiquidGlassProviderandLiquidGlass:
LiquidGlassProvider(providerState) {
LiquidGlass(providerState) {}
}
Instead, use a parent layout:
Box {
LiquidGlassProvider(providerState) {}
LiquidGlass(providerState) {}
}
- Apply the scale correctly:
Modifier
.scale(scaleX, scaleY)
.liquidGlass(
// `pivot = Offset.Zero` is required
transformBlock = { scale(1f / scaleX, 1f / scaleY, Offset.Zero) }
)
Comparing with iOS
iOS device: iPhone 16 Pro Max (emulator), using GlassExplorer
Android device: Google Pixel 4 XL (the smallest width is adjusted to 440 dp to match the density of the iOS device)
Glass size: 300 x 300, corner radius: 30
| iOS | Android |
|---|---|
![]() |
![]() |
Complete comparisons:
Star history
Languages
Kotlin
94.6%
DM
5.1%
Swift
0.3%


