How to animate ConstraintLayout from bottom to top of the screen?

Question

I was looking for the easiest way to animate an object with ConstraintLayout from point A to point B, with the possibility of changing its duration and acceleration speed. For example, moving the layout / presentation from the bottom of the screen to the desired position with the restrictions set on the screen. I could not find how to do this for objects with ConstraintLayout . Can anyone point me in the right direction? Thanks.

Answer 1

Having this xml as content:

 <?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 is in action:

 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) } } } 

Result:

See this article and this presentation for more details.