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. E.g., 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.