jetpack compose scrollable column and Modifier 2022

This article will show you how to make the jetpack compose scrollable column. Refer to Jetpack compose articles to see other concepts.But you are missing functionality that you will eventually require. What happens if you need to display more elements on your screen? These elements may be all assembled, but you are unable to see all of them due to the small screen. You may want to add infinite numbers of elements to the screen dynamically and still be able see all.

This problem can be solved by allowing your content scroll horizontally or vertically. This feature can be implemented using ScrollView. It allows vertical scrolling. For horizontal scrolling, you use HorizontalScrollView. Each can only have one child view within them. To add multiple elements to them, you will need to use a single layout to wrap them.

Jetpack Compose offers a new way for you to achieve the same result using scrollable, lazily constructed containers.

This chapter will show you how to create lists and grids with Jetpack Compose. These will help you to fit all your content onto the screen. This chapter will show you how to display content horizontally or vertically, and how to create an alternative to the RecyclerView by using composable operations.

jetpack compose scrollable column

2. Jetpack makes column

A Column layout is one that allows you to place your children vertically. By default, Column items do not scroll.

@Composable
fun ScrollableColumn() {
    Column {
        Text("Codeplayon ")
        Text("Codeplayon simple learning mobile. Code and lean share and explore new tech")
    }
}

2.1. Scrollable Column Jetpack Compose

The modifiers let you decorate or configure a composable. You can use the verticalScroll() modifier to create a Scrollable Column.

If the maximum height constraint is exceeded, then the Column contents would scroll vertically.

Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())) {
        Text("Codeplayon")
        Text("Codeplayon learn share and expolre new rech stack android studio, flutter , jetpcak compose.")
    }

Modifier for verticalScroll 2.2

The VerticalScroll Modifier allows the user to scroll elements whose bounds exceed their maximum size limits.

To determine the initial scroll position, it takes as an argument the ScrollState. This ScrollState object allows developers to modify the scroll position and get the current scrolling status by calling methods.

The scrollTo method of the allows for you to jump to the desired position (in pixels) instantly.

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

The rememberScrollState creates scroll states based on scroll configuration. It handles scroll behavior during recomposition to ensure that the position does not get lost.

The following parameters are required for a verticalScroll modifier:

1. ScrollState scroll position (scroll position).
2. enabled: Should scrolling be enabled via touch input?
3. FlingBehavior After drag is finished with velocity
4. reverseScrolling: reverse scrolling.

3. Conclusion

We have figured out how to make the Jetpack’s Column scrollable using the verticalScroll mod.

Read More Tutorial 

• Codeplayon Jetpack Compose Tutorial 
• Codeplayon Android Tutorial 
• Codeplayon Flutter Tutorial 
• Codeplayon on Github