Search code examples
javaandroidkotlinandroid-viewpager

How to show elevation shadow between fragments in a viewpager?

I have a ViewPager2 where the pages are fragments. The user can swipe a page in from the right side of the screen over top of the current page (that is stationary). The issue I have is that while the right page has an elevation higher then the current page during the viewpager animation, I can't seem to get a drop shadow to show up. Scaling down the current page and lowering the alpha (as shown in the screenshot below) has a decent effect, but it's not quite what I'm looking for.

enter image description here

Here is my Page Transformer where I'm setting the elevation (translationZ):

class DepthPageTransformer : ViewPager2.PageTransformer {

    override fun transformPage(view: View, position: Float) {
        view.apply {
            val pageWidth = width
            when {
                position < -1 -> { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    alpha = 0f
                }
                position <= 0 -> { // [-1,0]
                    // Fade the page out
                    alpha = 1f + position

                    // Counteract the default slide transition
                    translationX = pageWidth * -position
                    translationZ = 0f

                    val scaleFactor = (MIN_SCALE + (1 - MIN_SCALE) * (1 - abs(position)))
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                position <= 1 -> { // (0,1]
                    // Use the default slide transition when moving to the right page
                    alpha = 1f
                    translationZ = 20f
                    scaleX = 1f
                    scaleY = 1f
                }
                else -> { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    alpha = 0f
                }
            }
        }
    }
}

I have set the background color (which I believe is needed for elevation shadows) in the onCreateView method of the fragments:

val view = inflater.inflate(R.layout.fragment_item_list, container, false)
view.setBackgroundColor(Color.WHITE)

Anyone know what I might be missing or doing wrong? Thank you.

Solution

  • This appears to be a bug with the current version (beta04) of the ViewPager2 component. The shadow appears properly in the older ViewPager.

    Created an issue with Google, hopefully they can look into it.