Animate Android Views to change their position and dimensions

Question

Could you please suggest how it is possible to animate views in Android to change their position, width, height, margins, etc. I've attached picture with 3 views (colors - yellow, blue, orange) that located in viewgroup (green color), total number of viewgroups is 3. The idea is - when "Animate button" is clicked position and dimensions of viewgroups with their inner views should be changed with animation. Purple arrows show the two ways of animated direction.

Answer 1

It can be achieved by using ConstraintLayouts and ConstraintSet animations, for example : layout_1.xml

<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:id="@+id/layout_1"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Button
    android:id="@+id/button1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View1"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View2"
    app:layout_constraintBottom_toBottomOf="@+id/button1"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintStart_toEndOf="@+id/button1"
    app:layout_constraintTop_toTopOf="@+id/button1" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View3"
    app:layout_constraintBottom_toBottomOf="@+id/button2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintTop_toTopOf="@+id/button2" />

<Button
    android:id="@+id/animateButton"
    android:layout_width="88dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.88"
    app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

layout_2.xml :

<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Button
    android:id="@+id/button1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="32dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button1" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:background="@android:color/holo_red_dark"
    android:text="View3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2" />


<Button
    android:id="@+id/animateButton"
    android:layout_width="88dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.88"
    app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

and on the animateButton, you add :

 private fun addAnimation() {
    var set = false
    val constraint1 = ConstraintSet()
    constraint1.clone(root)
    val constraint2 = ConstraintSet()
    constraint2.clone(this, R.layout.layout_2)

    findViewById<Button>(R.id.animateButton).setOnClickListener {
        TransitionManager.beginDelayedTransition(root)
        val constraint = if (set) constraint1 else constraint2
        constraint.applyTo(root)
        set = !set
    }
}

When we apply a new ConstraintSet to the same layout, ConstraintLayout will find the changes in constraints to elements with the same android:id and will animate properly. And of course, you can change the constraints of your items programatically if you don't want to duplicate a layout file.