Why is my text clipped in each row of this Android Jetpack Compose list?

Issue

I have created a LazyColumn of stations and when the text is to long in a row it clips the text, even though I am specifying overflow = TextOverflow.Ellipsis. How do I fix this?

@Composable
fun StationsList(stations: List<StationAqi>) {
    LazyColumn(
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
        verticalArrangement = Arrangement.spacedBy(4.dp),
    ) {
        stations.map { station ->
            item {
                StationListItem(station = station)
            }
        }
    }
}

@Composable
fun StationListItem(station: StationAqi) {
    LazyRow(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = CenterVertically,
        modifier = Modifier.padding(horizontal = 0.dp, vertical = 8.dp)
    ) {
        item {
            Surface(
                color = colorFromAqi(station.aqi),
                shape = MaterialTheme.shapes.medium,
            ) {
                Box(
                    modifier = Modifier
                        .defaultMinSize(44.dp, Dp.Unspecified)
                        .padding(PaddingValues(horizontal = 8.dp, vertical = 4.dp)),
                    contentAlignment = Center,
                ) {
                    Text(
                        text = station.aqi,
                        textAlign = TextAlign.Center,
                        overflow = TextOverflow.Ellipsis,
                    )
                }

            }
        }
        item {
            Text(text = station.station.name)
        }
    }
}

data class StationAqi(
    val uid: Int,
    val lat: Double,
    val lon: Double,
    val aqi: String,
    val station: Station
)

data class Station(
    val name: String,
    val time: String
)

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ZephyrTheme {
        StationsList(listOf(
            StationAqi(1, 1.0, 1.0, "2", Station("Oakland-Laney College, Alameda, California", "2022-01-07T16:00:00-08:00")),
            StationAqi(2, 1.0, 1.0, "45", Station("San Pablo-Rumrill, Contra Costa, California", "2022-01-07T16:00:00-08:00")),
            StationAqi(3, 1.0, 1.0, "122", Station("San Francisco CA","2022-01-07T16:00:00-08:00")),
            StationAqi(4, 1.0, 1.0, "245", Station("Palo Alto CA", "2022-01-07T16:00:00-08:00"))


        ))
    }
}

@Preview()
@Composable
fun StationListItemPreview() {
    ZephyrTheme {
        StationListItem(station = StationAqi(1, 1.0, 1.0, "2", Station("Oakland-Laney College, Alameda, California", "2022-01-07T16:00:00-08:00")))
    }
}

Solution

Turns out the problem wasn't with the LazyColumn, it was with each row. As you can see StationListItem() creates LazyRows but really it should be creating Rows because I'm not trying to create a horizontally-scrolling list.

I also (embarrassingly) had the overflow property set on the wrong Text field. Switching it to the correct one and adding maxLines = 1 truncated the text with "..." as desired.

Fix is to change the StationListItem function to the following:

@Composable
fun StationListItem(station: StationAqi) {
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = CenterVertically,
        modifier = Modifier.padding(horizontal = 0.dp, vertical = 8.dp)
    ) {
        Surface(
            color = colorFromAqi(station.aqi),
            shape = MaterialTheme.shapes.medium,
        ) {
            Box(
                modifier = Modifier
                    .defaultMinSize(44.dp, Dp.Unspecified)
                    .padding(PaddingValues(horizontal = 8.dp, vertical = 4.dp)),
                contentAlignment = Center,
            ) {
                Text(
                    text = station.aqi,
                    textAlign = TextAlign.Center,
                )
            }

        }
        Text(
            text = station.station.name,
            overflow = TextOverflow.Ellipsis,
            maxLines = 1
        )
    }
}

Answered By - Andrew Stromme