TabRow & Swipeable Pages
Add horizontal tabs with paging.
TabRow & Swipeable Pages 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.
Meet TabRow
While NavigationBar sits at the bottom, TabRow places a row of tabs at the top, perfect for switching between related views on one screen. 🗂️
TabRow vs NavigationBar
Use TabRow for in-screen sections like Posts and About; use NavigationBar for whole app destinations. Different jobs, different bars.
Add Tabs Inside It
A TabRow takes a selectedTabIndex and a content lambda where you emit one Tab per section.
TabRow(selectedTabIndex = index) {
Tab(/* ... */)
Tab(/* ... */)
}Each Tab Is Selectable
Each Tab has its own selected flag and onClick, plus text or an icon, much like a NavigationBarItem.
Tab(
selected = index == 0,
onClick = { index = 0 },
text = { Text("Posts") }
)Make Pages Swipeable
To swipe between pages, pair the tabs with a HorizontalPager, which shows one full-width page at a time.
val pagerState = rememberPagerState { 3 }
HorizontalPager(state = pagerState) { page -> }One State, Two Views
The trick is sharing pagerState. The TabRow reads its current page, and the pager drives that page as the user swipes.
TabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Tap Should Scroll the Pager
On a tab tap, call animateScrollToPage so tapping a tab smoothly slides the pager to that page.
scope.launch {
pagerState.animateScrollToPage(i)
}Run It in a Scope
Because animateScrollToPage is a suspend call, launch it from a rememberCoroutineScope inside your onClick.
val scope = rememberCoroutineScope()Scrollable Tabs
Got many tabs? Use ScrollableTabRow so they scroll horizontally instead of cramming into the screen width.
ScrollableTabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Style the Indicator
The moving underline is the indicator slot. You can recolor or resize it to match your theme and brand.
indicator = { tabPositions -> /* custom underline */ }Pager Plus Tabs Pattern
Combining TabRow and HorizontalPager over one shared state is the standard Compose pattern for swipeable, tabbed screens.
Quick Check
You built swipeable tabbed pages. Final check!
Recap
You mastered TabRow with HorizontalPager: shared pagerState links them, animateScrollToPage handles taps, and ScrollableTabRow fits many tabs. Course done! 🚀
Frequently asked questions
Is the “TabRow & Swipeable Pages” lesson free?
Yes — the full text of “TabRow & Swipeable Pages” 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 “TabRow & Swipeable Pages”?
Add horizontal tabs with paging. 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 “TabRow & Swipeable Pages” 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