Curious how someone might implement something like...

# compose

[andrew]

Curious how someone might implement something like this with a LazyColumn, where there’s a custom scaffold for toolbar, banner image, and content, and the content where the background decoration scrolls with the list 🤔

[Dominaezzz]

That doesn't look like a job for LazyColumn I think. The number of items seems pretty small.

[andrew]

I understand that we don’t know the true height aot with LazyColumn

[andrew]

It can vary heavily

[andrew]

Depends on how many devices the user decides to put on the screen

[Dominaezzz]

Does the entire screen scroll or just the sections?

[andrew]

Entire screen

[andrew]

And not within the background either, the background scrolls with the list

[Dominaezzz]

It can vary heavily

Sure but how large can it get?

[Dominaezzz]

You could still just use LazyColumn I suppose. What's getting in the way of just using it?

[andrew]

It depends on the property and integrations. Sometimes it’s only one device, sometimes properties have tons of devices and staff add tons they want to use from the dashboard screen. We also have integration shortcuts

[andrew]

The background decoration

[andrew]

I could, hypothetically draw it as the background for each item, but that leaves a gap at the bottom

[Dominaezzz]

Oh, why not just do the background outside the LazyColumn?

[andrew]

It would stay fixed, and since we don’t know the height ahead of time with the lazy column, we can’t just set it and translate it with scroll either

[Dominaezzz]

Oh I think I'm understanding now.
So you have a stack of three things.
• The background photo
• The top app bar
• The body which has the devices, appliances, etc.
And you want 1 and 3 to scroll together?

[andrew]

1 scrolls as parallax, that I can use nested scroll for
3 scrolls normal, but the background decoration scrolls with it

[Dominaezzz]

What exactly is this background decoration? I though you were referring to the image but now I'm not so sure. Is it the "ACCESS . 4 DEVICES" bit?

[Afzal Najam]

You could use nestedScroll modifier or the scroll state (although LazyList state makes it slightly more complicated than vertical ScrollState). Here’s a sample that uses NestedScrollConnection to move the toolbar on scroll. Instead of moving the background 1:1 with it, you could move it as much or as little as you want.

https://github.com/androidx/androidx/blob/8cb282ccdbb00687dbf253a4419ded0dfc786fb5[…]rc/main/java/androidx/compose/ui/samples/NestedScrollSamples.kt

[andrew]

The toolbar stays fixed, the list background doesnt. The background needs to be the size of the list at most, and at minimum fill the area. We can’t use nestedscroll for this since we don’t know ahead of time the height of the LazyColumn.

[andrew]

The decoration is the background itself, where the top portion has rounded corners and a border, then goes to the bottom

[Dominaezzz]

Explaining UI via text is difficult but I think I understand now.

[andrew]

I guess what could technically be done is drawing the background the size of the parent + the size of the top corner radius, and translate with nested scroll

[Dominaezzz]

You read my mind there.

[andrew]

🙌🏻

[andrew]

Works better now 🙂

[Dominaezzz]

Nice