https://kotlinlang.org logo
#compose
Title
# compose
h

hfhbd

03/16/2022, 7:38 PM
How can you fill a row with two buttons: First button should take the max width, but there should be another minified button.
Copy code
@Composable
fun InfoButton(infoTest: String, button: @Composable (Modifier) -> Unit) {
    Row(modifier = Modifier.fillMaxWidth()) {
        Info(infoTest)
        button(Modifier.fillMaxWidth())
    }
}
This code renders the icon at the left side, I want to show them on the right side
If I simple switch the order, the Info icon is not visible anymore, because the first child takes the whole width
p

Paul Woitaschek

03/16/2022, 7:41 PM
Probably using the weight modifier
h

hfhbd

03/16/2022, 7:43 PM
Thanks. Do you have a good documentation about this modifier? I also tried it in another place, but it was more trial and error 😄 I only found it here https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements
h

hfhbd

03/16/2022, 7:50 PM
FYI:
Copy code
Row(modifier = Modifier.fillMaxWidth()) {
  button(Modifier.weight(9f))
  Info(infoTest, Modifier.weight(1f))
}
p

Paul Woitaschek

03/16/2022, 7:55 PM
That's now 9:1. If you want the first to expand while the last one should be wrap content then you can remove the weight from the second one
c

Chris Sinco [G]

03/16/2022, 8:47 PM
If one sibling has weight(x) and the other has no weight modifier, then it means the sibling with weight will take the remaining space. So for your use case, if you want that Info icon to be sized to content, you don’t need to establish that 9:1 ratio
Because the float passed to weight is to help decide how to distribute the remaining for all children that are using the weight modifier
h

hfhbd

03/16/2022, 9:01 PM
Thanks!
558 Views