I need to create a expandable / collapsable in Laz...

# compose

[RANJAN]

I need to create a expandable / collapsable in LazyColumn.
But on a screen there are only 2 parent buttons with having 1000+ sub items.
So creating LazyColumn and using items(count=2) and creating sub items using forEach{} loop doesn't seem good to me.

So I created LazyItemScope and over these I created top with item{} and rest expand/collapse is created using items(list=....).

But as it is not composable function so i cant use AnimatedVisibility.
Could someone please suggest how should i be creating LazyColumn or how to use AnimatedVisibility in this scenario..?

[Richard]

I don't really get it, can you send a screenshot of what you mean?

[RANJAN]

@Richard, here's a two button on screen.
And on expanding it, it need to be displayed like this.

[Richard]

If I understand correctly, you want to have a scrollable list with multiple dropdown items inside like in the second picture, right? And you want to make the expanded items animated when expanded and collapsed?
What I think is:

LazyColumn() {
    item {
        Card() {
            Column() {
                Text("Geographies")
                AnimatedVisibility(showGeographies) {
                    // All the items
                }
            }
        }
    }
    item {
        Card() {
            Column() {
                Text("Sectors")
                AnimatedVisibility(showGeographies) {
                    // All the items
                }
            }
        }
    }
}

[RANJAN]

Yes this could be done easily.
But inside At the place //All the items:
I need to display 1000+ items. and which using in for loop will break the beneift of LazyColumn, right?

[Richard]

Another question: Do you think this is a good idea to show 1000+ items in a dropdown?

[Richard]

Why not make a screen with search function?

[RANJAN]

Well no.
But it could be in some scenario.
As you might have observed here a nesting of dropdown.. so it could be in sometime to display 1000 items.

[RANJAN]

And yes, there is also search feature here.

[Richard]

LazyColumn() {
    item {
        Card() {
            Column() {
                Text("Geographies")
                AnimatedVisibility(showGeographies) {
                    LazyColumn(Modifier.height(1000.px)){...}
                }
            }
        }
    }
    item {
        Card() {
            Column() {
                Text("Sectors")
                AnimatedVisibility(showGeographies) {
                    // …
                }
            }
        }
    }
}

[RANJAN]

Can't fix the height. 😢

[Richard]

That's unfortunaly the only way to use a lazyColumn. You need to set the height.

[RANJAN]

LazyColumn(){
     filterView()
     filterView()
}

fun LazyListScope.filterView(){
     item{GeographyLayout()}
     if(item.isExpanded){
         items(list = item.children){ //creating compose view here}
      }
  }
}

I have structed like this for managing that long list. but cannot achieve AnimatedVisibility here.