↓ Skip to main content
Chris Banes
Compose has progressive blur. Do you still need Haze?

Compose has progressive blur. Do you still need Haze?

·650 words·4 mins
Table of Contents

I’ve had a few people ping me about the new progressive blur API in Compose 1.13.0-alpha03, and how it relates to Haze.

Maher shared this example of the new API in action:

It’s great to see Compose add UI features like this. The distinction from Haze’s main use case is which content gets blurred: it blurs the composable’s own content, not whatever is behind it.

Foreground versus backdrop blur
#

Progressive blur means that the blur radius varies across the content. An image might start sharp at the top and become increasingly blurred towards the bottom. The new API lets you describe that variation, but the input is still the content of the composable you apply it to.

Image(
    painter = painter,
    contentDescription = null,
    modifier = Modifier.blur(
        BlurRadiusSpec.verticalGradient(startRadius = 0.dp, endRadius = 24.dp),
    ),
)

This blurs the image’s own pixels from sharp at the top to a 24.dp blur radius at the bottom. Progressive blur requires Android 13 (API 33) or newer; on older versions, this modifier leaves the image unblurred.

So putting it on a toolbar gives you that frosted-glass background, right?

Unfortunately, no. It blurs the toolbar’s own content. A frosted toolbar needs to blur the list, image, or other content behind it, while keeping its text and icons sharp. That’s backdrop (or background) blurring, and it’s the problem I built Haze to solve.

Here’s an example from the Haze docs: the photos blur as they scroll behind the app bar, while its title stays sharp.

How it compares with Haze
#

Haze does support foreground blurring too, so there is some overlap. It just isn’t Haze’s primary feature. Most of the work in Haze is about getting the right background content into the effect: recording it, tracking where it is, and drawing it in the right place.

Haze also adds configurable noise and tint, along with support for older Android versions. That includes progressive-blur fallbacks on Android 12 and 12L, and experimental, opt-in blurring on Android 11 and below. Those older devices use a translucent overlay by default, and enabling blur comes with performance trade-offs.

I’ve also built on that infrastructure with Haze’s experimental Glass effect, which combines blur with refraction, tint, and highlights to create a glass-like material.

The progressive blur itself uses the same underlying technique on Android: a RenderEffect backed by shaders. Both Compose and Haze use horizontal and vertical shader passes to vary the blur across the input. The implementation details differ, but both use the same approach. The distinction is which pixels you’re feeding into it.

Can the Compose team add backdrop blurring?
#

Android 17 QPR 2 (SDK 37.2) adds RenderNode.setBackdropRenderEffect, which does apply an effect to content drawn behind a node. This is exactly what backdrop blurring needs. Compose could build on that, but it would only work on devices running that Android version or newer. Updating your Compose dependency won’t bring the platform API to devices on older Android versions.

For those devices, the Compose team could take the same approach I use in Haze: capture background content into graphics layers, track its position relative to the effect, and feed those pixels into the blur. That would mean taking on the background-content plumbing as well as the shader work.

I’ve been testing the new platform API through Haze’s new experimental native backdrop path. In our early benchmark results, it had higher CPU frame times than Haze’s existing source-based path for changing-content blur and every Glass workload we tested. Haze’s existing path has accumulated optimisations to avoid unnecessary work, so using the native API isn’t automatically a performance win.

Do you still need Haze?
#

For progressive blur on a composable’s own content, Compose provides it directly. For backdrop effects, Haze handles capturing and positioning the content behind them.