JetPack Compose Scroll together multiple LazyColumn simultaneously

Question

I want multiple All LazyColumn scroll simultaneously

I can't use LazyHorizontalGrid or LazyVerticalGrid because of inner layout what two layout is different. How can i share scrolling in multiple LazyColumn?

@Composable
fun TableScreen2(list: List<Time>, cal: Calendar, df: DateFormat) {

    LazyRow(Modifier.fillMaxSize()) {
        item {
            LazyColumn(
                modifier = Modifier
                    .fillParentMaxHeight()
            ) {
                items(count = list.first().timeList.size / 2) {
                    Column(
                        modifier = Modifier
                            .width(60.dp)
                            .height(50.dp),
                        verticalArrangement = Arrangement.Top
                    ) {

                        Text(df.format(stateCal.time))
                        stateCal.add(Calendar.MINUTE, 30)

                    }
                }
            }
        }

        items(4) { listIndex ->
            LazyColumn(modifier = Modifier.fillParentMaxHeight()) {
                itemsIndexed(list[listIndex].timeList) { timeIndex, timeItem ->
                    Box(
                        modifier = Modifier
                            .height(30.dp)
                            .width(60.dp)
                            .background(Color.Gray),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(text = "$timeIndex")
                    }
                }

            }
        }
    }
}

here is gif

Answer 1

I don't know if still you need help on this.

// Add the data set
val channels = ArrayList<String>()
val programs = mutableListOf<List<ArrayList<String>>>()
for (channel in 1..400) {
        channels.add("C $channel")
    }
    for (j in 1..400) {
        val arrayList = ArrayList<String>()
        for (i in 1..400) {
            arrayList.add("Program ${j}${i}")
        }
        programs.add(listOf(arrayList))
    }


@Composable
fun ChannelFilter() {
    LazyColumn(modifier = Modifier.fillMaxHeight()) {
        items(channels.size) { index ->
            Text(text = channels[index], modifier = Modifier.padding(30.dp))
        }
    }
}

@Composable
fun T1ProgramList() {
    Box(Modifier.horizontalScroll(rememberScrollState())) {
        LazyColumn(modifier = Modifier.fillMaxHeight()) {
            items(programs, { row -> row.hashCode() }) { row ->
                Row(modifier = Modifier.padding(vertical = 30.dp)) {
                    row.forEach { col ->
                        Text(text = "$col", modifier = Modifier.padding(horizontal = 16.dp))
                    }
                }
            }
        }
    }
}

@Composable
fun ChannelAndProgramLayout() {
    Row(modifier = Modifier.fillMaxSize()) {
        Column(modifier = Modifier.weight(1f)) {
            Text(
                text = "Channels",
                modifier = Modifier.padding(8.dp)
            )
            ChannelFilter()
        }
        Column(modifier = Modifier.weight(3f)) {
            Text(
                text = "T1 Programs",
                modifier = Modifier.padding(8.dp)
            )
            T1ProgramList()
        }
    }
}

Answer 2

I update the code from Shyak Das for the 2 scrolls to sync

add this to ChannelAndProgramLayout()

val stateRowX = rememberLazyListState()
val stateRowY = rememberLazyListState()

LaunchedEffect(stateRowX.firstVisibleItemScrollOffset) {
    stateRowY.scrollToItem(
        stateRowX.firstVisibleItemIndex,
        stateRowX.firstVisibleItemScrollOffset
    )
}

LaunchedEffect(stateRowY.firstVisibleItemScrollOffset) {
    stateRowX.scrollToItem(
        stateRowY.firstVisibleItemIndex,
        stateRowY.firstVisibleItemScrollOffset
    )
}

and then add to ChannelFilter()

LazyColumn(modifier = Modifier.fillMaxHeight(), state = stateRowX) 

and to T1ProgramList()

LazyColumn(modifier = Modifier.fillMaxHeight(), state = stateRowY)

Thanks Shyak Das

Answer 3

A single LazyColumn, where each entry in the lazy column is a row of 5 items looks like it would fit what you want.