I used the code below to create the avatar with initials as placeholder, please refer to screenshot above
Box(
modifier = Modifier
.clip(CircleShape)
.background(backgroundColor),
contentAlignment = Alignment.Center,
) {
Text(
text = initialText,
color = MaterialTheme.colorScheme.onPrimary,
style = textStyle,
)
}
// And putting it into a simple LazyColumn (some code are omitted to keep it simple)
LazyColumn(
state = lazyListState,
modifier = Modifier
.fillMaxWidth()
.weight(1f),
verticalArrangement = Arrangement.Top
) {
//content containing the avatar and names
}
It works fine in preview and on normal composable screens I put it in.
However when using it in LazyColumn, it sometimes rendered as a square inside of round circle, as you can see from the screenshot. I also recorded a video, showing that if I scroll the items away from view, then scroll back, sometimes they will fix themselves and become circle shape again, whereas some of the circles will become square.
Here’s the video recording showing the scrolling: https://imgur.com/a/oVHl7ok
I did some googling but could not find any topic regarding this, or maybe I am not using the right keywords. Where can I start looking? Any suggestions? Thanks!