Create a LazyColumn With Indexing for Jetpack Compose

Replicating RecyclerView in your Jetpack Compose based android apps

Photo by Adrian Trinkaus on Unsplash

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 RecyclerViews 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 another Modifier like the one you are using with other Composables.
• predicate: This lambda here, is the connection between indices and data. You are free to write your own logic, but you must be careful to always add as parameter an item from indices list and return the index of an item from data.
• mainItemContent: Here is the Composable which will show data item in the screen.
• indexedItemContent: Here is the Composable which will show indices 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 your LazyColumn and through this value it will be connected with the indexes
• modifier: Just another Modifier like the one you are using with other Composables.
• predicate: This lambda here, is the connection between indices and data. You are free to write your own logic, but you must be careful to always add as parameter an item from indices list and return the index of an item from data.
• lazyColumnContent: Here is the Composable which will show your LazyColumn in the screen.
• indexedIntemContent: Here is the Composable which will show indices 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.