I have this Box that stretches/scales on the Y axis. My problem is that the contents within the box ...

# compose

[Colton Idle]

I have this Box that stretches/scales on the Y axis. My problem is that the contents within the box are clipped unless I add padding even though I have clip=false.

Box(
      modifier.fillMaxWidth().graphicsLayer {
        scaleY = 1000f
        clip = false
      },

Is there a way to prevent this clipping? I thought compose didn't clip by default? Even if it did, I thought clipToBounds() would allow me to pass in "false" but it does not.

[Andrey Kulikov]

@Nader Jawad

[Nader Jawad]

Is it intentional to scale by 1000x here?

[Nader Jawad]

I mean eventually you will get clipped by the bounds of the display here 🙂 scaleY will only scale in the vertical direction and leave the horizontal contents unscaled. So it seems like this is WAI. Do you have a screenshot of what you are trying to build?

[Colton Idle]

The scale was only an example, because what I'm actually doing is rotation, but that seemed a bit harder to put into a few lines of code as an example. Let me post what I'm actually doing.

[Colton Idle]

So I have basically this creditCard composable that I can flip when clicking on it. It makes for a cool effect, but it clips the top and bottom when its rotating.

Box(
    modifier.fillMaxWidth().graphicsLayer {
      rotationY = rotation
      clip = false
      cameraDistance = 4 * density
    },
    contentAlignment = Alignment.Center) {
  MyCreditCardComposable(

[Colton Idle]

I stole this from here. which contains a gif of it CLIPPING!

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1631133258057000?thread_ts=1631111419.019000&cid=CJLTWPH7S

[Nader Jawad]

I think you will need to adjust the camera distance because the card is technically extending behind the "camera" here which is causing the clipping behavior you are seeing

[Nader Jawad]

From the camera distance docs here:

it is recommended to always use a camera distance that's greater than the height (X axis rotation) or the width (Y axis rotation) of this view.

[Colton Idle]

Hm. I just copied the code from the credit card sample above, but would that allow me to actually have a view directly under the credit card?

Basically, right now I can get around the cropping if I add padding manually to the bottom of the credit card, but that prevents me from putting something directly beneath the credit card, and then when I click the card it would flip and during the animation the card would be slightly on top of the content below it.

[Nader Jawad]

I don't think you need padding here I think the camera distance needs to be set to the width of the card itself instead of 4*density

[Nader Jawad]

Plus the rotation is only applied to that graphicsLayer so you can still have content underneath it as a sibling composable in a box or other composable container

[Colton Idle]

hm. Do I just use boxWithConstraints to get the width?

[Colton Idle]

Tried with boxWithConstraints and same issue

Column(horizontalAlignment = Alignment.CenterHorizontally) {
  BoxWithConstraints() {
    val boxScope = this
    MyCreditCard(
        modifier =
            Modifier
                .graphicsLayer {
                  rotationX = bottomSheetProgress.value * 20
                  cameraDistance = boxScope.maxWidth.value
                })
  }
  Box(modifier = Modifier.background(Color.Green).size(100.dp)) {
    //
  }
}