Create a LazyColumn With Indexing for Jetpack Compose
Replicating RecyclerView in your Jetpack Compose based android apps
The RecyclerView
may need “this” and “that” file and a lot of configuration in them, but nobody will disagree that it is a mature class and a lot of libraries are built with RecyclerView
in mind.
I wish I could say the same for ListView
and ListActivity
but I will not! That’s enough talking about our sins of the past and we should stick to the future because it is Jetpack Compose o’clock!
Apart from the Double Header LazyColumn I really missed the RecyclerView
s with indexing at the side. But, it is Jetpack Compose time so one thing can be done — Create my own custom LazyColumn
with indexing.
The approach has two almost identical implementations. The main difference between them is that IndexedLazyColumn
implementation needs a whole LazyColumn
and its LazyListState
as parameters, but IndexedDataLazyColumn
needs the itemContent
parameter, from items
parameter from LazyColumn
. Are you feeling confused? No worries, I think that by the end of this article you are going to have a good point of view by the previous sentence!
Simple Data Implementation
Below you can see the IndexedDataLazyColumn
function without its body.
Reading one by one the parameters:
indices
: A simple list of your index items (ex, 1..10, A..Z, etc).data
: The list which contains your data items (ex. Movies, Names, Car Manufacturers, Shopping list etc).modifier
: Just anotherModifier
like the one you are using with other Composables.predicate
: This lambda here, is the connection betweenindices
anddata
. You are free to write your own logic, but you must be careful to always add as parameter an item fromindices
list and return the index of an item fromdata
.mainItemContent
: Here is the Composable which will showdata
item in the screen.indexedItemContent
: Here is the Composable which will showindices
item in the screen.
Here is an example
Pay attention to the way the predicate
connects the index item (a letter ‘A’ to ‘Z’) with the first letter of the person’s surname.
Totally new LazyColumn implementation
Below you can see the IndexedLazyColumn
function without its body.
Reading one by one the parameters:
indices:
A simple list of your index items (ex, 1..10, A..Z, etc).itemsListState
: As we said, you use yourLazyColumn
and through this value it will be connected with the indexesmodifier
: Just anotherModifier
like the one you are using with other Composables.predicate
: This lambda here, is the connection betweenindices
anddata
. You are free to write your own logic, but you must be careful to always add as parameter an item fromindices
list and return the index of an item fromdata
.lazyColumnContent:
Here is the Composable which will show yourLazyColumn
in the screen.indexedIntemContent
: Here is the Composable which will showindices
item in the screen.
Here is an example
Pay attention to the way the predicate
connects the index item (a letter ‘A’ to ‘Z’) with the first letter of the person’s surname. Also, pay attention at how you define a LazyListState
and pass it to the function (itemsListState
parameter) and to your LazyColumn
(state
parameter) as well.
Output
Both of the previous examples are rendering the same data and have the same functionality. The following video depicts what all of this code is doing!
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.
