Sync layout animation with view pager swipe progress

Question

I have a fragment inside a view pager that is partially animated. The table layout inside the fragment has the following slide in animation:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0" android:toAlpha="1.0"
        android:fillEnabled="true"
        android:fillBefore="true" android:fillAfter="true"
        android:duration="500"/>
    <translate
        android:fromXDelta="0%"
        android:fromYDelta="10%"
        android:toXDelta="0%"
        android:toYDelta="0%"
        android:duration="500"/>
</set>

I want to play this animation every time I enter this page and the reverse one when I leave. But the animation should be synchronized with the swipe progress. So when I swiped in or out by 50% the table layout should be at deltaY = 5% and alpha = 0.5 . Is this possible?

Answer 1

Okay, I was not able to manipulate the duration of a playing animation so I also had to define the animation programmatically.

Base class:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.viewpager.widget.ViewPager
import org.dermagerestudent.ehrenlos.R

abstract class ViewPagerAnimatedFragment(private val layoutID: Int, private val position: Int): Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(this.layoutID, container, false)
        this.onCreate(view)

        val viewPager = this@ViewPagerAnimatedFragment.activity?.findViewById<ViewPager>(R.id.main_view_pager)!!
        viewPager.addOnPageChangeListener(object: ViewPager.OnPageChangeListener {
            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
                if (!(this@ViewPagerAnimatedFragment.position - 1..this@ViewPagerAnimatedFragment.position).contains(position))
                    return

                this@ViewPagerAnimatedFragment.onScroll(
                    if (position < this@ViewPagerAnimatedFragment.position) positionOffset else 1 - positionOffset
                )
            }

            override fun onPageSelected(position: Int) { }
            override fun onPageScrollStateChanged(state: Int) { }
        })

        return view
    }

    open fun onCreate(view: View) { }
    open fun onScroll(pageVisibility: Float) { }
}

Example deriving class:

import android.view.View
import android.view.animation.AnimationUtils
import android.widget.LinearLayout

import org.dermagerestudent.ehrenlos.R

class HomeFragment(layoutID: Int, position: Int) : ViewPagerAnimatedFragment(layoutID, position) {
    private lateinit var table: LinearLayout

    override fun onCreate(view: View) {
        this.table = view.findViewById<LinearLayout>(R.id.test_layout)
        this.table.animation = AnimationUtils.loadAnimation(this.context, R.anim.fade_slide_in)
    }

    override fun onScroll(pageVisibility: Float) {
        this.table.alpha = pageVisibility
    }
}

Currently, I was only able to implement the alpha animation because I don't know how to implement a percentage y movement. Any help?