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 usingScrollView. It allows vertical scrolling.For horizontal scrolling, you useHorizontalScrollView.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 theRecyclerViewby using composable operations.

jetpack compose scrollable column

2.Jetpack makes column

AColumnlayout is one that allows you to place your children vertically.By default,Columnitems 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

Themodifierslet you decorate or configure a composable.You can use theverticalScroll()modifier to create aScrollable Column.

If the maximum height constraint is exceeded, then theColumncontents 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 theScrollState.ThisScrollStateobject allows developers to modify the scroll position and get the current scrolling status by calling methods.

ThescrollTomethod of theallows for you to jump to the desired position (in pixels) instantly.

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

TherememberScrollStatecreates 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. ScrollStatescroll position (scroll position).
2. enabled: Should scrolling be enabled via touch input?
3. FlingBehaviorAfter drag is finished with velocity
4. reverseScrolling: reverse scrolling.

3.Conclusion

We have figured out how to make the Jetpack’sColumnscrollable using theverticalScrollmod.

Read More Tutorial

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