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
}
....