https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
s

Sher Sanginov

10/27/2023, 11:20 PM
Hello QQ. How do you make LazyColumn's 
stickyHeader
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.
Screen Recording 2023-10-27 at 4.19.53 PM.mov
my code:
Copy code
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}") }
                    }
                }
this is the behavior i want but here the topbar is no longer transparent. It works here as expected because topbar doesnt overlap lazy column content and lazy column content is placed below the top bar
Screen Recording 2023-10-27 at 4.29.37 PM.mov
m

Mitchell Syer

10/27/2023, 11:32 PM
Have you tried passing the scaffold padding to the LazyColumn like this? 
LazyColumn(contentPadding = padding)
s

Sher Sanginov

10/27/2023, 11:36 PM
yes it just places my lazy column content below topbar if i do that. see recording:
Screen Recording 2023-10-27 at 4.35.56 PM.mov
f

francisco

10/28/2023, 12:47 AM
Copy code
{ innerPadding ->
        LazyColumn(
            modifier = Modifier.consumeWindowInsets(innerPadding),
            contentPadding = innerPadding,
        )
actually that didn’t help either 😅 the only thing that solved it was this:
Copy code
{ innerPadding ->
        LazyColumn(
            modifier = Modifier.consumeWindowInsets(innerPadding).padding(top = innerPadding.calculateTopPadding()),
        )
s

Sher Sanginov

10/28/2023, 2:29 AM
yes it solves but then we no longer have transparent top bar. its basically setting top padding to lazycolumn and places lazycolumn content below topbar. maybe i could check if firstVisibleitem is sticky header and if true, give it a top padding of 
innerPadding.calculateTopPadding()
i would like transparent topbar overlap lazy column like this initially and then as user scroll, stickyHeader sticks under the top bar
z

Zoltan Demant

10/28/2023, 2:43 AM
s

Sher Sanginov

10/28/2023, 3:04 AM
@Zoltan Demant is there a hacky solution with less flaws? one approach i tried was to check whether we have scrolled past 
lazy 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.
z

Zoltan Demant

10/28/2023, 3:17 AM
Ultimately thats the same issue I ran into. The closest thing to a solution I came to was using an offset instead of padding, then rendering a box with the stickyheader background underneath it, without the offset. Its not perfect either though; mainly because the jump still happens suddenly (asked for help here) and due to the offset, scrolling a stickyheader over another produces a weird effect (overlap by offset amount, basically). There was a bug report in the thread I linked as well. If you have any more ideas: 👂🏽
s

Sher Sanginov

10/28/2023, 3:18 AM
ok got it. thank you
2 Views
Powered by