Got a strange ellipsis issue with Compose 1.5 (and...

# compose-android

[Tolriq]

Got a strange ellipsis issue with Compose 1.5 (and maybe 1.4) it's deep in the hierarchy but

Box(Modifier.fillMaxWidth()) {
            Text(
                text = "a very very long  very very long  very very long  very very long  very very long  very very long text",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                style = MaterialTheme.typography.bodyLarge,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .padding(horizontal = 16.dp, vertical = 4.dp),
                color = MaterialTheme.colorScheme.onBackground,
            )
        }

Will have the text move to the right continuously on each recomposition. Removing the padding fix the issue. Not sure I understand the relation between them.

[Tolriq]

Moving the padding to the box does not fix this. Removing the padding fix it.

[Stylianos Gakis]

Would help if you posted a screenshot of what’s going wrong too

[Tolriq]

Here's a video in the expanded page see the second text line moving by itself to the right. This is the text from the code above.

ellipsis.mp4

[Tolriq]

Seems that's it's caused by a simple custom layout around.

[Stylianos Gakis]

Lmao where is it going? 😂
What did that cusotm layout do to make this happen?

[Tolriq]

Nothing and I need that layout. So for now I removed ellipsis.

[Tolriq]

fun PlayerLayout(
    modifier: Modifier = Modifier,
    albumArt: @Composable BoxScope.() -> Unit,
    controls: @Composable ColumnScope.() -> Unit,
) {
    Layout(
        modifier = modifier,
        contents = listOf(
            {
                Box(
                    modifier = Modifier
                        .fillMaxWidth(),
                    content = albumArt,
                )
            },
            {
                Column(
                    modifier = Modifier
                        .fillMaxWidth(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.SpaceBetween,
                    content = controls,
                )
            },
        ),
    ) { (albumArtMeasurables, controlsMeasurables), constraints ->

        val albumArt = albumArtMeasurables.single()
        val controls = controlsMeasurables.single()

        val maxWidth = constraints.maxWidth
        val maxHeight = constraints.maxHeight

        val controlsIntrinsicHeight = controls.minIntrinsicHeight(maxWidth)

        val albumArtPlaceable: Placeable = albumArt.measure(Constraints(minWidth = 0, maxWidth = maxWidth, minHeight = 0, maxHeight = (maxHeight - controlsIntrinsicHeight).coerceAtLeast(0)))
        val controlsPlaceable = controls.measure(
            Constraints(
                minWidth = 0,
                maxWidth = maxWidth,
                minHeight = 0,
                maxHeight = (maxHeight - albumArtPlaceable.measuredHeight).coerceAtLeast(0),
            ),
        )
        layout(constraints.maxWidth, constraints.maxHeight) {
            albumArtPlaceable.placeRelative(0, 0)
            controlsPlaceable.placeRelative(0, albumArtPlaceable.height)
        }
    }
}

[Tolriq]

Ping @Albert Chang in case he have an idea as he helped build that custom layout.

[Siyamed]

Can you please create a ticket for this?

[Siyamed]

cc @Sean McQuillan [G]

[Tolriq]

https://issuetracker.google.com/issues/276667314

[Tolriq]

And if by luck someone can help triage this https://issuetracker.google.com/issues/267194796 🙂

[Tolriq]

And eventually some insight about https://github.com/google/accompanist/issues/964#issuecomment-1409163538 and the layoutInDisplayCutoutMode too 🙂 (Sorry doing my market here on long lasting issues)