Double Header LazyColumn in Jetpack Compose
Creating the missing part of the API
When you hear about “double header something”, you probably think that it will be a monster from ancient Greek mythology.
You are almost right, it might not be from the mythology but for sure it is a monster! Everyone wants double-header lists but unfortunately, they are always a missing part of the API. So, you have to search for third-party libraries.
There are a lot of libraries out there for legacy Android code. It is not a legacy at the moment of this writing but it will be eventually!
The quick solution will be to find a third-party library, use it and port it to Compose code using AndroidView class. This will get the job done but it doesn’t feel like Compose, does it?!
Compose should be easy and fast to use and learn and I would like to walk into this path. The Kotlin lambdas will come to the rescue. Enough talk, let’s code.
The one and the only requirement to follow is that we have to extend the Itemclass provided by the DoubleHeaderLazyColumn library. The properties type and subType will define the outer and inner header so we must override these.
Then, we are going to create some mock data to continue smoothly with our example:
Now that we have all the data in place we have to implement something like a LazyColumn.
Actually, this solution is a LazyColumn on steroids! You have to define header content (headerContent), subheader content (subHeaderContent), item content (itemContent) the same exact way you define itemContent in a regularLazyColumn.
Voila the final result.
The library code
If you want to understand further the functionality please see the comments in the code otherwise you could copy-paste this code into your project.
This is the best way I found to keep this article short for someone who wants to create a double sticky header list without making this article long to read.
I just need the code
If you want add the library to your module dependencies or you need some examples of how to use it feel free to browse the whole project.
