Jetpack Compose - AnimatedVisibility slideInHorizontally Lazy Row Clipping Children

Question

I have a LazyRow and I wanted to have a slideInHorizontally effect with a bounce effect. But, the child on the right is always clipped. I remembered back in the XML, you can easily just clipToBounds = false.

But, can't seemed to able to achieve the same effect with Compose.

Segment

slideInHorizontally( initialOffsetX = { it }, animationSpec = spring( dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessLow ) )

Code

val cards = (1..52).map { it.toString() } val lazyListState = rememberLazyListState() Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { var visible by remember { mutableStateOf(false) } LaunchedEffect(Unit) { visible = true } AnimatedVisibility( visible = visible, enter = slideInHorizontally( initialOffsetX = { it }, animationSpec = spring( dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessLow ) ), ) { LazyRow( modifier = Modifier.align(Alignment.BottomCenter), state = lazyListState, contentPadding = PaddingValues(16.dp), horizontalArrangement = Arrangement.spacedBy(12.dp), flingBehavior = ScrollableDefaults.flingBehavior(), ) { items(cards) { card -> Card( modifier = Modifier.size(width = 150.dp, height = 210.dp), shape = RoundedCornerShape(8.dp), colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.onPrimaryContainer) ) { Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { Text(card, color = MaterialTheme.colorScheme.onPrimary) } } } } } }

If anyone is curious, I've managed to adopt's @BenjyTec's approach and implemented in my redesigned King's Cup game. It's up! github.com/delacrixmorgan/kingscup-kmp — Morgan Koh
– Morgan Koh, Commented Jul 20 at 21:20

BenjyTec · Accepted Answer · 2025-05-26 07:37:15Z

You can achieve this by forcing the LazyRow viewport to be bigger than the screen width. This can be done by using the layout Modifier:

LazyRow( modifier = Modifier .align(Alignment.BottomCenter) .layout { measurable, constraints -> val width = constraints.maxWidth + 150.dp.roundToPx() // increase width by one Card val forcedConstraints = constraints.copy(minWidth = width, maxWidth = width) val placeable = measurable.measure(forcedConstraints) layout( placeable.width, placeable.height ) { val xPos = (placeable.width - constraints.maxWidth) / 2 placeable.placeRelative(xPos, 0) // shift to the right } }, state = lazyListState, contentPadding = PaddingValues(start = 16.dp, end = 150.dp + 16.dp), // compensate bigger width here horizontalArrangement = Arrangement.spacedBy(12.dp), flingBehavior = ScrollableDefaults.flingBehavior(), ) { // ... }

Output

Note

You should calculate the additional width needed in the layout Modifier depending on the screen width of the device - on tablets, 150.dp might not be enough.

Thanks for the detailed answer and explaination! I wished there was something easier than this, but this has let me understand about the Compose viewport.
This only works when the LazyRow occupies the entire screen width so it can extend off-screen without any visual issues. However, if you place some other components right of the LazyRow they are now hidden behind its extended width.

Collectives™ on Stack Overflow

Jetpack Compose - AnimatedVisibility slideInHorizontally Lazy Row Clipping Children

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related