CODEWITHSUNDEEP
androidandroid-jetpack-composepager
R0ck
R0ck

Reputation: 499

HorizontalPager is ignoring itemSpacing and overriding content in Jetpack Compose

I have a HorizontalPager (from Accompanist) with a currentPage focus effect. On the emulator, it works correctly and with the correct spacing that I intend, however, on a smartphone, it doesn't respect the itemSpacing and completely ignores it, overlapping the pager items on the right. Is there any way to make this pager always have the same spacing regardless of the device? Or, at least, that the item on the right does not overlap and that the main item overlaps the other two?

Below a few screenshots of what is happening and the behavior that I want:

Correct behavior (working on emulator):

enter image description here enter image description here

Wrong behavior & problem (working on physical device):

enter image description here

Code:

 HorizontalPager(
        state = state,
        count = items.count(),
        contentPadding = PaddingValues(horizontal = 72.dp),
        itemSpacing = 10.dp,
        modifier = modifier.padding(top = 16.dp)
    ) { page ->
        Card(
            shape = RectangleShape,
            modifier = Modifier
                .graphicsLayer {
                    // Calculate the absolute offset for the current page from the
                    // scroll position. We use the absolute value which allows us to mirror
                    // any effects for both directions
                    val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue

                    // We animate the scaleX + scaleY, between 85% and 100%
                    lerp(
                        start = 0.85f,
                        stop = 1f,
                        fraction = 1f - pageOffset.coerceIn(0f, 1f)
                    ).also { scale ->
                        scaleX = scale
                        scaleY = scale
                    }

                    // We animate the alpha, between 50% and 100%
                    alpha = lerp(
                        start = 0.6f,
                        stop = 1f,
                        fraction = 1f - pageOffset.coerceIn(0f, 1f)
                    )
                }
                .requiredWidth(284.dp)
                .requiredHeight(168.dp)
                //.coloredShadow(Shadow, 0.28f)
        ) {
            // content
        }
    }

Any additional necessary code can be provided, just let me know.

Upvotes: 1

Views: 1664

Answers (1)

Shreya Singh
Shreya Singh

Reputation: 1

You should be using how to support different screen sizes in android with jetpack compose, in which you can define dimensions for different configurations. You can refer to this tutorial on the same

https://proandroiddev.com/supporting-different-screen-sizes-on-android-with-jetpack-compose-f215c13081bd

Upvotes: 0

Related Questions