Mixing Item Types in a LazyColumn in Jetpack Compose

For Android developers accustomed to using RecyclerView, LazyColumn is the gift that keeps on giving. In a previous article I walked through how to navigate lists in a LazyColumn with LazyListState. In this article I want to quickly demonstrate how to include multiple types of composables within a single scrollable list.

The use cases for this are endless, but as a simple example let’s suppose we are rendering a document that has a Header, a series of items, and a Footer. How would we achieve this?

One solution would be to nest LazyColumn in a column.

Column {
    Header()
    LazyColumn() {
        ...
    }
    Footer()
}

But then the Header and Footer would not be scrollable. We could make the entire Column scrollable, but then we end up with a complex nested scroll situation that wouldn’t work like we are intending.

The simple solution is to use LazyColumn’s item{}builder. Within the scope of LazyColumn’s content block, any composable within an item {} scope is included as a single item in the LazyColumn.

So we could achieve a single scrollable layout of a header, a series of items, and a footer like this:

LazyColumn {
    item {
        Header()
    }
    items(content) {
        Content(it)
    }
    item {
        Footer()
    }
}

Also note that we can add multiple composables within a single item {} block. I’ve found this particularly useful when I want to add a divider or spacer along with the composable.

item {
    Header()
    Divider()
}

This is important if you are using LazyListState.scrollTo() to target specific items, since including a Divider in its own item {} block would make the Divider its own scroll target, which would probably never be the intended behavior.

There you have it, another tool for your Compose toolkit. Keep composing!

Follow for more on best practices in Kotlin and Android development.