Preserving Tab State on Switch
Keep each tab's scroll and state.
Preserving Tab State on Switch is a free Jetpack Compose Academy lesson on CoddyKit — lesson 3 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.
The Lost Scroll Problem
By default, leaving a tab and coming back rebuilds it from scratch, so your scroll position and inputs vanish. Annoying, right? 😅
Why It Happens
A plain navigate replaces the destination, so Compose forgets the old screen. Preserving state means telling navigation to save it instead.
Save on the Way Out
When you pop the old tab, add saveState so its UI state is stored rather than thrown away.
popUpTo(startRoute) {
saveState = true
}Restore on the Way In
When you navigate to the tab, set restoreState so its previously saved state comes right back.
navController.navigate(tab.route) {
restoreState = true
}The Three-Flag Combo
Together saveState, restoreState, and launchSingleTop give the classic, smooth tab-switching behavior users expect.
popUpTo(start) { saveState = true }
launchSingleTop = true
restoreState = truerememberSaveable Helps Too
For values inside a screen, rememberSaveable keeps things like text fields alive across recreation, complementing nav state saving.
var query by rememberSaveable { mutableStateOf("") }Lists Need Saved Scroll
A LazyColumn keeps its scroll when you use rememberLazyListState, and saved nav state lets that survive a tab round-trip.
val listState = rememberLazyListState()
LazyColumn(state = listState) { /* ... */ }Watch the Start Route
Always pop up to the same start destination id so the saved-state bundles map back to the correct tab.
popUpTo(navController.graph.findStartDestination().id)Verify by Switching
Test it: scroll one tab, jump to another, then return. With the flags set, the scroll should be exactly where you left it.
When Not to Restore
Sometimes a tab should refresh on entry, like a feed. Then simply skip restoreState for that route and let it rebuild.
State Beyond One Screen
For data that must outlive even the tab, lift it into a shared ViewModel so navigation flags only handle UI, not your real data.
Quick Check
You learned to keep each tab fresh. Time for a check.
Recap
You kept tabs sticky: saveState + restoreState + launchSingleTop preserve scroll and input, with rememberSaveable backing up in-screen values. Smooth! ✨
Frequently asked questions
Is the “Preserving Tab State on Switch” lesson free?
Yes — the full text of “Preserving Tab State on Switch” 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 “Preserving Tab State on Switch”?
Keep each tab's scroll and state. 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 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Preserving Tab State on Switch” 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
- NavigationBar with Multiple Tabs
- Highlighting the Selected Route
- Preserving Tab State on Switch
- TabRow & Swipeable Pages