Build Layouts with Jetpack Compose

Open the Starter project in the 01-using-scrolling-modifiers directory of the m3-ljp-materials repo in Android Studio Hedgehog or later.

Build and run the project.

This is the same project you worked on in the previous module.

In this lesson, you’ll make the GitHub Repos list scrollable.

Open the MainActivity.kt file.

In the GitHubRepoList composable, add a verticalScroll modifier. Add the imports for verticalScroll and rememberScrollState.

@Composable
fun GitHubRepoList() {
    val viewModel: MainViewModel = viewModel()
    val state by viewModel.state.observeAsState()
    Column(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
    ) {
        state?.forEach { repo ->
            GitHubRepoCard(repo)
            Spacer(modifier = Modifier.height(16.dp))
        }
    }

Chaining the verticalScroll modifier makes the list scrollable.

Build and run the app and try scrolling on the list.

In the next lesson you will learn about lazy lists which are optimized for loading large datasets.

That concludes this demo, continue with the lesson for a summary.