96 lines
2.8 KiB
Markdown
96 lines
2.8 KiB
Markdown
# Android Liquid Glass
|
|
|
|
An Android app that simulates Apple's Liquid Glass effect, Android 13 and above is required.
|
|
|
|
Download the app [here](./app/release/app-release.apk).
|
|
|
|
|
|
|
|
## About shaders
|
|
|
|
You mustn't use the shaders in the project for commercial purposes, they are only for educational purposes.
|
|
|
|
## Library
|
|
|
|
The library is under construction, use on your own risk.
|
|
|
|
It doesn't support nested glass effects for now.
|
|
|
|
### Examples
|
|
|
|
```kotlin
|
|
val providerState = rememberLiquidGlassProviderState()
|
|
|
|
CompositionLocalProvider(
|
|
LocalLiquidGlassProviderState provides providerState
|
|
) {
|
|
Box(
|
|
Modifier
|
|
.liquidGlassProvider(providerState)
|
|
)
|
|
|
|
Box(
|
|
Modifier
|
|
.liquidGlass(
|
|
remember {
|
|
LiquidGlassStyle(
|
|
shape = CornerShape.extraLarge,
|
|
blurRadius = 8.dp,
|
|
refractionHeight = 24.dp,
|
|
refractionAmount = (-64).dp,
|
|
whitePoint = 0.25f,
|
|
chromaMultiplier = 1.5f
|
|
// ...
|
|
)
|
|
}
|
|
)
|
|
)
|
|
}
|
|
```
|
|
|
|
## Glass parameters
|
|
|
|
| Parameter | Availability | Verification |
|
|
|:-----------------------:|--------------|--------------|
|
|
| Inner refraction height | ✔️ | ✔️ |
|
|
| Inner refraction amount | ✔️ | ✔️ |
|
|
| Outer refraction height | ❌ | ❌ |
|
|
| Outer refraction amount | ❌ | ❌ |
|
|
| Bleed amount | ✔️ | ❌ |
|
|
| Bleed blur radius | ✔️ | ❌ |
|
|
| Bleed opacity | ✔️ | 🚧 |
|
|
| Blur radius | ✔️ | ❌ |
|
|
|
|
Other extensions:
|
|
|
|
- Contrast
|
|
- White point
|
|
- Chroma multiplier
|
|
- Eccentric factor
|
|
- Dispersion height (🚧)
|
|
|
|
## Comparisons
|
|
|
|
Android device: Google Pixel 4 XL (the smallest width is adjusted to 440 dp to match the density of the iOS device)
|
|
|
|
iOS device: iPhone 16 Pro Max (simulator)
|
|
|
|
Test glass area size: 300 x 300, corner radius: 30
|
|
|
|
| iOS | Android |
|
|
|:-------------------------------------------------:|:-----------------------------------------------------:|
|
|
|  |  |
|
|
|
|
Complete comparisons:
|
|
|
|
- [Inner refraction](docs/Inner%20refraction%20comparisons.md)
|
|
- [Bleed](docs/Bleed%20comparisons.md)
|
|
|
|
## Special thanks
|
|
|
|
- [GlassExplorer](https://github.com/ktiays/GlassExplorer)
|
|
|
|
## Star history
|
|
|
|
[](https://www.star-history.com/#Kyant0/AndroidLiquidGlass&Date)
|