How to use ConstraintSet for animation in Android with Java?

Question

I find that there is a quick way to create animation with ConstraintSet for ConstrainLayout Activity. Faster than use TransitionManager for RelativeLayout

ConstraintSet use two xml file for an Activity. One for the first position and next one for the destination.

I want to create something like this:

https://media.giphy.com/media/2UwXdWEoLWe9iQMFIY/giphy.gif

But there is no clearly instruction show how to use it in Java. Anyone had done this can show me the source code or link to some post like that.

Thanks for reading the post.

Answer 1

This is possible with ConstraintSet. They key is two have two layouts one layout has ui elements of the screen and the other has elements on the screen. Now you can use TransitionManager with interpolator and duration of your choice and animate the layout changes.

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        android:id="@+id/constraint"
        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"
        android:background="#181818"
        tools:context=".MainActivity">

        <ImageView
            android:id="@+id/backgroundImage"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:src="@drawable/mugello"
            android:scaleType="centerCrop"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="JUNE 3, 2018"
            app:layout_constraintRight_toRightOf="@+id/title"
            app:layout_constraintBottom_toBottomOf="@+id/title"
            android:textSize="12sp"
            android:background="#d3d3d3"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:paddingTop="3dp"
            android:paddingBottom="3dp"/>

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="48dp"
            android:background="#F44336"
            android:paddingBottom="8dp"
            android:paddingEnd="24dp"
            android:paddingStart="24dp"
            android:paddingTop="8dp"
            android:text="Mugello Circuit"
            android:textColor="#FFFF"
            android:textSize="45sp"
            app:layout_constraintRight_toLeftOf="@+id/backgroundImage"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/fadeBackgroudView"
            android:layout_width="wrap_content"
            android:layout_height="90dp"
            android:foreground="@drawable/gradient_variant"
            app:layout_constraintBottom_toTopOf="@+id/description" />

        <TextView
            android:id="@+id/tap"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:text="Tap for info"
            android:textSize="15sp"
            android:textColor="#ffffff"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="The Mugello is a historic region and valley in northern Tuscany, in Italy. It is located to the north of the city of Florence and consists of the northernmost portion of the Metropolitan City of Florence.  It is connected to the separate Santerno river valley by the Futa Pass."
            android:textSize="22sp"
            android:textColor="#FFFF"
            android:background="#181818"
            android:gravity="center"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:paddingBottom="8dp"
            app:layout_constraintTop_toBottomOf="@+id/backgroundImage"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>

    </android.support.constraint.ConstraintLayout>

activity_main_detail.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/backgroundImage"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@drawable/mugello"
        app:layout_constraintBottom_toTopOf="@+id/description"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:background="#F44336"
        android:paddingBottom="8dp"
        android:paddingEnd="24dp"
        android:paddingStart="24dp"
        android:paddingTop="8dp"
        android:text="Mugello Circuit"
        android:textColor="#FFFF"
        android:textSize="45sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="JUNE 3, 2018"
        app:layout_constraintRight_toRightOf="@+id/title"
        app:layout_constraintTop_toBottomOf="@+id/title"
        android:textSize="12sp"
        android:background="#d3d3d3"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:paddingTop="3dp"
        android:paddingBottom="3dp"/>

    <View
        android:id="@+id/fadeBackgroudView"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:foreground="@drawable/gradient"
        app:layout_constraintBottom_toTopOf="@+id/description" />

    <TextView
        android:id="@+id/tap"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="Tap for info"
        android:textSize="15sp"
        android:textColor="#ffffff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The Mugello is a historic region and valley in northern Tuscany, in Italy. It is located to the north of the city of Florence and consists of the northernmost portion of the Metropolitan City of Florence.  It is connected to the separate Santerno river valley by the Futa Pass."
        android:textSize="22sp"
        android:textColor="#FFFF"
        android:gravity="center"
        android:background="#181818"
        android:paddingStart="8dp"
        android:paddingEnd="8dp"
        android:paddingBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>


</android.support.constraint.ConstraintLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private boolean show = false;

    private ImageView backgroundImage;
    private ConstraintLayout constraint;
    private ConstraintSet constraintSet = new ConstraintSet();

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        constraint = findViewById(R.id.constraint);
        backgroundImage = findViewById(R.id.backgroundImage);
        backgroundImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(show)
                    hideComponents(); // if the animation is shown, we hide back the views
                else
                    showComponents() ;// if the animation is NOT shown, we animate the views
            }

        });

    }

    private void showComponents(){
        show = true;

        constraintSet.clone(this, R.layout.activity_main_detail);

        Transition transition = new ChangeBounds();
        transition.setInterpolator(new AnticipateOvershootInterpolator(1.0f));
        transition.setDuration(1000);

        TransitionManager.beginDelayedTransition(constraint, transition);
        constraintSet.applyTo(constraint);
    }

    private void hideComponents(){
        show = false;

        constraintSet.clone(this, R.layout.activity_main);

        Transition transition = new ChangeBounds();
        transition.setInterpolator(new AnticipateOvershootInterpolator(1.0f));
        transition.setDuration(1000);


        TransitionManager.beginDelayedTransition(constraint, transition);
        constraintSet.applyTo(constraint);
    }
}

Here's a slide share on ConstraintLayout https://speakerdeck.com/camaelon/advanced-animations-and-constraintlayout