TL;DR VerticalScroller and HorizontalScroller is the answer.

You would be surprised how easy it is to create a list in Jetpack Compose! If you are new to Jetpack Compose I would recommend going through the official documentation first.

Beginning with Android Studio 4.0 Canary 1, you can preview your composable functions within the IDE. This is a really cool feature, you should download this Android Studio version, if you want to play with Jetpack Compose.

I recently started exploring Jetpack Compose, my experience so far has been great! You can get started with it really quickly but there are a lot of new components that you need to know to be able to use it.

In this blog post we will understand how to use VerticalScroller or HorizontalScroller to have a list like functionality in Jetpack Compose.

With Jetpack Compose’s “0.1.0-dev05” release, a new component called AdapterList was released. I would recommend you to check out this blog first.

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 begin!

You need to include the following dependency to get the scrolling functionality.

As mentioned earlier we will be using a VerticalScroller to make a list which you can scroll vertically or a HorizontalScroller to scroll horizontally. Let’s have a look at the source code of VerticalScroller , both of these scrollers have a similar method signature.

This is similar to any other component in Jetpack Compose. We can update the modifier to modify the UI according to our needs. For some reason if we don’t need the scrolling functionality we can pass a false value. We then pass the child component in the lambda.

Now let’s see the code.

We need to use the Composable annotation for all composable functions. The above code snippet can be used in a situation where we are getting a list of data from a remote source or from the database and then we are displaying it inside the VerticalScroller . We are using a Column inside VerticalScroller which works just like a LinearLayout with the vertical orientation. Then we use Kotlin’s forEach operator to loop through the list and add a Text component for each item in the list.

If you need a horizontal list, you just need to replace VerticalScroller with a HorizontalScroller and Column with a Row .

Although this is how you create a list in Jetpack Compose but VerticalScroller feels like a ScrollView in my opinion. In Google I/O’19, a component called ScrollingList was used in the demo but it is not yet available. You can probably use it in the future to create a list in Jetpack Compose.

Now just for a moment think what all code you would have to write if you were using a RecyclerView , I bet most of us can’t even write the entire RecyclerView and ViewHolder logic without Googling.

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.