I was curious why `drawIntoCanvas { it.nativeCanva...

# compose-android

[tad]

I was curious why drawIntoCanvas { it.nativeCanvas.drawRenderNode(...) } wasn't drawing anything. Turns out you need to call RenderNode.setPosition() before drawing! So a nice cached render modifier for API >= 29 is:

fun Modifier.drawCached(): Modifier = drawWithCache {
    val width = size.width.roundToInt()
    val height = size.height.roundToInt()

    val renderNode = RenderNode("drawCached")
    renderNode.setPosition(0, 0, width, height)

    onDrawWithContent {
        val recordingCanvas = renderNode.beginRecording(width, height)
        draw(this, layoutDirection, Canvas(recordingCanvas), size) {
            [e-mail]()
        }
        renderNode.endRecording()
        drawIntoCanvas { it.nativeCanvas.drawRenderNode(renderNode) }
    }
}

This works well for expensive composables in lazy layouts like HorizontalPager, e.g. when layering several layouts in the child pages.

[romainguy]

You could just use a graphicsLayer{}?

[tad]

Curiously this outperforms that, but I'll test again

[romainguy]

@Nader Jawad

[Nader Jawad]

They should be identical in performance. Various container composables implicitly place child composables onto their own graphicsLayer as well through the placeWithLayer API

[tad]

I may be placing graphicsLayer in the wrong place. The context is a parallax animation inside HorizontalPager, so I wanted to render a Composable to a RenderNode to avoid re-drawing when translating it; however, I am using a custom Alignment implementation for the parallax offset instead of using graphicsLayer { translationX = ... }. I will rework this and report back.

[romainguy]

graphicsLayer { translationX = ... } is pretty much free

[romainguy]

under the hood it’s just repositioning the RenderNode

[Nader Jawad]

Custom Alignment can cause additional invalidations and depending on the use case using graphicsLayer translation may help here

[romainguy]

It’s basically what `ListView`/`RecyclerView` do to handle scrolling

[tad]

cool, using Modifier.layout with placeRelativeWithLayer works pretty well.

[tad]

I think my performance issues are just rendering the initial layout now.