How to make HorizontalPager center item on top of right items?
(Blue is the "focused"/centered item from the viewpager)
I've tried playing with zIndex but without succeed
.zIndex(if(page == currentPage) 1f else 0f)
Additional code:
@Suppress("CorrectDpValuesDetector")
@Composable
private fun SquaresCodesPager(state: SquaresGroupState, onSelectedListener: (Int) -> Unit, onClickedListener: (Int) -> Unit) {
val pagerState = rememberPagerState(initialPage = 0)
LaunchedEffect(pagerState) {
snapshotFlow { pagerState.currentPage }.collect { page ->
onSelectedListener(page)
}
}
HorizontalPager(
itemSpacing = -Grid.DP_40,
contentPadding = PaddingValues(horizontal = (LocalConfiguration.current.screenWidthDp.dp - QR_SIZE) / 2),
count = state.items.size,
state = pagerState
) { page ->
Square(pagerState.currentPage, page, state.items[page].square, onClickedListener)
}
}
@Composable
private fun PagerScope.Square(currentPage: Int, page: Int, bitmap: Bitmap, onClickListener: (Int) -> Unit) {
Image(
modifier = Modifier
.graphicsLayer(animation(page))
.zIndex(if (page == currentPage) 1f else 0f)
.background(Background.BgSecondary)
.size(SQUARE_SIZE),
bitmap = ...
contentDescription = ...
)
}
