CODEWITHSUNDEEP
androidanimationkotlinandroid-animationandroid-constraintlayout
Moo33
Moo33

Reputation: 1283

How to animate ConstraintLayout from bottom to top of screen?

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.

Upvotes: 11

Views: 8579

Answers (1)

azizbekian
azizbekian

Reputation: 62189

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:

enter image description here

See this article and this presentation for more details.

Upvotes: 19

Related Questions