How to show a composable on a fixed position inside CollapsingToolbarScaffold regardless of toolbar state?

[pesjak]

Hey,

The library is amazing, but I have an issue that I don't know how to solve.

I want to put the Button inside CollapsingToolbarScaffold, but I want it to be always shown, no matter the state of CollapsingToolbarScaffold. Currently if you put it inside it won't show until the state of the toolbar collapses.

1 solution I tried is to put the Button outside of CollapsingToolbarScaffold, but then you have a button that is not part of the content that you want to show.

For example if you have an AnimatedNavHost inside the content of CollapsingToolbarScaffold to manage the screens, the button inside those screens is different, but won't be shown at the bottom of the screen (over the content), but it will be shown at the bottom of the content.

To summarize, is there any way to "flag" a composable, so that it is not influenced by the scrolling state, but is independent and still part of the CollapsingToolbarScaffold content?

[Nek-12]

I have similar issue here. I want to use collapsing toolbar without CollapsingToolbarScaffold() because I'd like to use regular Scaffold() to have a bottom app bar placeholder. My problem can also be solved by having bottom app bar as a pinned component just like @pesjak described

[onebone]

One possible workaround for your case is to offset the button manually according to the toolbar state.

Button(modifier = Modifier.offset { IntOffset(0, -state.offsetY) }) { ... }

I see this as a common use case, so I am planning to support such scenarios in the near future. Just as using CollapsingToolbarLayout in the Jetpack library, align() modifier will allow users to fix components in an arbitrary position in the layout.

// not possible right now, but will be available in the near future version
CollapsingToolbarScaffold(
	// ...
) {
	Button( // placed at the bottom center regardless of scroll state
		modifier = Modifier.align(Alignment.BottomCenter)
	)
}

[Nek-12]

Also, I ended up using CollapsingToolbarScaffold + another Scaffold for everything else except toolbar. Works fine for my case explained above , and Google seems to have ended up using multiple scaffolds too in their projects.