androidandroid-jetpack-composeandroid-jetpack-compose-list

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


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

    enter image description here