CODEWITHSUNDEEP
javaandroidkotlinandroid-viewpager2
DatLag
DatLag

Reputation: 150

ViewPager2 Stack PageTransform

I need some help with a PageTransformer for ViewPager2.

I have 3 pages in my ViewPager2. Each page should be overlapped by the next. In addition, the pages should all be firmly in the middle and only be slidable to the side.



Example:
Page 1: blue color
Page 2: purple color
Page 3: green color

Page 1 is overlapped by Page 2 and page 2 is overlapped by Page 3.

I have set that the 3rd page can be seen first by setting the currentItem to 2

You can see the green page and if you push it to the right you should be able to see the purple page (even while pushing) If you then push the purple page to the right you should see the blue page And the pages should not move (except to the side of course)

Something similar to this but the overlap the other way around because i start at page 3 and without changing the scaling. (The alpha change is totally okay and wanted)

I hope someone can help me and thanks in advance

Upvotes: 1

Views: 556

Answers (1)

DatLag
DatLag

Reputation: 150

After a few hours of trying, I have the desired result

class StackTransformer : ViewPager2.PageTransformer {
    override fun transformPage(view: View, position: Float) {
        view.apply {
            when {
                position < -1 -> {
                    alpha = 0f
                }
                position <= 0 -> {
                    alpha = 1 - position
                    translationX = width * -position
                    ViewCompat.setTranslationZ(this, -1f)
                }
                position <= 1 -> {
                    alpha = 1f
                    translationX = 0f
                    ViewCompat.setTranslationZ(this, 0f)
                }
                else -> {
                    alpha = 0f
                }
            }
        }
    }
}

Upvotes: 1

Related Questions