Scrollable Column Jetpack Compose

1. Overview

In this article, we will learn to make the Jetpack compose Column scrollable. You can refer to our articles on Jetpack compose to learn other concepts.

2. Jetpack compose column

A Column is a layout composable that places its children in a vertical sequence. By default, Column items do not scroll.

@Composable
fun ScrollableColumn() {
    Column {
        Text("Lorem ipsum")
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
    }
}

2.1. Scrollable Column Jetpack Compose

The modifiers allow us to decorate or configure a composable. To configure a Column scrollable, you can use the verticalScroll() modifier.

For example, the contents of the below Column would scroll vertically when the content is larger than the maximum height constraint.

Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())) {
        Text("Lorem ipsum")
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
    }

2.2. verticalScroll modifier

The verticalScroll modifier provides the simplest way to allow the user to scroll an element when the bounds of its contents are larger than its maximum size constraints.

It takes the ScrollState as an argument to determine the initial scroll position. A ScrollState allows the developer to change the scroll position or get the current scrolling state by calling methods on this object.

For example, the method scrollTo of the ScrollState allows you to jump to the specified position (in pixels) immediately.

val scrollState = rememberScrollState()
scrollState.scrollTo(scrollState.value - 1000)

The rememberScrollState creates a scroll state based on the scroll configuration and handles the scroll behavior during the recomposition so that the position is not lost.

A verticalScroll modifier takes the following parameters:

1. ScrollState – state of the scroll (scroll position) and remember the scroll state during recomposition
2. enabled – whether scrolling should enabled via touch input
3. FlingBehavior – Fling behavior after drag has finished with velocity
4. reverseScrolling – reverse the direction of scrolling.

3. Conclusion

To sum up, we have learned to make the Jetpack compose Column scrollable by using the verticalScroll modifier.