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:
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.
Top comments (0)
Subscribe
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)