CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-orientationandroid-scroll
Raj Narayanan
Raj Narayanan

Reputation: 3442

How to scroll Jetpack Compose screen that overflows its contents?

I have an Add Shopping List item Jetpack Compose screen which contains several TextField inputs and an image container at the bottom. The screen overflows at the bottom and is cut off. How can I scroll the screen?

Upvotes: 5

Views: 14003

Answers (3)

Master Developer
Master Developer

Reputation: 43

You can use the modifier verticalScroll on your container to achieve this.

Column(
  modifier = Modifier.verticalScroll(state = rememberScrollState())
) { 
  ...
}

Upvotes: 1

Primož Ivančič
Primož Ivančič

Reputation: 2376

EDIT: October 2023

At some point along the way this was changed and the old solution does not work anymore. The solution to this question is now:

val scrollState = rememberScrollState()
...
Column( // or whatever your parent composable is
    modifier = Modifier
        .verticalScroll(state = scrollState)
) {
    ...
}

Old solution

Add Modifier.scrollable(..) to the container that you wish to make scrollable. Code would be something like this:

val scrollState = rememberScrollState()
...
Box( // or whatever your parent composable is
    modifier = Modifier
        .scrollable(state = scrollState, orientation = Orientation.Vertical)
) {
    ...
}

Of course, there are other Modifier methods for making composables scrollable that might fit better for your case.

Upvotes: 11

Burak Karaduman
Burak Karaduman

Reputation: 153

If the approved answer is not working try like below

val scrollState = rememberScrollState()

Column(
    modifier = Modifier.verticalScroll(state = scrollState)
) { 
    ...
}

Do not forget to apply it to your parent composable

Upvotes: 2

Related Questions