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.