4

How to build an Instagram profile page using Jetpack compose. I've tried multiple libraries like NestedScrollView, CollapsingToolbar to get collapsable/scrollable Topbar but they are not looking smooth. It's easy to build with XML using CoordinatorLayout.

Expected Scroll:- Instagram Profile Page

Using NestedScrollView Library:- NestedScrollView

Ravi
  • 171
  • 2
  • 8

1 Answers1

4

This layout is easy to implement with LazyColumn and stickyHeader:

LazyColumn(Modifier.fillMaxWidth()) {
    item {
        Text("Header")
    }
    stickyHeader {
        TabRow(selectedTabIndex = 0) {
            repeat(4) {
                Tab(selected = it == 0, onClick = {}) {
                    Text(
                        it.toString()
                    )
                }
            }
        }
    }
    items(100) {
        Text(it.toString())
    }
}
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
  • every tab will have lazyColumn/LazyVertical grid items which will have pagination – Ravi Feb 07 '22 at 10:04
  • How to add `HorizontalPager` which will switch based on swipe or tab change – Ravi Feb 07 '22 at 21:09
  • @Phil Dukhow Perhaps you know how to fix my issue, could you take a look please? https://stackoverflow.com/questions/76326733/collapsingtoolbar-in-compose-with-button-sticky – StuartDTO May 29 '23 at 13:30