Can I scale something down (using `graphicsLayer` or otherwise) and also have it scale down the amou...

# compose

[Chris Fillmore]

Can I scale something down (using graphicsLayer or otherwise) and also have it scale down the amount of space it occupies?

[Chris Fillmore]

To be clear I mean, currently I see that adjacent items in the layout still think that its full dimensions, not its scaled down dimensions

[Stylianos Gakis]

Maybe some sort of fillMaxSize while also using the fraction parameter? https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxHeight(kotlin.Float) ?
Maybe something with weights if you're in a scope where you can do that

[Stylianos Gakis]

And yeah the graphicsLayer scale only affects drawing, not layout.

[Chris Fillmore]

Thanks for responding. I played around a bit more and I think I can get something workable by wrapping it in a Box like:

val width = ...
val height = ...
val scale = ...

Box(
  Modifier
    .size(width = width * scale, height = height * scale)
    .wrapContentSize(unbounded = true)
) {
  Surface(
    Modifier
      .size(width, height)
      .scale(scale)
  ) { ... }
}

[Stylianos Gakis]

Interestingly approach. I do wonder if there's a better alternative, but this looks interesting yeah. Is the unbounded true for the case where scale is <1.0? In which case it'll still draw outside of the size bounds right?

[Chris Fillmore]

Yes it still draws outside, but because the scale e.g. 0.5f is applied, there’s nothing there

[Chris Fillmore]

so it looks natural

[Stylianos Gakis]

But it's still possible that if there's something next to the outer box touching it, the two things will draw on each other no?

[Chris Fillmore]

Currently I’m only dealing with scale < 1.0f. It’s possible the behaviour at scale > 1.0f is undesirable, I haven’t tested. Also it’s possible that each use case will need to manage e.g. padding and such, in case the boundaries look bad. I don’t know what will happen here. So far in my use case it looks good, but I can’t say for sure it applies to all use cases generally.

If you want to check it out, I extracted a utility:

@Composable
fun ScaledLayout(
  scale: Float,
  width: Dp,
  height: Dp,
  content: @Composable () -> Unit,
) {
  Box(
    modifier = Modifier
      .size(width = width * scale, height = height * scale)
      .wrapContentSize(unbounded = true),
    contentAlignment = Alignment.Center,
  ) {
    content()
  }
}

The content still needs to apply the same size and scale on its own, to achieve the right effect. The “ScaledLayout” just provides it a layout container that will fit the provided scale.