Jetpack Compose: How to make a scrollable list?

Gérard Paligot
Sep 21, 2020 · 4 min read
Image for post
Image for post
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

  • 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

Image for post
Image for post
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

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

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 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.

Image for post
Image for post
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 ! 👩‍💻👨‍💻

Decathlon Developers

Empowering The Sport Tech Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store