Creating a quick sticky footer for LazyColumn in Jetpack Compose

Table of contents

1. The problem
2. Creating the sticky footer
3. Issues with the code

My app on the Google Playstore

• HERE

GitHub code

• HERE

Introduction

• This series will be an informal demonstration of any problems I face or any observations I make while developing Android apps. Each blog post in this series will be unique and separate from the others, so feel free to look around.

The problem

• If you an have worked with the LazyColumn like myself then you are probably familiar with the stickyHeader. Which allows us to create code like this:

LazyColumn {
            stickyHeader {
               Text("BEHOLD THE STICKY HEADER!")
                }
            items(35) { index ->
                Text(text = "Item: $index",fontSize = 30.sp)
            }

        }

• The code above will allow the header to stay on screen even when the user scrolls to the bottom of the LazyColumn
• But where is the stickyFooter?!?!?!

The Sticky footer

• As it turns out there is no stickFooter{} api, which is a little disappointing. But that means we just have to get a little creative with the Box composable. Ultimately we are just going to wrap a Box around out LazyColumn and just position out footer code at the bottom of the box. Like so:

@Composable
fun FooterTesting(){
    Box(modifier = Modifier.fillMaxSize()){
        LazyColumn(){
             stickyHeader {
                  Text("BEHOLD THE STICKY HEADER!")
                }
            items(35) { index ->
                Text(text = "Item: $index",fontSize = 30.sp)
            }
        }
        Column(
            modifier = Modifier.fillMaxWidth().align(Alignment.BottomCenter).background(Color.Red),
        ){
            Text("It is I, The Sticky Footer", fontSize = 30.sp)
        }

    }

}

• There are two things I want to point out here. 1) The Box is wrapped around the LazyColumn. 2) Out sticky footer code is outside of the LazyColumn but inside the Box

Issues with this code:

• If there are any issues they can be found HERE on the google issue tracker

Conclusion

• Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on Twitter.