How to use the new scrollable2d modifier mentioned...

# compose

[Nabeel]

How to use the new scrollable2d modifier mentioned in the 1.9.0-alpha03 release? Any samples on how to set offset to the child when scrolling diagonally.

[Sergey Y.]

Usually, each public Compose API has documentation with a code sample showing how to use it.

https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier?hl=en#(androidx.compose.ui.Modifier).scrollable2D(androidx.compose.foundation.gestures.Scrollable2DState,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.FlingBehavior,androidx.compose.foundation.interaction.MutableInteractionSource)

[Sergey Y.]

Moreover, the Compose repository includes comprehensive samples that aim to cover every public API.
https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]ava/androidx/compose/foundation/samples/Scrollable2DSample.kt

[Nabeel]

I think both the samples only showing the offset value in a Text component.

[Sergey Y.]

And?

[Sergey Y.]

The offset can be applied to a layout using Modifier.offset { /* offset logic */ }, causing the layout to move.

[Nabeel]

That's where my problem is. Can't be able to make it work. When I tried the entire component is jumping along the scroll instead of scrolling the content.

Could you please share me how we can set the offset properly to scroll the content.

[Sergey Y.]

Screen_recording_20250522_115353.mp4

Screen_recording_20250522_115353.mp4

[Sergey Y.]

So far, I’ve made it work like this: the modifier doesn’t force the layout to match the size of its content. So, if you only apply scrollable2D, the content will be clipped by the parent’s bounds. I fixed this by adding the standard scrollable modifiers, and now it lays out correctly. However, I’m not sure if this is by design.

[Sergey Y.]

image.png,image.png

[Timo Drick]

Did you tried the wrapContent() modifier instead of the vertical/horizontalScroll one?

[Sergey Y.]

I tried, it didn’t help

[Timo Drick]

Ok interesting that the scrallable2d behaves like this. Maybe a bug? I would expect that it will set the max size to infinity

[Nabeel]

Thanks @Sergey Y.
Could you please help me with one more issue.

How to set offset within the bounds of parent Composable?

[Sergey Y.]

You need to disable scrolling when the offset is negative (i.e., moved beyond the top-left bound) or when the offset is greater than or equal to the bottom-right bound of the scrollable content. But ideally, this should work automatically, otherwise, this modifier is just a version of the draggable one with inertia.

[Nabeel]

Okay, Thanks 👍

[Sergey Y.]

I suspect the modifier is still a work in progress and not fully implemented.

[Nabeel]

Might be. I think in my case it's better to wait until beta or rc release.