Jetpack Compose - Make indicator scroll in TabRow with HorizontalPager

39 Views Asked by At

I'm trying to achieve a simple thing: I have a ScrollableTabRow and a HorizontalPager and I want to make the indicator of the ScrollableTabRow to move when I drag the HorizontalPager left or right.

Right now, it moves only when I change the page.

It works out of the box with XML, but now I feel that I have to do this, but I don't know what.

Code:

      ScrollableTabRow(selectedTabIndex = selectedTabIndex.value,
            indicator = { positions ->
                TabRowDefaults.SecondaryIndicator(
                    Modifier.tabIndicatorOffset(positions[pagerState.currentPage])
                )
            },
            modifier = Modifier.fillMaxWidth(),
            containerColor = getTopBarColor()) {
            data.forEachIndexed { index, _ ->
                Tab(
                    text = { Text(tabTitle, maxLines = 1) },
                    selected = selectedTabIndex.value == index,
                    onClick = {
                        scope.launch {
                            pagerState.animateScrollToPage(index)
                        }
                    }
                )
            }
        }
        HorizontalPager(state = pagerState, modifier = Modifier
            .fillMaxWidth()
            .weight(1f)) { page ->
            // Show the page
        }
    ....
0

There are 0 best solutions below