A modern programming language that makes developers happier.

kotlinlang

I have created a custom HorizontalOrVertical Arrangement. Its working fine (for the most part).
Assume that I put three compassables(width=30.dp each) inside a Row. So row width will be 30.dp*3 = 90.dp. But in my custom arrangement composables can overlap(eg. like, comment and share button in facebook). Assume that overlapSize is 6.dp, so that effective width of all three composables is (30-10).dp*3 = 60.dp.
But the issue is row's width is still 90.dp. How can I fix it? More in thread.

```@Stable
@Composable
fun Arrangement.rememberOverlappingFormat(overlapSize: Int): Arrangement.HorizontalOrVertical = remember(overlapSize) {
    OverlappingFormat(overlapSize)
}

class OverlappingFormat(private val overlapSize: Int) : Arrangement.HorizontalOrVertical {
    override fun Density.arrange(totalSize: Int, sizes: IntArray, layoutDirection: LayoutDirection, outPositions: IntArray) {
        arrange(totalSize, sizes, outPositions)
    }

    override fun Density.arrange(totalSize: Int, sizes: IntArray, outPositions: IntArray) {
        sizes.forEachIndexed { index, _ -&gt;
            outPositions[index] = sizes.take(index).sum() - overlapSize * index
        }
    }
}```


Usage
```Row(
        horizontalArrangement = Arrangement.rememberOverlappingFormat(overlapSize.toPx().roundToInt())
    ) {
        itemsListOfThree.forEach {
            Box(
                modifier = Modifier
                    .size(32.dp)
                    .clip(CircleShape)
                    .border(
                        width = 2.dp,
                        color = Color(0xFF1A1A1A),
                        shape = CircleShape
                    )
                    .zIndex((reactionUrlsList.size - index).toFloat()),
            )
        }
    }```

Screenshot 2022-05-16 at 9.54.37 PM.png

Final Result
Look at the extra spacing at the end

I would say that you should go with custom `Layout` instead of custom arrangement as Row measures it's size before applying arrangement to it's children.

Actually for a similar use case we recently used LazyRow with the arrangement of `.spacedBy(-4.dp)`

image.png

Looks like it works also with `Row`
However you may tweak z-index so that items are laid out as in your case
```Row(
    horizontalArrangement = Arrangement.spacedBy(-50.dp),
    modifier = Modifier.background(Color.White)
) {
    repeat(4) {
        Image(
            painter = painterResource(R.drawable.android),
            contentDescription = null,
            modifier = Modifier
                .size(100.dp)
                .background(Color.White, CircleShape)
                .padding(8.dp)
                .background(Color.Black, CircleShape)
                .padding(8.dp)
                .zIndex(-it.toFloat())
        )
    }
}```

Thanks <@U01K2T6RZK2>. I will try it. This was really simple. Again thanks.