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

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

00:08Build and run the project.

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

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

00:23Open the MainActivity.kt file.

00:27In 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))
        }
    }

00:39Chaining the verticalScroll modifier makes the list scrollable.

00:44Build and run the app and try scrolling on the list.

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

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

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