As a data point for this issue: going forward, core will likely have more dependencies on the animation primitives (from animation-core). :)

We were running into a similar circular dependency problem with animated vectors (cc Nader) - vectors live in UI but animated vectors need animation APIs.

Did we consider moving animation to be a lower group than ui? We could move the animation clock ambient to animation directly, avoiding the cyclic dependency, and also lets us use animation APIs in the ui library.

It also seems that animateContentSize makes more sense in the ui group than animation.

Re #4: Could you elaborate on what moving animation to be a lower group would look like? Is this animation or both animation and animation-core?

I assume there's a policy against having animation-core and animation in separate groups? That would solve the cicular dependency between groups.

BTW, AnimationClock is going away by Beta, although that wouldn't solve the animated vectors issue.

Re #4: Could you elaborate on what moving animation to be a lower group would look like? Is this animation or both animation and animation-core?

Sorry, I meant moving the group androidx.compose.animation 'down' - so that would be both animation and animation-core.

Currently our dependencies are something like: (we want to prevent these groups from depending on things above them)

material
foundation
animation
ui
runtime

If we swap animation and ui, and make it so that nothing in the animation group depends on ui, but allow the ui group to depend on animation, it sounds like we can fix this dependency issue, move UI related APIs like animateContentSize out of animation keeping the animation group strictly animation related, and also lets us add new APIs to ui like animated vectors since we would be able to depend directly on animation and animation-core from within ui.

From a brief look it doesn't look like this would affect much, there aren't many ui related imports in animation.

Thanks for the walk-through. It was very helpful. :) I would propose a small tweak to your suggestion: Bring animation lib into ui group, instead of moving APIs. That would allow us to animation group down.

The design intention for animation as a library was to host higher level APIs that depend on both animation-core and other modules. If we were to move the animation group down and remove animation lib's dependency on ui, and move all the APIs that depend on ui to ui, we might as well move the whole lib to ui. This way animation group would only contain animation-core (and demos and samples module for it), and it's gauranteed to not depend on anything above it. Wdyt?

Sounds like a reasonable option to me as well, although I kinda like having the separation of androidx.compose.animation - I don't see why things like transition and single animated value should be tied to Compose UI, theoretically they could be useful for other tree types. Either option sounds good, but we should decide and land this soon.

Transition v2 is in animation-core. Single value animation can also be moved to animation-core as a result of recent decision to have it depend on runtime. We plan on re-naming the animate APIs as well. Agreed that we should make a decision on this soon.

cc+ George

result of recent decision to have it depend on runtime

I wonder if it's still fair to call it animation-core at this point. How about we move everything in animation-core to animation, and the ui bits go to ui-animation? So we would have:

// Compose animation library (transition / single value animation etc)
androidx.compose.animation:animation

// Animation integration for Compose UI (crossfade / animated modifier, etc)
androidx.compose.ui:ui-animation

Yes, assuming we do decide to move animation into ui group, then it makes total sense to rename animation-core to animation. :)

Is this actually obsolete? We still have a dependency on :compose:animation:animation-core from compose:ui:ui

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui/build.gradle;l=45

Looks like this is used in our animated vector support, shouldn't these be moved up to a separate module? (having an api dependency here in particular seems very worrying..)

Seems like it's a different reason for the dependency now - previously it was ambient animation clock. Splitting animation and animation-core in separate groups is no longer a viable option. Moving animation group up is reasonable as long as we could sort out the dependency issue. :)

Looping in Yuichi, owner of animated vector. Yuichi, would it be possible to move the animated vector impl to the animation group or another module that depends on both animation and ui? If I remember correctly, we tried that approach and ended up with a bunch of extra APIs to support cross module communication. :(

Louis, how critical is this? This would require a large refactor that I think might be too late at this stage of Beta. :(

My understanding is that we don't currently have a circular dependency, just a module separation that isn't critical to have anymore, right?

My understanding is that we don't currently have a circular dependency, just a module separation that isn't critical to have anymore, right?

We still have a cycle between library groups:

animation:animation depends on ui:ui which depends on animation:animation-core

This will make it very difficult to independently version these library groups (ui and animation), since if a developer increases the version of ui:ui, it might actually end up increasing the version of animation:animation-core too.

if that's the case then either animation and ui are effectively part of the same version group, or animation and animation-core are separate version groups of their own and may not establish and use opt-in internal APIs between them.

animation and ui are effectively part of the same version group

What would this look like? I'd rather not put a hard requirement to never use internal or experimental APIs across the two animation libs, which would be required by the other option.

After some investigation, I think we can eliminate the dependency from ui to animation to simplify things a bit. This would require refactoring out the impl of animated-vector that depends on animation group into a separate module. Since the animated-vector features are experimental, this can be done post 1.0.

However, there is unfortunately another group level dependency cycle:

foundation (from foundation group) -> animation -> foundation-layout (from foundation group)

I don't see a good way to avoid this without creating hurdles that'd make animation feature development difficult. It is somewhat analogous to the group level dependency story between fragment and lifecycle:

 lifecycle-extensions (from lifecycle group) -> fragment -> lifecycle-viewModel/livedata-core (from lifecycle group)

Louis is right that independent versioning would be difficult. Animation and foundation would need to be released in lock steps, similar to lifecycle and fragment. It's still lesser of the two evils, compared to splitting animation libs. The animation lib requires animation-core to add new low-level experimental APIs (for example: Transition.createChildTransition) to support high level animation features. Not allowing experimental API usage between these two libs would therefore hinder feature development.

foundation (from foundation group) -> animation -> foundation-layout (from foundation group)

We have usages in Crossfade and AnimatedVisibility

Crossfade just uses a Box as an implementation detail, we can probably refactor that out and just build our own simpler box for internal usage.

AnimatedVisibility has (experimental) extensions for RowScope and ColumnScope, which seems more problematic.

Do these extensions need to live here? Or when the underlying APIs are stable, could they live in foundation-layout? It seems reasonable that ColumnScope / RowScope animation implementations, live in the same place that they are defined, then we could remove this dependency inversion. I would really like to avoid the case where updating your animation dependency so you can make use of new animation APIs also ends up updating how Row behaves.

I would really like to avoid the case where updating your animation dependency so you can make use of new animation APIs also ends up updating how Row behaves.

I understand the desire to make the two libs independent. I'm in full support of removing the dependency on animation from ui group.

Updating how Row behaves when updpating animation may be desired because going forward we'll lean more and more on foundation-layout to reuse some of the implementation so that animation doesn't need to reinvent the wheels and implement the same layout logic. For example, I'm planning on implementing AnimatedRow, for which I'd prefer to reuse as much from the Row's static layout/spacing logic as possible, rather than duplicating the code. I won't be able to put something like AnimatedRow outside of animation, because animating values not known until measure/layout is not supported in stable animation API yet.

Do these extensions need to live here? Or when the underlying APIs are stable, could they live in foundation-layout? It seems reasonable that ColumnScope / RowScope animation implementations, live in the same place that they are defined, then we could remove this dependency inversion.

That's a great question. We are just starting with the layout animation APIs. There will be more and more cases where we'd put out experiemental animation APIs, as well as their Row/Column specific variant. The Row/ColumnScope extension of AnimatedVisibility account for the majority API use for AnimatedVisiblity nowadays, because they are tailored to the specific layouts and therefore more convenient. We'd hurt the dev experience more than we gain if we had to take that (and future opportunities of) optimization away.

Doris and I chatted; it looks like a promising path forward is aligning the compose-animation modules with the foundation version group and breaking the dependency from compose-ui on animation-core. The only usages in a quick survey are the experimental animated vector support, tests, and samples. If we move the experimental animated vector support to a foundation-level module that depends on animation, we can keep the compose-ui <-> compose-foundation version boundary strict.

Yes, that was also what I meant in #21 by "removing the dependency on animation from ui group."

Yuichi has kindly agreed to take on the task to move the animated vector work out of ui, therefore removing ui's dependency on animation-core. We can cherry-pick that change into release branch once it lands. (https://android-review.googlesource.com/c/platform/frameworks/support/+/1748158)

I'll fix the tests' and sample's dependency on animation from ui in a follow-up CL.

Follow-up is at: https://android-review.googlesource.com/c/platform/frameworks/support/+/1750079

It'd be nice to enforce the lib group dependency so it can only be one-way from higher level groups on lower level groups. Filed feature request at b/192389944 to track that.

In 1.0.0 the animatedvectorresource and the AnimatedImageVector is missing. please release it as soon as possible as it is causing issues with my app. please sugest some workaround as my app heavely depend on it.

Re #28:

AnimatedVectorResource will be included in the next Compose release in 1-2 weeks in a new lib: animation-graphics. Stay tuned! Sorry for the inconvenience.

Thanks

🎉🎉🎉

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.