Tristan Elliott
Posted on June 8, 2023
Table of contents
My app on the Google Playstore
GitHub code
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 outLazyColumn
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.
💖 💪 🙅 🚩
Tristan Elliott
Posted on June 8, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
mobile A bad and better unit test example for Android network layer with Retrofit | Video
February 15, 2024
mobile The 7 scenarios my authentication system has to deal with in Android with Kotlin
January 29, 2024