Hi all. I'm trying to get a TopAppBar overlayed ov...

# compose-android

[Alexandru Gheorghe]

Hi all. I'm trying to get a TopAppBar overlayed over a Box composable that contains an image and some text. This is working well, however, I am unable to make the Box composable scroll along with the TopAppBar. More in 🧵

[Alexandru Gheorghe]

Code of my layout here: https://kotlinlang.slack.com/archives/C04TPPEQKEJ/p1723661537527479?thread_ts=1723651086.561419&cid=C04TPPEQKEJ

Additionally, what I'm doing with the Scaffold is:

val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

Scaffold(
        modifier = modifier
            .nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = { TopBarHere(..., scrollBehavior = scrollBehavior) }
) { padding ->
    PullToRefreshLazyColumn(...) {
        normal content here
    }
}

And TopBarHere is using scrollBehavior like this:

TopAppBar(
    ...,
    scrollBehavior = scrollBehavior
)

I've tried pretty much everything I could (making the Box with Modifier.nestedScroll(scrollBehavior.nestedScrollConnection) also switching to Column with Modifier.verticalScroll(rememberScrollState()) ) but nothing seems to work

[Alexandru Gheorghe]

Example when there is no scroll (TopAppBar and Box containing photo and details like full name etc. show at top of the screen correctly)

[Alexandru Gheorghe]

Example when user has scrolled (TopAppBar correctly hides, however, box with photo and details doesn't hide upon scroll)

[Chrimaeon]

what I can see from your recents posts, you’d better start with understanding the basic layout composables and what what you can to with them. then, get familiar with modifers and what they can do for you. otherwise you should pay us, basically writing the app for you 😅

[Alexandru Gheorghe]

Well, I've followed the basic code labs and I've exhausted all modifiers/column/lazy column/box set ups. I am asking here because of this not because I want other people to write my app. Besides, this is a small piece.of it and not the entire app. I think I'm reasonable when I'm asking for others help. Plus, solutions may help others running into the same issue.

[Chrimaeon]

then put together a small reproducer sample code snippet. from the fragments of code you posted in several posts, no one can figure out what you are doing. also this might help you finding a solution. have a scaffold, a topbar, the image box and some arbitrary large “content” box and see how the nested scroll connection and scrolling in general behaves.

[Alexandru Gheorghe]

Well, the other threads are for other specific problems. Which I got resolved thanks to the help from here, no? Also, in most cases the solutions were what I already tried but didn't spend enough time before asking here so it's more of a confirmation of what I did as well. Regarding the scroll, I've tried in many ways and the scroll is always the same. The box with contents remains pinned when scrolling, unlike the topappbar which respects the scroll configuration to "always enter on scroll".

[Chris Sinco [G]]

How are you handling scroll deltas in your nestedScrollConnection? This recent video might be useful:

https://youtu.be/JfYBCKRjFA0?si=uPMs9lK27cPosQw1▾

[Alexandru Gheorghe]

I'm simply passing the topappbar nested scroll connection. Isn't this supposed to be enough to have the Box() parent composable scroll at once with the TopAppBar?

[Alexandru Gheorghe]

I've layed out my set up here in a more succint way.

[Chris Sinco [G]]

From your MyCompasable code on SO it seems you have a large column but didn’t set a verticalScroll modifier on it. That is needed I believe to signal to the parent Composable managing the shared nestedScrollConnection, i.e. Scaffold, that that part is also scrollable.

[Alexandru Gheorghe]

Yep. I tried that and scrolling doesn't cause it to hide at once with the TopAppBar. In fact, it remains fixed at the top of the screen while the rest of the content (in Scaffold's PullToRefreshLazyColumn) scrolls. I'll try again tomorrow, though I doubt it'll work.

[Alexandru Gheorghe]

Tried verticalScroll(rememberScrollState()) and the Box/Column with contents won't hide on scroll but rather remain pinned at the top of the screen as I scroll down the lazy column of Scaffold