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

Issue

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?

Solution

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)
    }
}

Answered By - Gabriele Mariotti
Answer Checked By - Dawn Plyler (JavaFixing Volunteer)