When adding lazy column inside another lazy column in android jetpack compose it shows error

Question

How to add a lazy column inside another lazy column in jetpack compose like below screenshot.(The inner list size maybe vary)

@Composable
fun SingleItem() {

LazyColumn(modifier = Modifier
            .fillMaxWidth()
          ),
         
        ) {
    
            item {
    
                Row(
                    modifier = Modifier
                        .fillMaxWidth(),
                    verticalAlignment = Alignment.CenterVertically
                ) {
    
                    Image(
                        painter = painterResource(id = R.drawable.ic_school),
                        contentScale = ContentScale.Crop,
                        contentDescription = null
                    )
    
                    Text(
                        text = "School",
                        modifier = Modifier
                            .fillMaxWidth()
                            .weight(1f)
                     
                    )
    
                    Icon(
                        painter = painterResource(id = R.drawable.ic_down_arrow),
                        modifier = Modifier
                            .size(dimensionResource(id = R.dimen.margin_large))
                            .clip(CircleShape)
                            .clickable { isExpand = !isExpand },
                        contentDescription = stringResource(id = R.string.expand_list)
                    )
    
                }
    
            }
    
            if (isExpand) {
    
                item {
                    Divider(
                        modifier = Modifier
                            .padding(vertical = dimensionResource(id = R.dimen.margin_large))
                            .background(DividerColor.copy(alpha = 0.5F))
                            .fillMaxWidth(), thickness = 0.5.dp
                    )
                }
    
    
                items(3) {
                    Row(modifier = Modifier
                        .padding(horizontal = dimensionResource(id = R.dimen.margin_large))
                        .fillMaxWidth()) {
    
                        Text("School",
                            modifier = Modifier
                                .fillMaxWidth()
                                .weight(1f),
                           
                        )
    
                        Text(text = "3 KM",
                            textAlign = TextAlign.End
                         
                        )
    
                    }
                }
            }
    
        }

}

//For Full list

@Composable
fun MainList()
{
    LazyColumn() {

        items(10) {
            SingleItem()
        }
    }
}

But using this code it shows following error.

Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you want to add a header before the list of items please add a header as a separate item() before the main items() inside the LazyColumn scope. There are could be other reasons for this to happen: your ComposeView was added into a LinearLayout with some weight, you applied Modifier.wrapContentSize(unbounded = true) or wrote a custom layout. Please try to remove the source of infinite constraints in the hierarchy above the scrolling container.

Bandoline

@nglauber ..... – Bandoline

Answer 1

It is recommended to avoid Nested Scrolling in the same direction. One possible hack if you already know the size of the component you can use that in modifier. or try wrapping all of your composables inside one parent LazyColumn and using its DSL to pass in different types of content.

In your example

@Composable
fun MainList()
{
    LazyColumn() {

        items(10) { item ->
            ListComposable(item)
        }
    }
}

@Composable
private fun ListComposable(item: List<String>){
//...
}

This item can also be a multiple list item.

Reference: https://developer.android.com/jetpack/compose/lists#avoid-nesting-scrollable

Tuberculous

don't know the size of second lazycolumn item. It maybe vary. Maybe from 0 to 50 in each item. – Bandoline

you can check youtube.com/watch?v=1ANt65eoNhQ&t=899s youtube video about the topic as well as #68993194 answer for a basic example - shortly you can place your content in a separate item/items. Also this https://mcmap.net/q/340288/-how-to-build-a-tree-using-lazycolumn-in-jetpack-compose answer may be useful for building a dynamic items tree. – Tuberculous

Answer 2

You can achieve this statically by defining the height of the nested lazy columns.

LazyColumn(modifier = Modifier
        .fillMaxWidth().heightIn(min = 30.dp, max = 100.dp)
      )

For a dynamic approach, consider having one lazyColumn. Flatten your data and use the lazy list scope functions instead of nested lazy columns.

LazyColumn {
    items(10) { index ->
        var expanded by remember { mutableStateOf(false) }
        Row {
            //Content for each item

            if (expanded) {
                for (i in 0..2) {
                    //Content list nested in each item
                }
            }
        }

    }
}

You can have a look here for a helpful guide on this approach

Unbalance