Android Constraint Layout Animation

Filed Under: Android

In this tutorial, we’ll be implementing Constraint Layout Animations in our Android Application.

Constraint Layout Animation

We can create beautiful animations using ConstraintLayout quickly. To do so, we need to just change constraints!

The most common and easy way to create Constraint Layout animations in by creating two different layouts.
One is the start stage of the animation and the second is the end stage of the animation.

Constraint Set is the class used to set constraints on the views of the Constraint Layout.

ConstraintSet

ConstraintSet is the class that is used to define constraints programmatically on the Constraint Layout.
It can also retrieve the constraints present in the Constraint Layout by using clone() method.

clone() method is used to copy the constraints from the layout.

applyTo() is used to apply a constraint set onto the Constraint Layout.

A ConstraintSet is created just like any other Java object:


ConstraintSet constraintSet = new ConstraintSet();

To set constraints on the views programmatically, we need to use connect().

connect() establishes connections between sibling views or a view and the parent view.

To create a ConstraintLayout animation we need:

TransitionManager – To manage the transitions.
beginDelayedTransition() – To start the transition from the first scene to second scene(first layout to the second layout).

applyTo() – To apply the final constraints on the second layout.

That means you need to create duplicate XML layouts with the difference being the constraints.
The first layout should show constraints at the initial stage of the transition.
The second layout should show the constraints after the animation.

This way the transition occurs!

You need not set attributes and styles in the duplicated XML. It will be automatically captured from the first.

To use ConstraintSet, every view in the XML layout must have an ID.

Enough talk! Let’s code.

Project Structure

android constraint layout animation project

Code

The code for the activity_main.xml layout is given below:


<?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:id="@+id/cc1"
    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/bg"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/inPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:paddingBottom="8dp"
        android:paddingEnd="24dp"
        android:paddingStart="24dp"
        android:paddingTop="8dp"
        android:textColor="#FFFF"
        android:background="@drawable/input_field"
        android:imeOptions="actionNext"
        android:inputType="textPassword"
        android:maxLines="1"
        android:layout_margin="16dp"
        android:textColorHint="#b3ffffff"
        android:textCursorDrawable="@null"
        app:layout_constraintBottom_toBottomOf="@+id/inUsername"
        app:layout_constraintLeft_toRightOf="@+id/backgroundImage" />

    <EditText
        android:id="@+id/inUsername"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:hint="Username"
        android:paddingBottom="8dp"
        android:paddingEnd="24dp"
        android:paddingStart="24dp"
        android:paddingTop="8dp"
        android:textColor="#FFFF"
        android:background="@drawable/input_field"
        android:imeOptions="actionNext"
        android:inputType="textEmailAddress"
        android:maxLines="1"
        android:layout_margin="16dp"
        android:textColorHint="#b3ffffff"
        android:textCursorDrawable="@null"
        app:layout_constraintRight_toLeftOf="@+id/backgroundImage"
        app:layout_constraintTop_toTopOf="parent" />

    <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 to animate"
        android:textColor="#ffffff"
        android:textSize="15sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#181818"
        android:gravity="center"
        android:text="LOGIN"
        android:textColor="#FFFF"
        android:textSize="18sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/backgroundImage" />

</android.support.constraint.ConstraintLayout>

The code for the drawable input_field.xml can be found in the source code/github repo present at the end of this tutorial.

android constraint animation layout 1

The code for the final activity_main_animated.xml layout is :


<?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:id="@+id/cc2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

    <EditText
        android:id="@+id/inUsername"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:paddingBottom="8dp"
        android:paddingEnd="24dp"
        android:paddingStart="24dp"
        android:paddingTop="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/inPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:paddingBottom="8dp"
        android:paddingEnd="24dp"
        android:paddingStart="24dp"
        android:paddingTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/inUsername" />

    <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"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:gravity="center"
        android:textSize="18sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/inPassword" />


</android.support.constraint.ConstraintLayout>

android constraint animation layout 2

The code for the MainActivity.java is given below:


package com.journaldev.androidconstraintanimation;

import android.support.constraint.ConstraintLayout;
import android.support.constraint.ConstraintSet;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.ChangeBounds;
import android.transition.TransitionManager;
import android.view.View;
import android.view.animation.AnticipateInterpolator;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {


    ImageView imageView;
    boolean show = false;
    ConstraintLayout cc1;

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

        cc1 = findViewById(R.id.cc1);

        imageView = findViewById(R.id.backgroundImage);

        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (show)
                    revertAnimation();
                else
                    showAnimation();
            }
        });

    }

    private void showAnimation() {
        show = true;

        ConstraintSet constraintSet = new ConstraintSet();
        constraintSet.clone(this, R.layout.activity_main_animation);

        ChangeBounds transition = new ChangeBounds();
        transition.setInterpolator(new AnticipateInterpolator(1.0f));
        transition.setDuration(1200);

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

    private void revertAnimation() {
        show = false;

        ConstraintSet constraintSet = new ConstraintSet();
        constraintSet.clone(this, R.layout.activity_main);

        ChangeBounds transition = new ChangeBounds();
        transition.setInterpolator(new AnticipateInterpolator(1.0f));
        transition.setDuration(1200);

        TransitionManager.beginDelayedTransition(cc1, transition);
        constraintSet.applyTo(cc1);

    }

}

Inside the TransitionManager we’ve set an interpolator class which has a predefined behaviour.

The output of the above application in action is given below:

android constraint animation output

This brings an end to this tutorial. You can download the project from the link below:

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages