Jetpack Compose: How to make a scrollable list?

Photo by Andrew Neel on Unsplash

We previously looked at how to handle states inside a Composable with the quantity selection component. In this article, we’ll see how to make a scrollable list. When it comes to display a list of elements, we need to use a RecyclerView with an adapter to define each item. This basic feature can become hard for so many cases but Jetpack Compose gives a new way to display a scrollable list!

Disclaimer: All source code is developed with Compose 1.0.0-alpha02. Because Jetpack Compose is still in alpha, some source code may change with new versions.

Scrollable Compose components

Jetpack Compose offers two ways each to display a scrollable list in vertical or horizontal:

• ScrollableColumn (resp. ScrollableRow) is a variant of Column (or Row) that scrolls when content is bigger than its height (or width). That can be the equivalent of the ScrollView in the previous framework UI.
• LazyColumnFor (resp. LazyRowFor) is a vertically (or horizontally) scrolling list that only composes and lays out the currently visible items. That can be the equivalent of the RecyclerView and its adapter in the previous framework UI.

Note: Because we are an Android developer, we want to use LazyColumnFor as much as possible but in the current version of Compose, we don’t have as much flexibility with LazyColumnFor as with ScrollableColumn. e.g. you can’t scroll at a specific position with LazyColumnFor for now.

Product item component

Product item

At Decathlon, each product item has a picture, a name and a price. In our example we are going to add the brand following theses specifications:

• The size of the picture is 70 dp in width and height.
• The text for the brand and the name use Roboto Condensed font, according to the official Decathlon typography.
• The font weight for the brand is bold W700 and for the name bold W400.
• The price component developed in this previous article.

This component can be reused when we need to display a product in a list. Our model is pretty simple.

Info: Our picture loads its content from a URL. To do that, you can use accompanist from Chris Banes to load a picture with Coil, an image loader developed and adapted for Kotlin.

ScrollableColumn and ScrollableRow components

As mentioned earlier we will be using a ScrollableColumn to make a list which you can scroll vertically or a ScrollableRow to scroll horizontally. Let’s have a look at the source code, 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, the last parameter is the content of the scrollable area and there are some settings available for the scroll. If we want a simple scrollable list with a divider between each product, we can create our composable like this:

We declare our ScrollableColumn and we iterate inside this component to display our product item. Nothing more. Thanks to declarative UI, we describe what we want to display and Jetpack Compose does the rest!

LazyColumnFor and LazyRowFor components

Lazy versions of scrollable components are simpler. You don’t have settings for the scroll but they can take your list of models and you just need to declare your product item depending on the current model given in the itemContent lambda.

Similar to our previous example, the implementation looks like:

You don’t need to declare a RecyclerView with an adapter. Jetpack Compose doesn’t recycle any views. It will just draw what the user should see and you don’t need to care about internal stuff.

Lists with Jetpack Compose are magic! ✨

Smooth scroll at a specific position

In many cases, you want to scroll at a specific position in your list. Because your list is sorted alphabetically and you want to go at the first item of a letter or you want to come back at the beginning of the list. If you want to do this, you need to manipulate a ScrollState from the function rememberScrollState.

In our example, we display a floating action button at the bottom of our screen. Clicking it will bring us back to the first list item.

Warning: This feature isn’t available with lazy components. In the current version of Compose, you need to use a scrollable component.

In our composable, we declare a scrollState variable from rememberScrollState function, we give this state to our scrollable component and we just need to call the needed function to scroll to a specific position, here smoothScrollTo with 0f that corresponds to the beginning of our list.

Smooth scroll at the beginning of the list

In this post, we’ve taken a quick dive into displaying a product list using LazyColumnFor and ScrollableColumn and see how to scroll at a specific position.

Stay tuned for the next post about Jetpack Compose at Decathlon!

Follow our latest posts on Twitter and LinkedIn and discover our sport tech initiatives like open APIs on our developers website 🚀

If you are interested in joining Decathlon Tech Team, check out our carriers portal to see the different exciting opportunities ! 👩‍💻👨‍💻