What is the ItemDecoration for Jetpack Compose LazyColumn?

Question

In JetpackCompose, we can use LazyColumnFor as RecyclerView.

In RecyclerView, to have a proper margin/padding between items, we need to use ItemDecoration, as per this article

Like below

class MarginItemDecoration(private val spaceHeight: Int) : RecyclerView.ItemDecoration() {
    override fun getItemOffsets(outRect: Rect, view: View,
                                parent: RecyclerView, state: RecyclerView.State) {
        with(outRect) {
            if (parent.getChildAdapterPosition(view) == 0) {
                top = spaceHeight
            }
            left =  spaceHeight
            right = spaceHeight
            bottom = spaceHeight
        }
    }
}

For JetpackCompose LazyColumnFor, what's the equivalent of ItemDecoration?

Answer 1

You can use Arrangement.spacedBy() to add spacing in-between items.

Something like:

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(8.dp),
) {
    // ...
}

The example below adds 8.dp of space in-between each item

Before and after:

If you want to add padding around the edges of the content you can use the contentPadding parameter.

  LazyColumn(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(horizontal = 24.dp, vertical = 8.dp)
  ){ ...  }

In the example above, the first item will add 8.dp padding to it’s top, the last item will add 8.dp to its bottom, and all items will have 24.dp padding on the left and the right.