I need the behaviour of `Modifier.clipToBounds()`, but not on all children of the layout. Is it poss...

# compose

[Marcin Wisniowski]

I need the behaviour of Modifier.clipToBounds(), but not on all children of the layout. Is it possible to apply this effect for only some children, or have some of them ignore it? I want to clip all children to the bounds of the parent, but still allow a particular child to go outside.

[Zach Klippenstein (he/him) [MOD]]

Short answer is no, but you could build something like this it would just be a bit of work

[ephemient]

can you put the clippable children in one Box and the non-clippable children in another Box?

[Marcin Wisniowski]

The relevant children where I need to control the behavior are deep into elements of a LazyColumn. I need to allow them to draw outside the parent, but I also have a shared element transition and need to forbid the shared elements from drawing outside the parent layout as they are animating.

[Zach Klippenstein (he/him) [MOD]]

I believe shared elements are drawn in a separate layer during transition anyway, so i'm not sure clipToBounds would even work on the list?

[Marcin Wisniowski]

It does work. Without it, a half-offscreen list item draws outside the list bounds as the shared element animation runs. With clipToBounds() it's all good.

But I have some other items that I don't want clipped.

[Zach Klippenstein (he/him) [MOD]]

huh neat

[ephemient]

I guess you could add a custom modifier to all children but one which clips to parent bounds

[Marcin Wisniowski]

If I could have a Modifier that enables clipping to parent, I could apply it only on the child that has the shared element transition, since that's the only place I need the clipping.

[Doris Liu]

I'm having a hard time visualizing this, though I suspect overlayClip in shared element is what you need to specify. Do you have a visual for what it looks like right now with incorrect clipping?

[Marcin Wisniowski]

Here is a video: https://streamable.com/m3f9pt

[ephemient]

completely untested but something along the lines of?

Untitled.kt

[Doris Liu]

The SharedTransitionLayout is the parent of the top bar, therefore the overlay of the SharedTransitionLayout covers that top bar. The simplest is to either move SharedTransitionLayout so it's below (on the y axis) the top bar so the SharedTransitionLayout would do the clipping for you, or pull the top bar into the overlay.

[Marcin Wisniowski]

It is not. The top bar (Where the "View:" and button is) is outside the SharedTransitionLayout. Only the list itself is inside.

[Marcin Wisniowski]

During animation, the element draws outside the SharedTransitionLayout

[Doris Liu]

During animation, the element draws outside the SharedTransitionLayout

Are you sure the SharedTransitionLayout isn't occupying the whole screen, while the list itself is padded to account for the top bar?

[Marcin Wisniowski]

image.png

[Doris Liu]

If it's drawing outside SharedTransitionLayout, try adding clipToBounds to SharedTransitionLayout.

[Doris Liu]

Very cool animation BTW.

[Marcin Wisniowski]

Yes, that fixes the issue. But I need some other child, not taking part in the shared element transition, to draw outside the parent, hence my original question. 😄

[Doris Liu]

I see. You could either draw that child into a layer and draw the layer into a different DrawScope, or specify an OverlayClip for the sharedElement and undo the clipToBounds on parent.

[Marcin Wisniowski]

@ephemient Doesn't seem to do anything sadly

[Doris Liu]

There really should be a setting to only clip the overlay. Please feel free to file a feature request

[Marcin Wisniowski]

I'm trying to implement an OverlayClip, I will see if that works

[Doris Liu]

You'll just need one OverlayClip to share among all children. Note the returning path is in the coordinate space of the sharedTransitionLayout, so you need a rectangle shaped clip path from (0, 0) to the (width, height) of the SharedTransitionLayout.

[Marcin Wisniowski]

Is there a correct way to access the width and height of the SharedTransitionLayout from inside the getClipPath, or should I be using external state?

[Doris Liu]

External state would be my recommendation

[Marcin Wisniowski]

It works! Thank you everyone.

[Marcin Wisniowski]

Very cool animation BTW.

Made with a very cool API. 🙂

[Marcin Wisniowski]

Please feel free to file a feature request

https://issuetracker.google.com/issues/368059213
Done 👍

[Marcin Wisniowski]

https://streamable.com/sukid3
Working result, also showing some other animations in that window.

[Doris Liu]

This is so amazingly rich in animation! ❤️ I love the histogram animation! Very cool. 🔥