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?

I've created a feature/documentation request for this here https://issuetracker.google.com/issues/188855907 — Daniele Segato, May 21 '21 at 10:27

Gabriele Mariotti · Answer 1 · 2022-09-12T06:27:23.217

97

You can use the verticalArrangement parameter to add a spacing between each item using Arrangement.spacedBy().

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.

edited Sep 12 '22 at 06:27

answered Mar 19 '21 at 21:11

Gabriele Mariotti

320,139
94
887
841

That's nice. Thanks. Does it also allow any drawing in between (i.e. item decorator not only allows padding but also any drawing eg lines.) – Elye Mar 20 '21 at 03:29
@Elye Currently it provides only content spacing. The current workaround for other decorators is to put them inside the content in the `items/item` blocks. – Gabriele Mariotti Mar 20 '21 at 08:13
The problem with using `contentPadding` is that any click animation will not reach to the edge and so will look bad. Better to put the padding inside each item modifier (after the click handler) – Mark Feb 04 '23 at 06:58

score 5 · Answer 2 · answered Jan 06 '21 at 08:47

You can use LazyColumn with itemsIndexed (formerly LazyColumnForIndexed, deprecated) and apply the padding depending on the index.

LazyColumn {
  itemsIndexed(items = ...) { index, item ->
    Box(Modifier.padding(
      start = 16.dp, end = 16.dp, bottom = 16.dp, top = if (index == 0) 16.dp else 0.dp
    ))
  }
}

score 0 · Answer 3 · edited Dec 12 '20 at 11:27

I kind of workaround using contentPadding of LazyColumnFor for top, start and end padding, and Spacer as the bottom padding for all items.

@Composable
fun MyComposeList(
    modifier: Modifier = Modifier,
    listItems: List<String>,
) {
    LazyColumnFor(
        modifier = modifier, items = listItems,
        contentPadding = PaddingValues(16.dp, 16.dp, 16.dp)
    ) { itemText ->
        ViewItem(
            itemText = itemText
        )
        Spacer(modifier = Modifier.fillMaxWidth().height(16.dp))
    }
}

This seems to get the result I needed, as the contentPadding can be scrolled together within the LazyColumnFor

score 0 · Answer 4 · answered Sep 14 '22 at 04:30

The tutorial comes from the code lab you should refer to for a good plan https://developer.android.com/codelabs/jetpack-compose-layouts?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fjetpack-compose-for-android-developers-1%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fjetpack-compose-layouts#6

LazyRow(
    modifier = modifier.padding(top = 16.dp, bottom = 16.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(horizontal = 8.dp)
) {
    items(alignYourBodyData) { item ->
        AlignYourBodyElement(
            drawable = item.drawable,
            text = item.text
        )
    }
}

What is the ItemDecoration for Jetpack Compose LazyColumn?

4 Answers4