Putting something below a LazyColumn in Jetpack Compose

Question

I would like my screen to show a scrolling list and a button below it. The button should always be visible. I tried the following, but it did does not work. The LazyColumn takes the entire screen. I want the Button to take it's space at the bottom, and then the LazyColumn has the rest of the screen.

Column(Modifier.fillMaxSize()) {
    LazyColumn {
        items(50) { i ->
            Text("Row $i", Modifier.fillMaxWidth().padding(8.dp))
        }
    }
    Button(onClick = { println("hi") }) {
        Text("Hello")
    }
}

Answer 1

You can apply the weight modifier to the lazyColumn:

Column(Modifier.fillMaxSize()) {
    LazyColumn(Modifier.weight(1f)) {
        items(50) { i ->
            Text("Row $i", Modifier.fillMaxWidth().padding(8.dp))
        }
    }
    Button(onClick = { println("hi") }) {
        Text("Hello")
    }
}

This is also explained in the Jetpack Compose basics codelab

Answer 2

Not entirely an answer to the question, but I had an issue where LazyColum() took up the entire width of the screen. All credit to "Sinner of the System".

Added .padding(8.dp) to Modifier.fillMaxWidth() to add some space.

Column (
    modifier = Modifier
        .fillMaxSize()
        .background(Color.White),
    horizontalAlignment = Alignment.Start,
    verticalArrangement = Arrangement.Top
) {
    LazyColumn(
        modifier = Modifier
            .fillMaxWidth().padding(8.dp)
            .border(width = 1.dp, color = Color.Gray, shape = RoundedCornerShape(5.dp))
    ) {
        item {
            Row(
                modifier = Modifier.fillMaxWidth()
            ) {
                Spacer(modifier = Modifier.width(15.dp))
                Text(text = "foo,")
                Spacer(modifier = Modifier.width(5.dp))
                Text(text = "bar")
            }
        }
    }

}