The y position of the composable changes when the ...

# compose

[Indu]

The y position of the composable changes when the state that is used for changing the shape or color of the composable gets updated.

[Indu]

I'm using a custom layout to place those composables. If the same composables are placed in a row instead of my custom layout, the shape or color gets updated correctly and the y position of those composables are not changed. Am I missing anything in my custom layout?

[Indu]

Android Emulator - Pixel_3_API_30_5554 2021-06-10 21-17-08.mp4

[Indu]

@ExperimentalMaterialApi
@Composable
private fun Months(selectedMonths: List<String>,
                   onMonthSelect: (String) -> Unit,
                   color: Color,
                   shape: Shape,
                   modifier: Modifier = Modifier
) {

        Column() {
            Header(
                name = stringResource(id = R.string.months),
                color = colorResource(id = R.color.header1)
            )
            Row(
                modifier = modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {

                LayoutContainer(
                    modifier = modifier
                        .padding(8.dp)
                    .background(
                        color = colorResource(id = R.color.grey800)
                    )
                )
                {
                    for (month in CalMonths.values()) {
                        Month(month.name, color, onMonthSelect, selectedMonths = selectedMonths)
                    }
                }
            }
        }

}
@ExperimentalMaterialApi
@Composable
private fun Month(name: String, color: Color, onMonthSelect: (String) -> Unit,selectedMonths: List<String>){

    var mthSurfaceModifier: Modifier = Modifier
        .padding(4.dp)
        .size(width = CELL_SIZE, height = CELL_SIZE)

    MonthSurface(
        color = MaterialTheme.colors.surface,
        modifier = mthSurfaceModifier,
        name = name,
        onMonthSelect = onMonthSelect,
        selectedMonths = selectedMonths
    ) {

            Text(
                textAlign = TextAlign.Center,
                text = name,
                color = Color.White,
                style = MaterialTheme.typography.button)
    }

}

[Indu]

@ExperimentalMaterialApi
@Composable
private fun MonthSurface(color: Color,
                         modifier: Modifier,
                         name: String,
                         onMonthSelect: (String) -> Unit,
                         selectedMonths: List<String>,
                         content: @Composable () -> Unit,
){
    val monthTransitionState = monthTransition(month = name,selectedMonths = selectedMonths)

    Surface(
        modifier = modifier,
        shape = RoundedCornerShape(MONTH_CORNER),
        onClick = { onMonthSelect(name) },
        color = monthTransitionState.colorAlpha
    ) {

        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally) {
            content()
        }
    }

}

[Zach Klippenstein (he/him) [MOD]]

What’s LayoutContainer?

[Indu]

Sorry, I forgot to post the Layoutcontainer code.. it's just the temp name of the custom layout ..

[Indu]

@Composable
fun LayoutContainer(modifier: Modifier=Modifier, content: @Composable () -> Unit){

    Layout(
        modifier = modifier.padding(bottom=12.dp),
        content = content
    ) { measurables, constraints ->

        var rowWidths = mutableListOf<Int>()
        var rowWidth = 0
        var maxRowElements = 0
        var layoutHeight = 0
        var layoutWidth = 0
        var rows = 0

        val placeables = measurables.map { measurable ->

            val placeable = measurable.measure(constraints)

            if((rowWidth + placeable.width) >= constraints.maxWidth)
            {
                rowWidths.add(rowWidth)
                ++rows
                rowWidth = 0

            }
            rowWidth += placeable.width
            placeable
        }

        rowWidths.add(rowWidth)
        ++rows

        layoutHeight = placeables[0].height * rows
        layoutWidth = rowWidths.maxOf { it }

        maxRowElements =  layoutWidth/placeables[0].width

        var xPosition = 0
        var yPosition = 0
        var rowElements = 0

        layout(layoutWidth,layoutHeight){
            placeables.forEach {
                if(rowElements >= maxRowElements){
                    xPosition = 0
                    yPosition += it.height
                    rowElements = 0
                }
                it.place(xPosition,yPosition)
                xPosition = xPosition + it.width
                ++rowElements
            }
        }
    }
}