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, Mar 29 '22 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, Mar 29 '22 at 21:03

score 23 · Accepted Answer · answered Mar 29 '22 at 20:46

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? — Joe Pleavin, Mar 29 '22 at 21:00
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. — Francesc, Mar 29 '22 at 21:10

Align Box/Column to bottom of screen Jetpack Compose

1 Answers1