Build Layouts with Jetpack Compose

Sep 10 2024 · Kotlin 1.9, Android 14, Android Studio Iguana | 2023.2

Lesson 01: Use Scrolling Modifiers

Demo

Episode complete

Play next episode

Next
Transcript

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.

See forum comments
Cinema mode Download course materials from Github
Previous: Instruction Next: Conclusion