glassmorphism-compose

Adds glassmorphism effects to user interfaces by utilizing blur effects for content. Implements blurred backgrounds and integrates seamlessly with overlapping user interface elements.

Android JVMJVMKotlin/NativeWasmJS
GitHub stars0
Authorsneilyich
Dependents0
LicenseMIT License
Creation date10 months ago

Last activity9 months ago
Latest release1.0.0 (9 months ago)

glassmorphism-compose

Maven Central

This library provides glassmorphism effect for Jetpack Compose. It uses androidx.compose.ui.graphics.BlurEffect to create blur under the hood.

Examples

List Items Bottom Sheet Top Bar

Usage

Box(Modifier.fillMaxSize()) {

    // create instance of BlurHolder (used to connect background content with overlapping content)
    val blurHolder = rememberBlurHolder()

    ExampleBackgroundContent(
        modifier = Modifier
            .fillMaxSize()
            // Use blurredContent to indicate that content of this Composable must be blurred where it is overlapped
            .blurredContent(blurHolder),
    )

    ExampleDialog(
        modifier = Modifier
            .align(Alignment.Center)
            .size(200.dp)
            // Use blurredBackground for an overlapping Composable to make its background blurred
            .blurredBackground(
                blurHolder = blurHolder,
                blurRadius = 24.dp,
                tintColor = Color.Black.copy(alpha = 0.25f),
                shape = RoundedCornerShape(16.dp),
            ),
    )
}

You can find more examples of usage here.

Download

Maven Central

repositories {
    mavenCentral()
}

dependencies {
    implementation("io.github.neilyich:glassmorphism-compose:<version>")
}
Android JVMJVMKotlin/NativeWasmJS
GitHub stars0
Authorsneilyich
Dependents0
LicenseMIT License
Creation date10 months ago

Last activity9 months ago
Latest release1.0.0 (9 months ago)

glassmorphism-compose

Maven Central

This library provides glassmorphism effect for Jetpack Compose. It uses androidx.compose.ui.graphics.BlurEffect to create blur under the hood.

Examples

List Items Bottom Sheet Top Bar

Usage

Box(Modifier.fillMaxSize()) {

    // create instance of BlurHolder (used to connect background content with overlapping content)
    val blurHolder = rememberBlurHolder()

    ExampleBackgroundContent(
        modifier = Modifier
            .fillMaxSize()
            // Use blurredContent to indicate that content of this Composable must be blurred where it is overlapped
            .blurredContent(blurHolder),
    )

    ExampleDialog(
        modifier = Modifier
            .align(Alignment.Center)
            .size(200.dp)
            // Use blurredBackground for an overlapping Composable to make its background blurred
            .blurredBackground(
                blurHolder = blurHolder,
                blurRadius = 24.dp,
                tintColor = Color.Black.copy(alpha = 0.25f),
                shape = RoundedCornerShape(16.dp),
            ),
    )
}

You can find more examples of usage here.

Download

Maven Central

repositories {
    mavenCentral()
}

dependencies {
    implementation("io.github.neilyich:glassmorphism-compose:<version>")
}