Skip to content
DeveloperMemos

Make a Spacer fill remaining space in Jetpack Compose

Android, Jetpack, Compose1 min read

Over the last couple of years I've rotated between a few declarative UI frameworks. The most notable are probably Flutter, Jetpack Compose and SwiftUI. Flutter, Jetpack Compose and SwiftUI all have a Spacer widget but they work a little bit differently to eachother.

1Row(
2 modifier = modifier
3 .padding(
4 vertical = 10.dp,
5 horizontal = 18.dp
6 ),
7 verticalAlignment = Alignment.CenterVertically
8) {
9 Text("One")
10 Spacer(modifier = Modifier)
11 Text("Two")
12}

The above Spacer Composable will pretty much just be blank if you don't make any adjustments to the Modifier. So to make it fill the entire middle space of the Row, or the area between the two Texts, you can add weight like this:

1Row(
2 modifier = modifier
3 .padding(
4 vertical = 10.dp,
5 horizontal = 18.dp
6 ),
7 verticalAlignment = Alignment.CenterVertically
8) {
9 Text("One")
10 Spacer(modifier = Modifier.weight(1.0F))
11 Text("Two")
12}

And weight will pretty much work in exactly the same way as it does when used in XML layouts.