https://kotlinlang.org logo
#compose
Title
# compose
j

Jhonatan Sabadi

06/03/2022, 2:14 PM
Someone knows why individual item shows
Divider
and
LazyRow
hides
Divider
?
1
l

lilypuchi

06/03/2022, 2:21 PM
Can you post a code snippet?
j

Jhonatan Sabadi

06/03/2022, 2:22 PM
Copy code
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,
        )
    }
}
Copy code
LazyRow(
    contentPadding = PaddingValues(24.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    items(volumes) { volume ->
        VolumeItem(volume = volume)
    }
}
👍 1
Using normal column works, but with LazyColumn does not work
l

lilypuchi

06/03/2022, 2:59 PM
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
Copy code
@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,
Copy code
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
Copy code
@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())
        }
..
}
}
🙌 1
Please don’t take my explanation is accurate. This is what I made off of going roughly over the source code
j

Jhonatan Sabadi

06/03/2022, 4:06 PM
Thank you so much for your answer!!! I’ll try this solution
👍 1
You’re right, it really works like a charm
😃 1
🙌 1
Now, i need to try adjust size properly
The final solution is to set width with IntrinscSize.MAX
Copy code
items(volumes) { volume ->
    VolumeItem(
        modifier = Modifier.width(IntrinsicSize.Max),
        volume = volume
    )
}
Thanks for explain
l

lilypuchi

06/03/2022, 4:16 PM
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.
It's recommended in the official docs too https://developer.android.com/jetpack/compose/modifiers
j

Jhonatan Sabadi

06/03/2022, 4:20 PM
i’ll start to use it as documentation
4 Views