CODEWITHSUNDEEP
androidandroid-canvasandroid-jetpack-composeandroid-blur-effect
Adhithya Kumar
Adhithya Kumar

Reputation: 123

Blurring content layered behind a card using Jetpack Compose on Android

I am trying to achieve the blur effect like highlighted in this post:

I'm using Jetpack Compose:

@Composable
fun MainApp() {
    val linearGradientBrush = Brush.linearGradient(
        colors = listOf(
            Color(0xFF5995EE),
            Color(0xFFB226E1),
            Color(0xFFE28548)
        ),
        start = Offset(Float.POSITIVE_INFINITY, 0f),
        end = Offset(0f, Float.POSITIVE_INFINITY),
    )

    val transparentGradientBrush = Brush.linearGradient(
        colors = listOf(
            Color(0x66FFFFFF),
            Color(0x1AFFFFFF)
        )
    )
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box() {
            Card(
                modifier = Modifier
                    .size(150.dp)
//                    .blur(10.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
                    .clip(shape = CircleShape)

                    .background(linearGradientBrush),

                backgroundColor = Color.Transparent,
                elevation = 0.dp,
            ) {
            }

            Card(
                modifier = Modifier
                    .size(150.dp)
                    .offset(x = -75.dp, y = 40.dp)
                    .blur(5.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
                    .clip(RoundedCornerShape(30.dp))
                    .background(transparentGradientBrush),
                backgroundColor = Color.Transparent,
                elevation = 0.dp
            ) {

            }
        }

    }
}

However, the output I get is this:

How do I achieve the effect from the tweet above the layer in front also blurs the layer behind? Is there a way to achieve this?

Upvotes: 12

Views: 10256

Answers (1)

x3rocode
x3rocode

Reputation: 105

https://github.com/x3rocode/xblur-compose/tree/main

I made simple realtime compose blur!
try this.

xblur

Upvotes: 0

Related Questions