r.android.com/3205674 will be the last change adding linux stubs to androidx.compose.material3.adaptive

For adaptive, follow along on https://issuetracker.google.com/issues/357731734

Here's a terrible, terrible hack to get the blur RenderEffect for a Compose canvas.

The hack is terrible but it appears to work. You have been warned.

https://gist.github.com/tadfisher/dc908504a7189be82c8df2151ede590b

A little excited, it seems to start progress: https://android-review.googlesource.com/q/topic:compose-render-effect

Early to rejoice, render effect only for Android 12 and higher. Consider to read the Slack thread: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1629193140247600?thread_ts=1629193140.247600&cid=CJLTWPH7S

🎉🎉🎉

Nice, which version of compose will have this?

Is it android 12 only or backported? Thanks and well done!

This API is supported on Android 12 only and is a no-op for older API levels.

Blur is supported as a Modifier API and common usage would look like the following:

Box(modifier = Modifier.size(100.dp).blur(30.dp)) {
   // child composable
}

It's already been released with Compose 1.1.0-alpha03

is it supported in android < 12

I think this question should be reopened? It doesn't support versions below Android S, as a non-system ui framework, this is very disappointing.

And Kotlin Multiplatform info should be great too

The Blur Modifier in compose currently only supports the API 31, hence it is of no use. I tried to create a blur Modifier by first drawing the content on the bitmap canvus and the blur it and draw it on target canvus. but it seems compose does expose the draw(canvus) like in ViewWorld. Currently I looked the docs of Test ScreenShot, Magnifier but both of these use onGloballyPositioned to capture the piece of bitmap from LocalView. Hence it doesn't do what I intended it to do.

There is another solution that involves Creating a Blury View and then use composed to make a modifier (But I don't like this solution.). If anybody knows how to achieve it please do tell me.

To comment #48, the Blur modifier actually works on the component itself (including background modifiers). The content/siblings that are behind the component with Blur applied are not blurred. You can see this by adding both an alpha and blur modifier to a Composable, then looking at what happens to the content behind it.

On the "glassmorphism" effect, could send a link to exactly what effect do you mean?

+1

Glassmorphism would be great since it opens several UI possibilities (that right now seems only feasible for iOS). In Brazil, Android is predominant and there's a current trend among UXs to adopt glassmorphic like effects. The only thing holding us back is the implementation friction.

Plenty use cases here: https://www.behance.net/search/projects?search=glassmorphism%20redesign

Regarding comment #52 with support below API 31: No, there is no plan. My limited technical understanding are lower level changes in Android 12 that make blue possible/performant at scale, which are not available in the platform before then.

Dear Android Team,

Current design i.e Modifier.blur(50.dp) supports blur on the composable itself not underneath. But its use is too much limited. What most of the people here and elsewhere are looking for overlay blur which is not supported.

I don't think it is a too hard to even comprehend kind of request. If you guys believe it is. Kindly give us a response of why it is that hard to implemented a overlay blur.

Android 12 introduced support for RenderEffects including blurring, even though out-of-the-box it would blur the View itself, and not any content underneath it — so it's not a backdrop blur (in CSS terms, it's like filter: blur() and not backdrop-filter: blur()).

However, internally, Views are backed by RenderNodes, which ultimately apply RenderEffects. By leveraging RenderNodes, it's possible to implement backdrop blurring, and I've done that with Compose. Note that it's for Android 12 onwards.

For anyone interested, the implementation is at the end of the post.

Sample usage

It works in a producer–consumer manner, where the producer is any composable with Modifier.backdropContent (which feeds the composable into the Backdrop) and the consumer is any composable with Modifier.backdrop (which takes content from the specified Backdrop and draws it behind the composable, applying a RenderEffect to it). The Backdrop class thus serves to connect the producers and the consumers and it also stores the content being produced — the backdrop. You obtain an instance of Backdrop using the rememberBackdrop function.

To further simplify usage on the consumer part, I also implemented Modifier.blurredSurface, which accepts a surfaceColor, blurRadius, saturation, and a border stroke, and sets up the backdrop with the appropriate RenderEffect automatically. The following example should show a list (to be populated) and a blurred bar overlaid on top of the list.

• Note: I haven't tested the example, but the implementation works in my app.

@Composable
fun BackdropBlurDemo() {

    val backdrop = rememberBackdrop()
    val listState = rememberLazyListState()
    val showDivider = listState.canScrollForward

    Box(modifier = Modifier.fillMaxSize()) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .requiredHeight(56.dp)
                .blurredSurface(backdrop) {
                    BlurredSurfaceDefaults.parameters(
                        strokeAlpha = when {
                            showDivider -> BlurredSurfaceDefaults.DefaultStrokeAlpha
                            else -> 0f
                        },
                        strokeAlphaAnimationSpec = spring()
                    )
                }
        )

        LazyColumn(
            state = listState,
            modifier = Modifier
                .matchParentSize()
                .backdropContent(backdrop)
        ) {
            // Load some items
        }
    }
}

Implementation

Notes:

• Some imports may be missing or unordered, I joined several files to post the code here.
• The implementation depends on the artifact androidx.compose.ui:ui-util.

import android.graphics.RenderNode
import android.os.Build
import androidx.annotation.RequiresApi
import androidx.compose.animation.core.AnimationSpec
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.material3.DividerDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.*
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.layout.*
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.util.packFloats
import androidx.compose.ui.util.unpackFloat1
import androidx.compose.ui.util.unpackFloat2
import kotlin.contracts.ExperimentalContracts
import kotlin.contracts.contract
import kotlin.math.roundToInt
import kotlin.reflect.KProperty

@Immutable
data class BlurredSurfaceParameters(
    val surfaceColor: Color,
    val blurRadius: Dp,
    val saturation: Float,
    val stroke: DpStroke?
) {
    @JvmField
    internal val paint = Paint().also { paint ->
        paint.colorFilter = ColorFilter.colorMatrix(
            colorMatrix = when (val saturation = saturation) {
                1f -> {
                    MakeOpaqueColorMatrix
                }
                else -> ColorMatrix().also { colorMatrix ->
                    colorMatrix.setToSaturation(saturation)
                    colorMatrix *= MakeOpaqueColorMatrix
                }
            }
        )
    }
}

@Immutable
object BlurredSurfaceDefaults {

    const val DefaultSurfaceOpacity = 0.5f
    @JvmStatic val DefaultBlurRadius = 24.dp
    const val DefaultSaturation = 1.3f
    const val DefaultStrokeAlpha = 0.7f

    @Composable
    fun parameters(
        surfaceColor: Color = MaterialTheme.colorScheme.surface,
        surfaceOpacity: Float = DefaultSurfaceOpacity,
        blurRadius: Dp = DefaultBlurRadius,
        saturation: Float = DefaultSaturation,
        strokeAlpha: Float = DefaultStrokeAlpha,
        strokeAlphaAnimationSpec: AnimationSpec<Float>? = null,
        stroke: DpStroke? = DpStroke(
            width = DividerDefaults.Thickness,
            color = MaterialTheme.colorScheme.outlineVariant,
            parameters = StrokeParameters(
                alignment = -1f,
                alpha = when (strokeAlphaAnimationSpec) {
                    null -> strokeAlpha
                    else -> animateFloatAsState(
                        targetValue = strokeAlpha,
                        animationSpec = strokeAlphaAnimationSpec,
                        visibilityThreshold = 1f / 255f,
                        label = "blurredSurface strokeAlpha"
                    ).value
                },
                blendMode = BlendMode.Luminosity
            )
        )
    ) = BlurredSurfaceParameters(
        surfaceColor = surfaceColor.copy(alpha = surfaceOpacity),
        blurRadius = blurRadius,
        saturation = saturation,
        stroke = stroke
    )
}

fun Modifier.blurredSurface(
    backdrop: Backdrop,
    parameters: @DisallowComposableCalls @Composable () -> BlurredSurfaceParameters = {
        BlurredSurfaceDefaults.parameters()
    }
) = composed {

    val currentParameters by rememberUpdatedState(parameters())
    val currentDensity by rememberUpdatedState(LocalDensity.current)

    val background: DrawScope.() -> Unit = remember {
        { drawRect(currentParameters.surfaceColor.copy(alpha = 1f)) }
    }

    remember {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            backdrop(
                backdrop = backdrop,
                background = background,
                paint = { currentParameters.paint },
                renderEffect = {
                    with(currentDensity) {

                        val radiusPx = currentParameters.blurRadius.toPx()

                        BlurEffect(
                            radiusX = radiusPx,
                            radiusY = radiusPx,
                            edgeTreatment = TileMode.Decal
                        )
                    }
                }
            ).drawBehind {
                drawRect(currentParameters.surfaceColor)
            }
        } else {
            drawBehind(background)
        }
    }
        .stroke(currentParameters.stroke)
}

private val MakeOpaqueColorMatrix = ColorMatrix(
    floatArrayOf(
        1f, 0f, 0f, 0f, 0f,
        0f, 1f, 0f, 0f, 0f,
        0f, 0f, 1f, 0f, 0f,
        0f, 0f, 0f, 0f, 255f
    )
)

@Composable
fun rememberBackdrop(): Backdrop =
    remember { Backdrop() }

@RequiresApi(Build.VERSION_CODES.S)
fun Modifier.backdropContent(
    backdrop: Backdrop,
    paint: () -> Paint? = Backdrop.DefaultPrePaint
): Modifier {

    val paintState = derivedStateOf(structuralEqualityPolicy(), paint)

    return composed {
        remember(backdrop) {
            backdrop.ContentNode(paintState = paintState)
        }.modifier
    }
}

@RequiresApi(Build.VERSION_CODES.S)
fun Modifier.backdrop(
    backdrop: Backdrop,
    inset: Dp = 0.dp,
    background: (DrawScope.() -> Unit)? = null,
    paint: () -> Paint? = Backdrop.DefaultPostPaint,
    renderEffect: () -> RenderEffect
): Modifier {

    val paintState = derivedStateOf(structuralEqualityPolicy(), paint)
    val renderEffectState = derivedStateOf(structuralEqualityPolicy(), renderEffect)

    return composed {
        remember(backdrop) {
            BackdropNode(
                backdrop = backdrop,
                paintState = paintState,
                renderEffectState = renderEffectState,
                initialInsetDp = inset.value
            )
        }
            .also { it.background = background }
            .also { it.insetDp = inset.value }
            .modifier
    }
}

class Backdrop internal constructor() {

    @Immutable
    internal companion object {

        @JvmStatic internal val DefaultPrePaint: () -> Paint? = { null }
        @JvmStatic internal val DefaultPostPaint: () -> Paint? = { null }

        @JvmStatic private val DefaultPrePaintValue = NativePaint()
    }

    private var contentNodeHead: ContentNode? = null
    private var contentNodeTail: ContentNode? = null

    @OptIn(ExperimentalContracts::class)
    internal inline fun forEachNode(
        block: (ContentNode) -> Unit
    ) {
        contract {
            callsInPlace(block)
        }

        contentNodeHead?.forEach(block)
    }

    internal inner class ContentNode
    /**
     * Creates a [ContentNode] that is added to this [Backdrop] when remembered
     * and removed when forgotten.
     *
     * Always create inside a [remember] block.
     */
    @RequiresApi(Build.VERSION_CODES.Q)
    constructor(
        paintState: State<Paint?>
    ) :
        RememberObserver {

        @RequiresApi(Build.VERSION_CODES.Q)
        override fun onRemembered() {
            append()
        }

        override fun onForgotten() {
            remove()
        }

        override fun onAbandoned() {
            remove()
        }

        var renderNode: RenderNode? = null
            private set

        val paint by paintState

        var position by mutableOffsetStateDelegateOf(Offset.Zero)
            private set

        /**
         * The [Modifier] to be used in [backdropContent].
         */
        @RequiresApi(Build.VERSION_CODES.Q)
        @JvmField
        val modifier = Modifier
            .onPlaced { position = it.positionInRoot() }
            .drawWithContent {
                renderNode?.let { renderNode ->

                    renderNode.setUseCompositingLayer(
                        true,
                        paint?.asFrameworkPaint() ?: DefaultPrePaintValue
                    )

                    val (width, height) = size.round()
                    renderNode.setPosition(0, 0, width, height)
                    withNode(renderNode) { drawContent() }
                }
            }

        private var previous: ContentNode? = null
        private var next: ContentNode? = null

        @OptIn(ExperimentalContracts::class)
        inline fun forEach(
            block: (ContentNode) -> Unit
        ) {
            contract {
                callsInPlace(block)
            }

            var node = this

            while (true) {
                block(node)
                node = node.next ?: break
            }
        }

        @RequiresApi(Build.VERSION_CODES.Q)
        private fun append() {

            if (renderNode != null)
                return

            renderNode = RenderNode("content")

            this@Backdrop.contentNodeTail = apply {
                when (val tail = this@Backdrop.contentNodeTail) {
                    null -> {
                        contentNodeHead = this
                    }
                    else -> {
                        tail.next = this
                        this.previous = tail
                    }
                }
            }
        }

        private fun remove() {

            if (renderNode == null)
                return

            renderNode = null

            val previous = this.previous
            val next = this.next

            previous?.next = next
            next?.previous = previous

            if (this@Backdrop.contentNodeHead === this)
                this@Backdrop.contentNodeHead = next

            if (this@Backdrop.contentNodeTail === this)
                this@Backdrop.contentNodeTail = previous
        }
    }
}

@RequiresApi(Build.VERSION_CODES.S)
private class BackdropNode(
    private val backdrop: Backdrop,
    paintState: State<Paint?>,
    renderEffectState: State<RenderEffect>,
    initialBackground: (DrawScope.() -> Unit)? = null,
    initialInsetDp: Float
) {
    private var position by mutableOffsetStateDelegateOf(Offset.Zero)
    private val backdropNode = RenderNode("backdrop")

    val renderEffect by renderEffectState
    val paint by paintState
    var background by mutableStateOf(initialBackground)
    var insetDp by mutableFloatStateOf(initialInsetDp)

    /**
     * The [Modifier] to be used in [backdrop].
     */
    @JvmField
    val modifier = Modifier
        .onPlaced { position = it.positionInRoot() }
        .drawBehind {

            val backdropNode = backdropNode
            val (width, height) = size.round()
            val inset = insetDp.dp.roundToPx()

            backdropNode.setRenderEffect(renderEffect.asAndroidRenderEffect())

            backdropNode.setPosition(
                inset,
                inset,
                width - inset,
                height - inset
            )

            backdropNode.withRecording { blurCanvas ->
                backdrop.forEachNode { contentNode ->
                    contentNode.renderNode?.let { renderNode ->

                        val (sx, sy) = contentNode.position
                        val (dx, dy) = this@BackdropNode.position

                        val tx = sx - dx - inset
                        val ty = sy - dy - inset

                        blurCanvas.translate(+tx, +ty)
                        blurCanvas.drawRenderNode(renderNode)
                        blurCanvas.translate(-tx, -ty)
                    }
                }
            }

            with(drawContext.canvas.androidCanvas) {

                val saveCount = saveLayer(
                    0f,
                    0f,
                    width.toFloat(),
                    height.toFloat(),
                    paint?.asFrameworkPaint()
                )

                background?.invoke(this@drawBehind)
                drawRenderNode(backdropNode)
                restoreToCount(saveCount)
            }
        }
}

@Stable
private inline fun Size.round(): IntSize =
    IntSize(
        width = width.roundToInt(),
        height = height.roundToInt()
    )

@OptIn(ExperimentalContracts::class)
@RequiresApi(Build.VERSION_CODES.Q)
private inline fun <R> RenderNode.withRecording(
    block: (Canvas) -> R
): R {

    contract {
        callsInPlace(block, InvocationKind.EXACTLY_ONCE)
    }

    return try {
        block(beginRecording())
    } finally {
        endRecording()
    }
}

@OptIn(ExperimentalContracts::class)
@RequiresApi(Build.VERSION_CODES.Q)
private inline fun <T : DrawScope, R> T.withNode(
    renderNode: RenderNode,
    draw: T.() -> R
): R {

    contract {
        callsInPlace(draw, InvocationKind.EXACTLY_ONCE)
    }

    val composeCanvas = drawContext.canvas
    val nativeCanvas = composeCanvas.androidCanvas
    val result: R

    renderNode.withRecording { rnCanvas ->
        composeCanvas.androidCanvas = rnCanvas
        result = draw()
        composeCanvas.androidCanvas = nativeCanvas
    }

    nativeCanvas.drawRenderNode(renderNode)

    return result
}

private fun mutableOffsetStateDelegateOf(value: Offset) = OffsetStateDelegate(value = value)

@JvmInline
private value class OffsetStateDelegate private constructor(
    private val state: MutableLongState
) {
    constructor(value: Offset) : this(
        state = mutableLongStateOf(value.toLongValue())
    )

    operator fun getValue(thisObj: Any?, property: KProperty<*>): Offset =
        state.longValue.let { boundsValue ->
            Offset(
                x = unpackFloat1(boundsValue),
                y = unpackFloat2(boundsValue)
            )
        }

    operator fun setValue(
        thisObj: Any?,
        property: KProperty<*>,
        value: Offset
    ) {
        state.longValue = value.toLongValue()
    }

    @Immutable
    private companion object {

        @Suppress("NOTHING_TO_INLINE")
        @Stable
        private inline fun Offset.toLongValue() = packFloats(x, y)
    }
}

License: No specific license, I'm offering this for any kind of use or modification.

Hi, I’m the author of the Toolkit library, which contains a custom blur modifier that can blur the background behind any composable in real time. It works on any version of Android.

I wrote an article that shows how to use my library and how to create stunning glassmorphic designs for your Android apps. You can read it here: Blurring the Lines: How to Achieve a Glassmorphic Design with Jetpack Compose.

link:https://medium.com/@iZakirSheikh/blurring-the-lines-how-to-achieve-a-glassmorphic-design-with-jetpack-compose-0225560c2d64

I hope you find my library and article helpful. If you have any feedback or suggestions, please let me know.