How to enable Vertical Scroll for Column in Android Compose?

Android Compose – Enable Vertical Scroll for Column

To enable Column to allow to scroll vertically when the height of the content inside Column is bigger than the allowed height/constraints, use Modifier.verticalScroll() for the Column modifier parameter.

The following code snippet shows how to enable vertical scroll for a Column.

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

Modifier.verticalScroll() takes ScrollState object for state parameter. We can pass rememberScrollState() to set ScrollState with default parameters.

Example

In this example, we display a list of items in a Column, where the items run out of the allowed height of the Column. So, we enable the vertical scroll for this column, so that user can scroll through the items vertically.

Create a Project in Android Studio with Empty Compose Activity template, and modify MainActivity.kt file as shown in the following.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(color = MaterialTheme.colors.background) {
                    ItemList(100)
                }
            }
        }
    }
}

@Composable
fun ItemList(count: Int) {
    Column(modifier = Modifier.verticalScroll(rememberScrollState()).fillMaxWidth()) {
        repeat(count) { counter ->
            Text("Item $counter", Modifier.padding(10.dp))
        }
    }
}

Screenshot

Try scrolling vertically over the items, and the user should be able to do that.

Conclusion

In this Android Jetpack Compose Tutorial, we learned how to enable vertical scroll for Column.