Custom Compose Arrangement to add extra spacing at beginning and end of a LazyRow/LazyColumn

1k Views Asked by At

How can I create a custom Arrangement for LazyRow to add additional spacing at beginning and end, but have even spacing in between?

Start|< more space> Item 1 Item 2 Last Item |End

object CustomArrangement : Arrangement.Horizontal {
  override fun Density.arrange(
    totalSize: Int,
    sizes: IntArray,
    layoutDirection: LayoutDirection,
    outPositions: IntArray
  ) {

  }
}

https://developer.android.com/jetpack/compose/lists#custom-arrangements

2

There are 2 best solutions below

0
Gabriele Mariotti On BEST ANSWER

It is not the answer to your question, but you can achieve the same adding a header and footer items, or using a horizontal PaddingValues.

A simple LazyRow:

LazyRow(
    horizontalArrangement =   Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(horizontal = 50.dp),
    modifier= Modifier.fillMaxSize(),
) {

    items(itemsList) {
        Text("Item is $it")
    }
}

or something like:

LazyRow(
    horizontalArrangement =   Arrangement.spacedBy(8.dp),
    modifier= Modifier.fillMaxSize()
) {
    //Header
    item(){
        Spacer(modifier = Modifier.width(40.dp))
    }
    items(itemsList) {
        Text("Item is $it")
    }
    //Footer
    item(){
        Spacer(modifier = Modifier.width(40.dp))
    }
}

enter image description here

1
Pedro Oliveira On

Maybe you can get the effect you're looking for with one of the paramenters for LazyRow: contentPadding = PaddingValues(horizontal = "your_value")