Search code examples
androidkotlinandroid-jetpack-composelazycolumnandroid-jetpack-compose-lazy-column

How to stick item at bottom in LazyColumn jetpack compose


I want to put items at bottom of LazyColumn. So what is the best recommended way of doing in LazyColumn. Some content I put in item or itemIndexed which is correctly, but unable to know how to stick in bottom of screen?

        LazyColumn(
            contentPadding = PaddingValues(
                horizontal = 16.dp, vertical = 16.dp)
            ),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            item { Header() }

            itemsIndexed(storedDevice) { index, item ->
                Label({ index }, item, { list.size })
            }
            
            item { 
                Button() // stick in bottom of screen 
                Button() // stick in bottom of screen 
            }
        } 

Expected Outout

enter image description here


Solution

  • You can move the Button outside the LazyColumn, using a Column and applying the weight modifier to the LazyColumn.

    Something like:

    Column() {
    
        LazyColumn(
            modifier = Modifier.weight(1f),
            contentPadding = PaddingValues(
                horizontal = 16.dp, vertical = 16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
    
            items(itemsList) {
                Text("Item $it")
            }
        }
    
        //Footer
        Column() {
            Button(onClick={}){ Text("Button") } // stick in bottom of screen
            Button(onClick={}){ Text("Button") } // stick in bottom of screen
        }
    
    }