Hey, I'm wondering if anyone ha experience with ac...

# compose

[Primož Pesjak]

Hey,
I'm wondering if anyone ha experience with achieving a layout structure similar to having a LazyColumn within another LazyColumn?

I'm working on a screen that contains multiple input elements, and I want the screen to be scrollable. Within this screen, there's a card component that houses its own input fields and a "add" button. At the bottom of this card, there's an expandable item list, where the items are added.

For now I've tried:
• Column with lazyColumn, but that won't work (infinite problem).
• LazyColumn, defining each item manually. I wanted to keep the items within the card, as they ended up separate from it.
• I could just use a Column that has verticalScroll and show the items with for loop, but item size can get between 50-200, then the scroll issue can arrise.
Ideally, I'd like to find a way to group specific items within a LazyColumn (inside the card) while leaving other items unaffected.
or another idea is to just use item for a Card and then inside that item, have LazyColumn with items defined. If you scroll it should scroll through the whole screen (nested scrolling)

Thanks for the help, I've added an image (it's not good 😄, but it should get you the idea of what I'm trying to achieve)

[ephemient]

put everything inside one LazyColumn. to get group backgrounds/borders, just imagine each item drawing just its piece, although depending on your sizes you may need to round dp to the nearest pixel size yourself to avoid gaps

[Primož Pesjak]

Thanks for the help!
Yes of course, but the problem arises in the item with itemList. Like that is just 1 item, but how do I draw items inside that item, because if I use this approach LazyColumn won't be able to optimize it (he'll see just 2 items)?

[ephemient]

instead of item list being one item, put all its items into the single lazy column

[Primož Pesjak]

Then it is not part of the same card anymore? I mean the card won't expand, because it is in this case it would be in its own items. Maybe I'm just not understanding you correctly 😅

[ephemient]

it can expand, you just have to put the logic in the outer column

[Primož Pesjak]

I understood you like this. I'm probably wrong 😄
LazyColumn{
item{//inputs}
item{//CARD, this should contain the list of items}
items(list){//element of an item}
}

[ephemient]

you can if (expand) items(list) { ... }

[ephemient]

which is the thing you want to expand?

[Primož Pesjak]

LazyColumn{
item{//inputs}
item{//CARD, this should contain the list of items} // THIS ONE
}

[ephemient]

so instead of item { Card() } you need to expand it

[Primož Pesjak]

Because this CARD item would have a background 🙂 that is a card, with a column of some inputs and then it should contain the list of items

[ephemient]

eg. if

@Composable fun Card() {
    LazyColumn { contents() }
}

then lift contents() into the outer lazy column

[ephemient]

you need to individually handle the background of each item to make it appear as if they were part of the same card

[Oleksandr Balan]

you need to individually handle the background of each item to make it appear as one card

It is a bit tricky with shadows 😅

Tried this here:
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1679393034780109?thread_ts=1679294257.066489&cid=CJLTWPH7S

[ephemient]

ok, it is tricky with shadows

[ephemient]

for that I think you may need to fake it with a floating box that isn't part of the column but is synced to the positions, to be the card background

[Primož Pesjak]

Thanks for the link, I'll take a look. I guess that you really need to "fake it" to look like a card. I thought that there is some clean way to do it

[Primož Pesjak]

Like LazyColumn inside a LazyColumn, so it would still be "optimized", but I think that is not viable

[ephemient]

usually cards are not so big that they require lazy inside

[Primož Pesjak]

I'll have a talk with our designers 😄

[Primož Pesjak]

I agree with you 🙂

[Primož Pesjak]

Thanks for the help!