With Jetpack Compose’s “0.1.0-dev05" release, a new component called AdapterList was released. In this blog post we will be exploring this component.

AdapterList is a list that only composes and lays out the currently visible items. This is similar to what RecyclerView does, using AdapterList is really easy and we can create a list in just a few lines of code.

If you are interested in exploring other components in Jetpack Compose you can check out the series of articles that I have written.

Series Pit Stops

Let’s have a look at the method signature of AdapterList .

The first parameter data is a generic list that represents the list of items that will be displayed. modifier by default has the value of Modifier.None , you can add your own modifier as per your use case. The last parameter itemCallback is a callback that emits items from the data parameter and we can use it to create the UI for each emitted item. These items are stacked one after another vertically. So if you want some elements of your list to have a different UI than the rest of the elements, you can simply add an if or a when condition and change the UI of that particular item. One known issue at the moment is that AdapterList only supports vertical lists.

Under the hood AdapterList uses a component called Scrollable to provide the scrolling functionality. Let’s have a look at its method signature to have a better understanding of how AdapterList works.

dragDirection tells us in which direction we can scroll, it can be either vertical or horizontal. scrollableState holds information about the internal state of the Scrollable component. It contains information about the ongoing fling movements and it also provides smooth scrolling capabilities. onScrollStarted and onScrollStoped are callbacks to be invoked when the scrolling starts and stops. enabled simply tells whether the scrolling is enabled or not.

Now that we have an idea about how AdapterList works, let’s see an example.

In the above example we can see that we are passing a list of integers and in the lambda we are manipulating the UI according to our needs. The output of the above code snippet is given in the GIF below.

I am sure by now you must have realised how easy it is to make a RecyclerView like list in Jetpack Compose using AdapterList . If you try to achieve the same results using RecyclerView , you know how much more code you would have had to write.

Jetpack Compose is still in developer preview, there will be breaking changes in the future so some of the things that I mentioned might change over time.

Thanks for reading! If you enjoyed this story, please click the 👏 button and share it to help others!

If you have any kind of feedback, feel free to connect with me on Twitter.