androidkotlinandroid-viewpagerandroid-animationandroid-pagetransformer

ViewPager : setPageTransformer wrong view translation


I'm trying to implement an intro for an app which has a viewpager with 3 pages and custom animation using : setPageTransformer

Views in centered page doesn't flow with the animation -at the end of the swipe from the first to the second page it return to the original place- which lead to wrong animation from second to third page

Here's my Code :

 pager.setPageTransformer(true) { view, position ->

        var mPosition = position

        val pageWidth = view.width
        val pageHeight = view.height
        val ratio = pageWidth.toFloat() / pageHeight


        if (position in 0.0..1.0) {

            bubble_intro_imageView.setTranslationY(-(pageWidth * (1 - mPosition) / 3 * ratio))
            notification_intro_textView.setTranslationX(pageWidth * (1 - mPosition) / 8 * ratio)
            bubble_intro_textView.setTranslationY(pageWidth * (1 - mPosition) / 3 * ratio)

        } else if (position in -1.0..-0.0) {

            var negativePosition = -position

            bubble_intro_imageView.setTranslationY(-(pageWidth * (1 - negativePosition) / 3 * ratio))
            notification_intro_textView.setTranslationX((pageWidth * (1 - negativePosition) / 8 * ratio))
            bubble_intro_textView.setTranslationY((pageWidth * (1 - negativePosition) / 3 * ratio))

        }
    }

I'm using "androidx" for the fragment, Adapter and Viewpager :

My Adapter :

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter
import java.util.ArrayList

class IntroPageAdapter(fragmentManager: FragmentManager) : FragmentStatePagerAdapter(
    fragmentManager,
    BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {

    var fragments = ArrayList<Fragment>()

    fun addFrag(fragment: Fragment) {
        fragments.add(fragment)
    }

    override fun getItem(position: Int): Fragment {
        return fragments[position]
    }

    override fun getCount(): Int {
        return fragments.size
    }
}

Is there something I missing?


Solution

  • After hours of searching for the problem. I found the solution which is a little bit weird The problem was in KTX-extension

    once I removed the usage of it and change it to "findViewById" It worked so well no interruption in the animation

    I don't know the explanation

    My code :

     pager.setPageTransformer(true) { view, position ->
    
                var mPosition = position
    
                val pageWidth = view.width
                val pageHeight = view.height
                val ratio = pageWidth.toFloat() / pageHeight
    
    
                notificationImageView = view.findViewById<View>(R.id.notification_intro_imageView) as ImageView?
                bubbleImageView = view.findViewById<View>(R.id.bubble_intro_imageView) as ImageView?
                bubbleTextView = view.findViewById<View>(R.id.bubble_intro_textView) as TextView?
    
    
                if (position in 0.0..1.0) {
    
                    if (notificationImageView != null && bubbleImageView != null && bubbleTextView != null) {
    
    
                        notificationImageView!!.setTranslationY(-(pageWidth * (1 - mPosition) / 3 * ratio))
                        bubbleImageView!!.setTranslationX(pageWidth * (1 - mPosition) / 8 * ratio)
                        bubbleTextView!!.setTranslationY(pageWidth * (1 - mPosition) / 3 * ratio)
    
                    }
    
                } else if (position in -1.0..-0.0) {
    
                    if (notificationImageView != null && bubbleImageView != null && bubbleTextView != null) {
    
    
                        var negativePosition = -position
                        notificationImageView!!.setTranslationY(-(pageWidth * (1 - negativePosition) / 3 * ratio))
                        bubbleImageView!!.setTranslationX((pageWidth * (1 - negativePosition) / 8 * ratio))
                        bubbleTextView!!.setTranslationY((pageWidth * (1 - negativePosition) / 3 * ratio))
    
                    }
    
                }
            }
    

    Does anyone know the explanation?