Sher Sanginov
10/27/2023, 11:20 PMstickyHeader
to stick under the Material3 Scaffold's transparent topbar?
currently it sticks behind the topbar but i want it to stick under the topbar while scrolling.Scaffold(topBar = {
TopAppBar(title = {
// Text("Top bar Transparent")
}, navigationIcon = {
MyIcon()
},
backgroundColor = Color.Transparent
)
}) { padding ->
LazyColumn {
for (i in 1..15) {
item { Text(text = "Lazy item ${i}") }
}
stickyHeader {
Row(modifier = Modifier.background(Color.Red).fillMaxWidth()) {
Text(text = "This is sticky header")
}
}
for (i in 1..100) {
item { Text(text = "Lazy item ${i}") }
}
}
Mitchell Syer
10/27/2023, 11:32 PMLazyColumn(contentPadding = padding)
Sher Sanginov
10/27/2023, 11:36 PMfrancisco
10/28/2023, 12:47 AM{ innerPadding ->
LazyColumn(
modifier = Modifier.consumeWindowInsets(innerPadding),
contentPadding = innerPadding,
)
{ innerPadding ->
LazyColumn(
modifier = Modifier.consumeWindowInsets(innerPadding).padding(top = innerPadding.calculateTopPadding()),
)
Sher Sanginov
10/28/2023, 2:29 AMinnerPadding.calculateTopPadding()
Zoltan Demant
10/28/2023, 2:43 AMSher Sanginov
10/28/2023, 3:04 AMlazy list item 15
(since it comes right before the stickyHeader). if we did scroll past it, then i set top padding on stickyHeader to topbar's height which will make our stickyheader stick under the topbar.
however, there's jumping down effect by stickyHeader which isnt a great for UX.Zoltan Demant
10/28/2023, 3:17 AMSher Sanginov
10/28/2023, 3:18 AM