CODEWITHSUNDEEP
androidkotlinandroid-jetpack
JuJu Juned
JuJu Juned

Reputation: 154

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

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")
    }
}

}

Upvotes: 0

Views: 861

Answers (1)

JuJu Juned
JuJu Juned

Reputation: 154

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.

Upvotes: 0

Related Questions