How to add dividers between items in a LazyColumn Jetpack Compose?

Question

I have a LazyColumn that looks like this:

LazyColumn (
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    items(bookList) { book ->
        InProgressBookItem(book = book)
    }
}

How can I add a line between each item in the list, similar to using an item decoration on the old RecyclerView?

Answer 1

Currently there is no built–in way to add dividers. However, you can just add a Divider in the LazyListScope.

Something like:

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(12.dp),
) {
    items(itemsList){
        Text("Item at  $it")
        Divider(color = Color.Black)
    }
}

If you do not want the last item to be followed by a Divider, you can add dividers to items according to their indices:

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(12.dp),
) {
    itemsIndexed(itemsList) { index, item ->

        Text("Item at index $index is $item")

        if (index < itemsList.lastIndex)
            Divider(color = Color.Black, thickness = 1.dp)
    }
}

Answer 2

Simple:

LazyColumn (
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    items(bookList) { book ->
        InProgressBookItem(book = book)
        Divider(color = Color.Black, thickness = 1.dp)
    }
}