HorizontalPager with lazy column in a lazy column

Question

I'm trying to make a UI similar to the YouTube channel UI. I've got two lazy columns (I don't know if it's the correct way or not) in a column, in which the first lazy column consists of data regarding the second lazy column and a sticky header. I've added a horizontal pager from the accompanist library in which the second lazy column exists. As expected, the first lazy column doesn't scroll. Is there any way to scroll these two lazy columns simultaneously or as a single UI component?

PS:- I've checked the related question but it doesn't solve the problem

Code:-

Column(modifier = Modifier.background(md_theme_dark_surface)) {
    LazyColumn{
        item {
            SmallTopAppBar(
                title = {
                    Text(
                        text = headerText,
                        style = MaterialTheme.typography.titleMedium,
                        fontSize = 24.sp,
                        color = md_theme_dark_onSurface
                    )
                },
                colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = md_theme_dark_surface)
            )
            AsyncImage(
                model = ImageRequest.Builder(context).crossfade(true)
                    .data("")
                    .build(),
                contentDescription = "null",
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp),
                onError = painterResource(id = R.drawable.image),
                contentScale = ContentScale.Crop
            )
            Box(
                modifier = Modifier
                    .padding(top = 15.dp)
                    .fillMaxWidth()
                    .wrapContentHeight(),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = "Cover-art stolen from xyz from abc",
                    style = MaterialTheme.typography.titleMedium,
                    fontSize = 16.sp,
                    color = md_theme_dark_onSurface
                )
            }

        }
        stickyHeader {
            ScrollableTabRow(
                selectedTabIndex = pagerState.currentPage,
                containerColor = md_theme_dark_surface
            ) {
                tabsList.forEachIndexed { index, tabsData ->
                    Tab(
                        selected = pagerState.currentPage == index, onClick = {
                            coroutineScope.launch {
                                pagerState.animateScrollToPage(index)
                            }.start()
                        }, modifier = Modifier.padding(20.dp)
                    ) {
                        Text(
                            text = tabsData.name,
                            style = MaterialTheme.typography.titleMedium,
                            color = md_theme_dark_onSurface,
                            fontSize = 17.sp
                        )
                    }
                }
            }
        }
    }

    HorizontalPager(count = tabsList.size, state = pagerState) {
        LazyColumn{
            itemsIndexed(fetchedData) { index, dataItem ->
                if (!dataItem.data.is_video && dataItem.data.url.contains(
                        regex = Regex(
                            "/i.redd.it"
                        )
                    )
                ) {
                    val screensList = subHomeScreensList
                    screensList[pagerState.currentPage].composable()
                }

            }
        }
    }
}

Screen recording of current code output.

How can I solve this problem, Thank you :)

HorizontalPager with lazy column in a lazy column

0 Answers0