2025-09-08 19:37:56 +08:00
2025-09-08 19:37:56 +08:00
2025-09-05 15:28:12 +08:00
2025-09-08 19:37:56 +08:00
2025-06-18 18:15:41 +08:00
2025-07-18 10:23:37 +08:00
2025-07-18 10:06:41 +08:00
2025-07-18 10:06:41 +08:00
2025-06-18 18:15:41 +08:00
2025-09-08 19:37:56 +08:00

Liquid Glass

Apple's Liquid Glass effect for Android Jetpack Compose.

Demos

Screenshots of a music player demo

Library

⚠️ The library is in alpha stage, every API may be changed, use it on your own risk.

Add to project

JitPack Release

// 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),
            innerRefraction = InnerRefraction(
                height = RefractionHeight(8f.dp),
                amount = RefractionAmount((-16f).dp),
                depthEffect = 0f // or `1f` to have more 3D effect
            ),
            material = GlassMaterial(
                blurRadius = 2f.dp,
                brush = SolidColor(Color.White),
                alpha = 0.3f
            )
        )
    )
)

Using the block variant to improve performance when the style changes frequently:

var 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
            )
        )
    }
)

Tips

  • You should not nest LiquidGlassProvider and LiquidGlass:
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

Star history chart

S
Description
Compose Multiplatform Liquid Glass effect
Readme
233 MiB
0 Stars 1 Watchers 0 Forks
Languages
Kotlin 94.6%
DM 5.1%
Swift 0.3%