I have created a custom HorizontalOrVertical Arrangement Its

Question

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

Abhinav Suthar · Answer

``` 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 ```

Abhinav Suthar · Answer

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 ```

Abhinav Suthar · Answer

Final Result Look at the extra spacing at the end

Oleksandr Balan · Answer

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

Oleksandr Balan · Answer

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

Oleksandr Balan · Answer

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 ```

Abhinav Suthar · Answer

Thanks < Oleksandr Balan> I will try it This was really simple Again thanks