jetpack compose - Column vertical scrolling

Compose Column Vertical Scrolling

The Column is one of the most used layout widgets in the jetpack compose library. Column place child items vertically on the android application user interface. A Column displays its items one after another vertically oriented.

When a Column layout holds many items and all items can’t show in the available visible screen area, then we need to scroll Column layouts to see invisible items. But by default Column layout is not scrollable. If we do not implement the Column scrolling functionality the rest items whose not get available space will remain hidden.

This android application development tutorial will demonstrate to us how we can enable vertical scrolling of a Column layout widget in the jetpack compose. The following code put a Column layout in a composable function. Then we put hundred Text items inside it by looping them. Huge items, so only a few items are placed in the Column’s visible area and the rest are hidden.

Now we create a ScrollState object instance by using the rememberScrollState() method. This ScrollState object enables the scrolling behavior of a Column widget and makes the Column vertically scrollable by using it in the Column’s modifier ‘verticalScroll’ element. Modifier’s ‘verticalScroll’ element allows scroll vertically when the height of the content is bigger than the maximum constraints allow.

ScrollState class is the state of the scroll. ScrollState class allows the android developer to change the scroll position of a Scrollable layout widget. It also allows the jetpack developer to get the current scrolling position of a layout widget. So by using the ScrollState instance we can make a Column vertically scrollable, smoothly scroll to a specified position with animation even can get the current scroll position.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val scrollState = rememberScrollState()

        // Smooth scroll to specified pixels on first composition
        LaunchedEffect(Unit) { scrollState.animateScrollTo(10000) }

        Column(
            modifier = Modifier
                .background(Color(0xFFEDEAE0))
                .fillMaxSize()
                .verticalScroll(scrollState)
        ) {
            repeat(100){ counter ->
                Text(
                    text = "Counter : $counter",
                    fontSize = 30.sp,
                    color = Color(0xFFFFB200),
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .fillMaxWidth()
                        .clip(RoundedCornerShape(8.dp))
                        .background(Color(0xFF58111A))
                        .padding(1.dp)
                        .background(
                            if (counter%2 == 0)Color(0xFFDC143C)
                            else Color(0xFF856088)
                        )
                        .padding(25.dp)
                )
            }
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}