How to animate ConstraintLayout from bottom to top of screen?

Question

I've been looking for the simplest way to animate an object with ConstraintLayout from point A to point B, with the ability to change its duration and acceleration speed. Eg, moving a layout/view from off screen bottom to it's intended position with constraints set on screen. I've not been able to find how to do it for objects with ConstraintLayout . Anyone can point me in the right direction? Thanks.

Answer 1

Having this xml as content view:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraint_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

</android.support.constraint.ConstraintLayout>

And this in the activity:

class SecondActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.item)

        val constraintLayout = findViewById(R.id.constraint_layout) as ConstraintLayout
        val button = findViewById(R.id.button)

        button.setOnClickListener {
            val constraintSet = ConstraintSet()
            constraintSet.clone(constraintLayout)
            constraintSet.setVerticalBias(R.id.button, 1.0f)
            constraintSet.setHorizontalBias(R.id.button, 1.0f)

            val transition = AutoTransition()
            transition.duration = 1500
            transition.interpolator = AccelerateDecelerateInterpolator()

            TransitionManager.beginDelayedTransition(constraintLayout, transition)
            constraintSet.applyTo(constraintLayout)
        }
    }
}

Will result in this output:

See this article and this presentation for more details.