I have a `LazyVerticalGrid` with different grid spans. Within that grid I want a special kind of tra...

# compose

[Ahmed]

I have a LazyVerticalGrid with different grid spans. Within that grid I want a special kind of transparent item that can act as a window to what’s behind the grid. More in 🧵

[Ahmed]

The idea is to show offers/packages/adverts while the user scrolls.

[Ahmed]

Whenever that special item comes

[Ahmed]

Box { 
  FullScreenSurprise()
  LazyGrid()
}

[Ahmed]

Currently I do not apply any background to my LazyGrid() so the cutout can show what’s behind.

[Ahmed]

Is there some way to morph/cutout/ with darwWithContent or any other modfier, for only that special item?

As I have to very delicately handle the background and paddings for items.

[Ahmed]

Here’s the effect

ScreenRecording_02-16-2025 22-45-51_1.MP4

[Skaldebane]

You could potentially call drawRect with BlendMode.Clear, but that would (afaik) create a hole through the entire Compose view (not just that composable, it'll punch through everything behind it). Not sure if there's another way...

[Skaldebane]

Alright I figured it out:
First, add a graphicsLayer modifier with CompositingStrategy.Offscreen to the parent composable (in this case, the LazyVerticalGrid):

LazyVerticalGrid(
    ...,
    modifier = Modifier
        .graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
        ...
)

Then you can apply BlendMode.Clear on the child composable, and it'll only clear all the way up to the parent, because the parent created a separate graphics layer:

YourChildComposable(
    ...,
    modifier = Modifier
        .drawWithContent { // if you don't care about the content, you could use drawBehind instead, or use a Canvas directly.
            drawRect(Color.Black, blendMode = BlendMode.Clear)
            drawContent() // only if you want to keep content (e.g. some overlay), if any.
        }
        ...
)

That'll achieve the desired behavior.

[Ahmed]

Wow! This works flawlessly. Thank you so much @Skaldebane