Align Box/Column to bottom of screen Jetpack Compose

Question

I essentially want cards pinned to the top with a group of buttons pinned to the bottom (on screen keyboard)

Using Column with a modifier like so only leads to the buttons covering the top cards:

fun HomeScreen() { Column( modifier = Modifier .fillMaxWidth(), verticalArrangement = Arrangement.SpaceAround ) { WordGrid() } Column( modifier = Modifier .fillMaxWidth(), verticalArrangement = Arrangement.Bottom ) { Keyboard() }

I have tried using all the different Arrangements, using a row and using Boxes, but can't seem to get it to work.

Curiously, in the @Preview it looks as though the above code works, but when ran on an emulator they are both at the top of the screen.

Using a spacer is another option, but would this cause issues in other ways? maybe with screen sizes etc?

It is a bit unclear what you want from the description. Can you, please, post a screenshot of Preview? — Marat
– Marat, Commented Mar 29, 2022 at 20:27
Someone actually answered it, the problem was overlapping columns. If there is an easy way to get a screen show of the Preview on linux then I'm happy to post a before and after for future reference. — Joe Pleavin
– Joe Pleavin, Commented Mar 29, 2022 at 21:03

Francesc · Accepted Answer · 2022-03-29 20:46:42Z

If you want your buttons row to be pinned to the bottom, you have to set the Column to have a weight of 1f, something like this

MyTheme { Surface(color = MyTheme.colors.background) { // Cards content Column( modifier = Modifier.fillMaxWidth() ) { Column( modifier = Modifier.fillMaxWidth().weight(1f) ) { Card( modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp), backgroundColor = Color.Red, ) { Text(text = "Card 1") } Card( modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp), backgroundColor = Color.Green, ) { Text(text = "Card 2") } Card( modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp), backgroundColor = Color.Blue, ) { Text(text = "Card 3") } } // Buttons content Row( modifier = Modifier.fillMaxWidth() ) { Button( onClick = {}, modifier = Modifier.padding(horizontal = 8.dp) ) { Text(text = "Button 1") } Button( onClick = {}, modifier = Modifier.padding(horizontal = 8.dp) ) { Text(text = "Button 3") } Button( onClick = {}, modifier = Modifier.padding(horizontal = 8.dp) ) { Text(text = "Button 2") } } } } }

This works perfectly. top column has weight of 1F and bottom column has no weight. Is there a reason why the bottom column is now actually on the bottom? If I add a middle column with weight of 1F it will then also stick up with the first and the bottom be pushed down?
The children without weight are measured first. After that, the remaining space in the column is spread among the children with weights, proportional to their weight. If you have 2 children with weight 1f, each will take half the remaining space.

Collectives™ on Stack Overflow

Align Box/Column to bottom of screen Jetpack Compose

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related