Search code examples
kotlinandroid-jetpack-compose

Android development: How can I scale two composables without using Modifier.weight()?

I am working on an app using Compose and I'm having trouble getting two custom Composables to display the way I want. The way it is set up is basically

Row {
  ComposableOne(Modifier.fillMaxSize())
  ComposableTwo()
}

A little more info, ComposableTwo() is a fixed size and I want to keep it on the right side of ComposableOne(), which doesn't have a fixed size.

The problem is, the way it is now, ComposableOne() will take the entire screen and ComposableTwo() does not appear.

I tried using Modifier.weight() on each of them and that does work, but it has its own problem. With the weights, after some testing I found a ratio that lets the ComposableTwo() appear fully on any screen size, but then for larger screens ComposableOne() will be a little too short and not use all of the available empty space and it doesn't look as nice with the weird gap between the two items.

Is there a way to make the ComposableTwo() fully appear on screen without using weights but still keeping it on the same side of the screen?

Also if possible I wanted to avoid just having different weight ratios for different screen sizes.

Solution

  • To keep ComposableTwo the same width don't use weight on it, keep it only on ComposableOne.

    Row {
  ComposableOne(Modifier.weight(1f))
  ComposableTwo()
}