androidjsonandroid-jetpack-composeandroid-jetpack-compose-lazy-column

How to make a grouped LazyColumn items for API data JSON?


I want to make API data appear in groups inside a LazyColumn. I've achieved my purpose when the required API data is a List of Lists of Objects response, but I don't have any idea how to make it work as wanted if the API data is a List of Lists of Objects. As I cannot make a nested LazyColumn, the next code sample makes the data appear but never scroll. Below, I have attached some code samples to explain.

Here is the problem

@Composable
fun CupStandingExpandableGroup(
    mainViewModel: MainViewModel = hiltViewModel(),
    standingsItemList: List<StandingsItemItem?>,
    standingsItemListOfList: List<List<StandingsItemItem?>?>?,
    headerItem: @Composable ()-> Unit,
    keys: @Composable ()-> Unit
) {
    var expandedState by remember { mutableStateOf(true) }
    val rotationState by animateFloatAsState(
        targetValue = if (expandedState) 180f else 0f, label = ""
    )
    Column {
        standingsItemListOfList!!.forEach {
            mainViewModel.standingsListTournament.value = it!!
            val groupedStandingsList = mainViewModel.standingsListTournament.value.groupBy { it!!.group }
            LazyColumn {
                item { headerItem() }
                groupedStandingsList.forEach { (group, items) ->
                    item {
                        Card(
                            modifier = Modifier
                                .fillMaxWidth()
                                .animateContentSize(
                                    animationSpec = tween(
                                        durationMillis = 3000,
                                        easing = LinearOutSlowInEasing
                                    )
                                ),
                            shape = RoundedCornerShape(15.dp),
                            onClick = {
                                expandedState = !expandedState
                            }
                        ) {
                            Column(
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(4.dp)
                            ) {
                                Row(
                                    verticalAlignment = Alignment.CenterVertically
                                ) {
                                    Text(
                                        modifier = Modifier
                                            .weight(6f),
                                        text = group!!,
                                        fontSize = 13.sp,
                                        fontWeight = FontWeight.SemiBold,
                                        maxLines = 1,
                                        overflow = TextOverflow.Ellipsis
                                    )
                                    IconButton(
                                        modifier = Modifier
                                            .weight(1f)
                                            .alpha(ContentAlpha.medium)
                                            .rotate(rotationState),
                                        onClick = {
                                            expandedState = !expandedState
                                        }) {
                                        Icon(
                                            imageVector = Icons.Default.ArrowDropDown,
                                            contentDescription = "Drop-Down Arrow"
                                        )
                                    }
                                }
                            }
                        }
                    }
                    if (expandedState) {
                        itemsIndexed(
                            items,
                            itemContent = { index, item ->
                                StandingRow(standingsItem = item!!)
                            }
                        )
                    }
                }
                item { keys() }
            }
        }
    }
}

List of Lists of Objects

[
   [
      {
      },
      {
      }
   ],
   [
      {
      },
      {
      }
   ],
   [
      {
      },
      {
      }
   ]
]

Grouped Items in Lazycolumn for List of objects

val list = viewModel.mainList.value.groupBy { it!!.league!!.id }
    if (myList.isNotEmpty()) {
        LazyColumn(
            modifier = Modifier
                .padding(3.dp)
                .fillMaxSize()
        ) {
            myList.forEach { (league, items) ->
                item {
                    TodayMatchesHeader(leagueItem = items[0]!!, league = league!!)
                }
                itemsIndexed(items,
                    itemContent = { index, item ->
                        TodayMatchesRow(
                            item,
                            onClick = {
                                //
                            }
                        )
                    }
                )
            }
        }
    }

List of Objects

[
   {
   },
   {
   },
   {
   }
]

Solution

  • Well, I was able to reach the desired goal of making a LazyColumn with expandable lists. Here is the solution:

    LazyColumnExpandableLists