Is it possible to make a similar layout as below u...
# compose
r
Is it possible to make a similar layout as below using LazyColumn in jetpack compose? Inner List is not scrollable.
c
Yes
👨‍⚖️ 3
😂 1
r
Yeah. With the help of some custom canvas draws, I guess I ended up with something similar. But there is a slight problem. Now I am using a hardcoded size of the icon container. https://kotlinlang.slack.com/archives/CJLTWPH7S/p1631807244416900
c
I mean, you can do this in so many ways. I just a bunch of images stacked. I would first play with the concept of O and | in an isolated environment that I could change sizes (even if I would do this rotating my phone just to have different canvas size). Then I would make it so the next cell would always take on the last circle position and width and draw in the middle of it
BoxWith could help
c
Are you trying to make the inner list lazy as well? If not, I would just create a LazyCol{ forEach(collapsibleItem){ CollapseAndExpandComposable() } }
c
Ass some animation on top to make it more awesome
r
No my innerList in not scrollable since nested LazyColumn doesn't work. I have a hierarchy as you mentioned a Column inside of a LazyClumn. The problem was that Circle tikmark with line. And that end line | expand when there is a start Button. I couldn't use IntrinsicSize.Min. Because I was using BoxWithConstraint. Anyway finally I have solved it. I realized that I don't need that BoxWithConstraint instead I can use only Box and take measurement from canvas size. I know maybe without code it's hard to understand but my code is a little messy right now. @Colton Idle
Ok Thanks @Cicero I will try to use some animation.
c
That's what I'm using to animate
Copy code
fun AppAnimatedVisibilitySize(visibilityCondition: Boolean, content: @Composable () -> Unit){
    AnimatedVisibility(
        visible = visibilityCondition,
        enter = expandVertically(
            animationSpec = tween(durationMillis = standardAnimationTime)
        ),
        exit = shrinkVertically(
            animationSpec = tween(durationMillis = standardAnimationTime))
    ){
        content()
    }
}
👍 2