Someone knows why individual item shows `Divider` ...

# compose

[Jhonatan Sabadi]

Someone knows why individual item shows Divider and LazyRow hides Divider ?

[lilypuchi]

Can you post a code snippet?

[Jhonatan Sabadi]

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(bottom = 24.dp, top = 24.dp)
) {
    Column(
        modifier = Modifier.padding(start = 24.dp)
    ) {
        Text(volume.name)
        Text(volume.consumption.toString())
    }
    Divider(color = Color.Black, thickness = 1.dp)
    Row(
        horizontalArrangement = Arrangement.SpaceAround,
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 24.dp, end = 32.dp, top = 16.dp)
    ) {
        Text(
            text = stringResource(R.string.poc_profile_kpi_volume_title_month),
            textAlign = TextAlign.Center
        )
        Spacer(Modifier.width(16.dp))
        Text(
            text = stringResource(R.string.poc_profile_kpi_volume_title_year),
            textAlign = TextAlign.Center
        )
    }
    Row(
        horizontalArrangement = Arrangement.spacedBy(64.dp),
        modifier = Modifier.align(CenterHorizontally)
    ) {
        DonutProgress(
            backgroundColor = colorResource(R.color.color_neutral_03),
            foregroundColor = colorResource(R.color.color_primary_02),
            progress = volume.percentageCurrentMonthToMonthOfPreviousYear?.toInt() ?: 0,
            progressText = volume.percentageCurrentMonthToMonthOfPreviousYear.toString(),
            strokeWidth = 10.dp,
        )
        DonutProgress(
            backgroundColor = colorResource(R.color.color_neutral_03),
            foregroundColor = colorResource(R.color.color_primary_02),
            progress = volume.percentageCurrentMonthToPreviousMonth?.toInt() ?: 0,
            progressText = volume.percentageCurrentMonthToPreviousMonth.toString(),
            strokeWidth = 10.dp,
        )
    }
}

[Jhonatan Sabadi]

LazyRow(
    contentPadding = PaddingValues(24.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    items(volumes) { volume ->
        VolumeItem(volume = volume)
    }
}

[Jhonatan Sabadi]

Using normal column works, but with LazyColumn does not work

[lilypuchi]

I found the solution but I’m totally clear if my explanation is correct completely.

So basically, you’re declaring Modifier.fillMaxWidth() to the parent Column in VolumeItem, instead of passing it as a parameter like

@Composable
fun VolumeItem(
    modifier: Modifier = Modifier,
    data: Data,
)

Modifier.fillMaxWidth() emits a FillModifier whose internal implementation shows it needing well defined constraints to place the children properly.

So, when you simply use it as a single item, it’s constraints are well defined (I guess you must be using it as a child of AppTheme { Box { .. }}

In case of lazy dynamic layout, I guess you have to provide the constraints of height or width (depending on orientation) like a fixed value or weighted constraints for proper calculation of parent’s layout bounds. Which is why it falls back to 0 width.

Here was my fix,

LazyRow(
                    modifier = Modifier.fillMaxWidth(),
                    contentPadding = PaddingValues(start = 24.dp),
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    items(10) {
                        VolumeItem(
                            modifier = Modifier.width(100.dp),
                            name = "Beer",
                            consumption = 10,
                        )
                    }
                }

Volume Item

@Composable
fun VolumeItem(
    modifier: Modifier = Modifier,
    name: String,
    consumption: Int,
) {
    Column(
        modifier = modifier
            .background(Color.LightGray)
            .padding(bottom = 10.dp, top = 24.dp)
    ) {
        Column(
            modifier = Modifier.padding(start = 24.dp)
        ) {
            Text(name)
            Text(consumption.toString())
        }
..
}
}

[lilypuchi]

Please don’t take my explanation is accurate. This is what I made off of going roughly over the source code

[Jhonatan Sabadi]

Thank you so much for your answer!!! I’ll try this solution

[Jhonatan Sabadi]

You’re right, it really works like a charm

[Jhonatan Sabadi]

[Jhonatan Sabadi]

Now, i need to try adjust size properly

[Jhonatan Sabadi]

The final solution is to set width with IntrinscSize.MAX

[Jhonatan Sabadi]

items(volumes) { volume ->
    VolumeItem(
        modifier = Modifier.width(IntrinsicSize.Max),
        volume = volume
    )
}

Thanks for explain

[Jhonatan Sabadi]

[lilypuchi]

Well that's upto your UI ☺️ Glad it worked out

It is always a good practice to pass modifier parameter to View Composables. All of the official android samples follow the same strategy.

[lilypuchi]

It's recommended in the official docs too
https://developer.android.com/jetpack/compose/modifiers

[Jhonatan Sabadi]

i’ll start to use it as documentation