CODEWITHSUNDEEP
androidandroid-jetpack-composehorizontal-pager
Duenytz Sierra
Duenytz Sierra

Reputation: 25

Can't provide graphicLayer{ translationZ = 1 } to pages in HorizontalPager, neither zIndex() would make any effect

I want to be able to arrange the HorizontalPager pages so I end up with the shown effect. The problem is that I can't find a way to make the next pages go behind the currentPage. I've tried zIndex() with no results, and graphicLayer{} modifier doesn't support a translationZ attribute. Any help would be very much appreciated.

Please check the current behavior video here: https://drive.google.com/file/d/1fIPEvIgNN3iybN9AlMPN-cdX38rdDwO8/view?usp=sharing

My code looks as follows:

@Composable
fun InboxWidgetContent() {
    val pagerState = rememberPagerState()
    val density = LocalDensity.current

    HorizontalPager(
        modifier = Modifier,
        pageCount = Int.MAX_VALUE,
        state = pagerState,
        beyondBoundsPageCount = 1,
    ) { page ->
        val pageOffset = ((pagerState.currentPage - page) + pagerState.currentPageOffsetFraction)
        Card(
            modifier = Modifier
                .zIndex(page.toFloat())
                .padding(start = 8.dp, end = 8.dp, top = 16.dp, bottom = 4.dp)
                .fillMaxWidth()
                .clickable {}
                .graphicsLayer {
                    alpha = when {
                        pageOffset >= 0f -> 1f
                        pageOffset >= -2f -> 1.8f + pageOffset
                        else -> 0f
                    }
                    translationX = lerp(
                        start = size.width * -2f - with(density) { 32.dp.toPx() },
                        stop = 0f,
                        fraction = ((pageOffset + 2) / 2).coerceIn(0f, 1f)
                    )
                    translationY = when {
                        pageOffset >= 0f -> 0f
                        pageOffset >= -2f -> abs(pageOffset) * -32f
                        else -> translationY
                    }
                    scaleX = lerp(
                        start = 0.8f,
                        stop = 1f,
                        fraction = ((pageOffset + 2) / 2).coerceIn(0f, 1f)
                    )
                },
        ) {
            Column(modifier = Modifier.padding(16.dp)) {
                Text(
                    text = stringResource(Widget.Inbox.labelRes),
                    style = MaterialTheme.typography.h6,
                )
            }
        }
    }
}

Upvotes: 0

Views: 213

Answers (1)

DiMiTRiS
DiMiTRiS

Reputation: 1

Replace this: .zIndex(page.toFloat()) with this: .zIndex(if (page == pagerState.currentPage) 1f else 0f)

Upvotes: 0

Related Questions