How to change HorizontalPageIndicator current page indicator shape and keep previous page shape different size

Question

enter image description here

I like to keep the current page indicator a specific shape like in the picture when I'm on the active page, but want to keep the previous tab indicator like a dot shape when I swipe from one screen to another. But, from what I can tell, it doesn't seem like I can change the indicatorShape below based on the currently active page state, and keep the previous shape different. Any ideas would be greatly appreciated. Thank You!

@OptIn(ExperimentalPagerApi::class)

@Composable fun HorizontalPagerScreen() { Column( modifier = Modifier .fillMaxSize() .padding(30.dp) ) { val items = createItems() val pagerState = rememberPagerState() val coroutineScope = rememberCoroutineScope()

 HorizontalPager(
 count = items.size,
 state = pagerState,
 modifier = Modifier.weight(1f)
 ) { currentPage ->
 Column(
 modifier = Modifier.fillMaxSize()
 ) {
 Text(
 text = items[currentPage].title,
 style = MaterialTheme.typography.h2
 )
 Spacer(modifier = Modifier.height(10.dp))
 Text(
 text = items[currentPage].subtitle,
 style = MaterialTheme.typography.h4
 )
 Spacer(modifier = Modifier.height(10.dp))
 Text(
 text = items[currentPage].description,
 style = MaterialTheme.typography.body1
 )
 }
 }
 HorizontalPagerIndicator(
 pagerState = pagerState,
 modifier = Modifier
 .align(Alignment.CenterHorizontally)
 .padding(16.dp),
 indicatorHeight = 8.dp,
 activeColor = Color.Blue,
 indicatorWidth = ChangeSizeOfShape(currentPage = pagerState.currentPage),
 pageCount = 2,
 indicatorShape =RoundedCornerShape(corner = CornerSize(40.dp))
 )
 Button(
 onClick = {
 coroutineScope.launch {
 pagerState.animateScrollToPage(page = 2)
 }
 },
 modifier = Modifier.align(Alignment.CenterHorizontally)
 ) {
 Text(text = "Scroll to the third page")
 }
}

}

Answer 1

As of Oct 14, 2022, there isn't anything built-in that can allow us to change view pager indicator size/shape the way we want. But, there are few other ways of doing it for now that are available online.

Animated worm page Indicator. This is in compose.