blur

Modifier in Compose Ui

Draw content blurred with the specified radii. Note this effect is only supported on Android 12 and above. Attempts to use this Modifier on older Android versions will be ignored.

Usage of this API renders the corresponding composable into a separate graphics layer. Because the blurred content renders a larger area by the blur radius, this layer is explicitly clipped to the content bounds. It is recommended introduce additional space around the drawn content by the specified blur radius to remain within the content bounds.

Last updated: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.8.0-alpha01")
}

Overloads

@Stable
fun Modifier.blur(
    radiusX: Dp,
    radiusY: Dp,
    edgeTreatment: BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle,
): Modifier

Parameters

name	description
radiusX	Radius of the blur along the x axis
radiusY	Radius of the blur along the y axis
edgeTreatment	Strategy used to render pixels outside of bounds of the original input

@Stable
fun Modifier.blur(
    radius: Dp,
    edgeTreatment: BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle
)

Parameters

name	description
radius	Radius of the blur along both the x and y axis
edgeTreatment	Strategy used to render pixels outside of bounds of the original input

Code Examples

BlurSample

@Composable
fun BlurSample() {
    Box(
        Modifier.size(300.dp)
            // Blur content allowing the result to extend beyond the bounds of the original content
            .blur(30.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
            .background(Color.Red, CircleShape)
    )
}

ImageBlurSample

@Composable
fun ImageBlurSample() {
    Image(
        painter = painterResource(R.drawable.circus),
        contentDescription = "sample blurred image",
        // Blur content within the original bounds, clipping the result to a rounded rectangle
        modifier = Modifier.blur(30.dp, BlurredEdgeTreatment(RoundedCornerShape(5.dp)))
    )
}