androidandroid-jetpack-composeandroid-jetpack-compose-list

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


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


Solution

  • 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