Liquid Glass

Apple's Liquid Glass effect for Android Jetpack Compose.

Demos

• Playground app, Android 13 and above is required.

• Music player demo that integrates liquid bottom tabs.

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(
    backgroundColor = Color.White
)

// content behind the glass
Box(Modifier.liquidGlassProvider(providerState))

// glass
Box(
    Modifier.liquidGlass(
        providerState,
        GlassStyle(
            shape = RoundedCornerShape(16.dp),
            innerRefraction = InnerRefraction(
                height = RefractionHeight(8.dp),
                amount = RefractionAmount((-16).dp)
            ),
            material = GlassMaterial(
                blurRadius = 8.dp,
                brush = SolidColor(Color.White),
                alpha = 0.3f
            )
        )
    )
)

Tips

• The following case is not supported:

LiquidGlassProvider(providerState) {
    LiquidGlass(providerState) {}
}

Instead, you should rewrite it like this:

Box {
    LiquidGlassProvider(providerState) {}
    LiquidGlass(providerState) {}
}

• Apply the scale correctly:

Modifier
    .scale(scaleX, scaleY)
    .liquidGlass(
        // ...
        transformBlock = { scale(1f / scaleX, 1f / scaleY, Offset.Zero) }
    )

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
• Bleed

Special thanks

• GlassExplorer

Star history