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?
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?