Filling remaining space with Spacer on Jetpack Compose

Question

I'm thinking I might be missing something, is there a way to achieve "fill the rest of the space" in Compose Beta01 without the extra Box element wrapping the spacer? Spacer has no weight modifier, unfortunately.

Column(
    modifier = Modifier
        .height(120.dp)
        .fillMaxWidth()
) {
    Text(
        text = "A"
    )
    Box(
        modifier = Modifier
            .weight(1f)
    ) {
        Spacer(
            Modifier
                .fillMaxHeight()
        )
    }
    Text(
        text = "B"
    )
}

Edit:

The extra box is not necessary at all, I was just misusing the modifier system. As a side note, the selected answer is probably another good way of achieving this.

score 57 · Answer 1 · answered Mar 13 '21 at 22:36

57

As far as I can see, Column.arrangement applies to all children evenly.

In case you just want to fill the remaining space to the max, a Spacer with weight(1.0f) modifier is probably what you want:

Column(
    modifier = Modifier
        .fillMaxWidth()
) {
    Text("Text A") // top aligned
    Spacer(modifier = Modifier.weight(1.0f)) // fill height with spacer
    Text("Text B") // those two Texts are bottom aligned
    Text("Text C") 
}

answered Mar 13 '21 at 22:36

Steffen Funke

2,168
1
21
18

This answer is more appropriate since the question is about using Spacer – Mirado Andria Jan 17 '23 at 19:42

score 12 · Accepted Answer · answered Mar 01 '21 at 18:00

12

Is this what you need?

Column(
    modifier = Modifier
        .height(120.dp)
        .fillMaxWidth(),
    Arrangement.SpaceBetween
) {
    Text(text = "A")
    Text(text = "B")
}

You can arrange your elements as SpaceAround, SpaceEvenly and SpaceBetween.

answered Mar 01 '21 at 18:00

Code Poet

6,222
2
29
50

I was using the Modifier system incorrectly in the first place, but this comment pointed me towards the solution, indeed, arrangement is very helpful for these situations. – Eduardo Naveda Mar 02 '21 at 21:49

score 0 · Answer 3 · answered Jul 27 '23 at 07:04

We can use this snippet code to overcome this situation.

           Row(horizontalArrangement = Arrangement.SpaceBetween) {
                Text(text = "Text 1")
                Spacer(modifier = Modifier.weight(1.0f))
                Text(text = "Text 2")                    
            }

Filling remaining space with Spacer on Jetpack Compose

3 Answers3

Linked