0Pricing
Jetpack Compose Academy · Lesson

Scroll State & Programmatic Scrolling

Read and control list scroll position.

Scroll State & Programmatic Scrolling is a free Jetpack Compose Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Controlling the Scroll

Sometimes you need to read how far a list has scrolled, or jump it somewhere yourself. That is the job of a scroll state. 🎚️

rememberLazyListState

Create and hold a list state with rememberLazyListState, then pass it to your LazyColumn, LazyRow, or grid.

val listState = rememberLazyListState()
LazyColumn(state = listState) { }

Grids Have State Too

A grid uses its own holder, rememberLazyGridState. Wire it the same way to track and drive a LazyVerticalGrid.

val gridState = rememberLazyGridState()
LazyVerticalGrid(state = gridState, columns = GridCells.Fixed(2)) { }

Reading the First Item

Ask the state for firstVisibleItemIndex to know which item sits at the top of the viewport right now.

val firstIndex = listState.firstVisibleItemIndex

Detecting Scroll Direction

The flag isScrollInProgress tells you whether the user is actively scrolling, handy for hiding a toolbar while they move.

if (listState.isScrollInProgress) hideToolbar()

Jump Instantly

To snap straight to an item with no animation, call scrollToItem from a coroutine scope.

scope.launch {
    listState.scrollToItem(index = 0)
}

Scroll Smoothly

For a gentle glide instead of a jump, use animateScrollToItem. It is great for a back-to-top button.

scope.launch {
    listState.animateScrollToItem(0)
}

Why a Coroutine Scope

Scrolling is a suspend operation, so it must run in a coroutine. Grab a rememberCoroutineScope to launch it from a click.

val scope = rememberCoroutineScope()
Button(onClick = { scope.launch { listState.animateScrollToItem(0) } }) { }

Show a Back-to-Top Button

Combine the two ideas: derive a visibility flag from firstVisibleItemIndex, then animate-scroll to zero on tap.

val showFab by remember {
    derivedStateOf { listState.firstVisibleItemIndex > 5 }
}

Survives Recomposition

Because the state is remembered, the scroll position survives recomposition. Use rememberSaveable variants to keep it across rotation.

State Drives the UI

The pattern is consistent: hold a scroll state, read it to react to position, and call its scroll functions to move the list yourself.

Quick Check

One on smooth scrolling.

Recap: Scroll Control

You learned to hold a scroll state, read firstVisibleItemIndex, and drive lists with scrollToItem and animateScrollToItem from a coroutine. 🚀

Frequently asked questions

Is the “Scroll State & Programmatic Scrolling” lesson free?

Yes — the full text of “Scroll State & Programmatic Scrolling” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.

What will I learn in “Scroll State & Programmatic Scrolling”?

Read and control list scroll position. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Jetpack Compose Academy?

No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Scroll State & Programmatic Scrolling” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Jetpack Compose Academy lesson?

Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. LazyVerticalGrid Galleries
  2. LazyRow for Carousels
  3. Adaptive vs Fixed Grid Cells
  4. Scroll State & Programmatic Scrolling
← Back to Jetpack Compose Academy