<p>In this tutorial, we will talk about how to implement ConstraintLayout Animations in our Android Application using a simple example.</p>
<h3><span style="color: #000080;"><strong>ConstraintLayout Animations</strong></span></h3>
<p>Animations make your app look polished, improve engagement, and are fun to build. With ConstraintLayout it’s easy to build complex animations involving several views at once and to do so, we need to just change constraints!</p>
<p>By specifying your animations via keyframes, it is easy to fluidly animate complex scenes without a lot of code.</p>
<p class="p1">Within a <span class="s1">ConstraintLayout</span>, you can animate changes to the size and position of elements by using <strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintSet"><span class="s2">ConstraintSet</span></a></span></strong> and <strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="https://developer.android.com/reference/android/transition/TransitionManager"><span class="s2">TransitionManager</span></a></span></strong>.</p>
<p>The most common and easy way to build an animation using ConstraintSets, specify two layout files which act as a start and end keyframe for the animation. You can then load a <span class="s1">ConstraintSet</span> from the second keyframe file and apply it to the displayed <span class="s1">ConstraintLayout</span>.</p>
<p><b><span style="color: #0000ff;">Note</span>: </b><strong><span style="color: #008000;">ConstraintLayout</span></strong> and <strong><span style="color: #008000;">ConstraintSet</span></strong> supports from API 9 onwards and <strong><span class="s1" style="color: #008000;">TransitionManager</span></strong> is available from API level 14 onwards.</p>
<h3><span style="color: #000080;"><strong>ConstraintSet</strong></span></h3>
<p class="p1"><span class="s1"><strong><span style="color: #008000;">ConstraintSet</span></strong> is a </span>class that allows you to define programmatically a set of constraints to be used with <strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout.html"><span class="s1">ConstraintLayout</span></a></span></strong>.</p>
<p>In other words, we can say <span style="color: #008000;"><strong><span class="s1">ConstraintSet</span></strong></span> is a lightweight object that represents the constraints, margins, and padding of all child elements within a <span class="s1">ConstraintLayout</span>.</p>
<p>It lets you create and save constraints, and apply them to an existing ConstraintLayout.</p>
<p>When you apply a <strong><span class="s1" style="color: #008000;">ConstraintSet</span></strong> to a displayed <span class="s1">ConstraintLayout</span>, the layout updates the constraints of all of its children.</p>
<p>A ConstraintSet is created just like any other Java object:</p>
<pre>ConstraintSet constraint = new ConstraintSet();</pre>
<p><b><span style="color: #0000ff;">Important</span>:</b> ConstraintSet animations animate only the size and position of child elements. They do not animate other attributes (such as color).</p>
<h4><span style="color: #000080;"><strong>ConstraintSet Methods</strong></span></h4>
<p><strong><span style="color: #0000ff;">connect()</span></strong>: This method is used to set constraints on the views programmatically. It establishes connections between sibling views or a view and the parent view.</p>
<p>Both <span style="color: #0000ff;"><strong>clone() </strong><span style="color: #000000;">and</span><strong> load()</strong> <span style="color: #000000;">methods</span> <span style="color: #000000;">of <strong><span style="color: #008000;">ConstrainSet</span></strong> class </span></span>do the operation similarly with a slight difference.</p>
<p><span style="color: #0000ff;"><b>clone() : </b><span style="color: #000000;">It </span></span>will inflate the layout and absorb all the layout related constraint mappings (<span style="color: #008000;"><strong>layout_width,layout_height,layout_marginTop etc. and not styling ie. textSize, color etc</strong></span>) of the particular views within the constraint layout.</p>
<p><strong><span style="color: #0000ff;">load()</span></strong>: It will parse the XML and then absorb all the layout related constraint mappings of the views within the constraint layout.</p>
<h4><span style="color: #000080;"><strong>To create a ConstraintLayout animation we need:</strong></span></h4>
<p class="p1"><span style="color: #0000ff;"><b><a style="color: #0000ff;" href="https://developer.android.com/reference/android/transition/TransitionManager.html">TransitionManager</a></b></span> — This class manages the set of transitions that fire when there is a change of <span style="color: #008000;"><strong><a style="color: #008000;" href="https://developer.android.com/reference/android/transition/Scene.html"><span class="s1">Scene</span></a></strong></span>. Setting specific transitions for scene changes is not required; by default, a Scene change will use <strong><span style="color: #008000;"><a style="color: #008000;" href="https://developer.android.com/reference/android/transition/AutoTransition.html"><span class="s1">AutoTransition</span></a></span></strong> to do something reasonable for most situations. Specifying other transitions for particular scene changes is only necessary if the application wants different transition behavior in these situations.</p>
<p class="p1"><span style="color: #0000ff;"><b><a style="color: #0000ff;" href="https://developer.android.com/reference/android/transition/TransitionManager.html#beginDelayedTransition(android.view.ViewGroup,%20android.transition.Transition)">beginDelayedTransition()</a></b> </span>— Convenience method to animate, using the default transition, to start the transition from the first scene to the second scene(first layout to the second layout).Equivalent to calling <strong><span style="color: #008000;"><a style="color: #008000;" href="https://developer.android.com/reference/android/transition/TransitionManager.html#beginDelayedTransition(android.view.ViewGroup,%20android.transition.Transition)"><span class="s1">beginDelayedTransition(ViewGroup, Transition)</span></a></span></strong> with a value of null for the transition parameter.</p>
<p class="p1"><span style="color: #0000ff;"><b>applyTo()</b> </span>— sets or applies the new or requested constraints to the view specified.</p>
<h3><span style="color: #000080;"><strong>A Simple Example</strong></span></h3>
<p>The goal of our example is the following animation — which we want to achieve.</p>
<p><strong><span style="color: #008000;">Get GITHUB code from</span> <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://github.com/arunk7839/ConstraintAnimationDemo">here</a></span></strong>.</p>
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="ig3pJ9NZH1s" title="Android Constraint Layout Animation"><a placeholder href="https://youtu.be/ig3pJ9NZH1s"><img src="https://i.ytimg.com/vi/ig3pJ9NZH1s/hqdefault.jpg" layout="fill" object-fit="cover" alt="Android Constraint Layout Animation"></a></amp-youtube></p>
<p> ;</p>
<p>As you can see, we have our <span style="color: #008000;"><strong>ic_launcher_round</strong></span> logo at the top of our screen. On <span style="color: #008000;"><strong class="id jq">tapping</strong></span> the image, it has to come to the bottom of the screen. Also, notice that when the image reaches the bottom of the screen, it’s size is increased.</p>
<h4 id="31dd" class="lq iq cn ar aq do lr ls lt lu lv lw lx ly lz ma mb"><span style="color: #000080;"><strong>Creating Our Layouts</strong></span></h4>
<p>Let’s create our first layout of the <span style="color: #000000;">MainActivity which is <strong><span style="color: #008000;">activity_main.xml</span></strong></span>. Pay close attention to the constraints.</p>
<p><span style="color: #0000ff;"><strong>activity_main.xml</strong></span></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<pre><;?xml version="1.0" encoding="utf-8"?>;
<;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"
 <strong><span style="color: #008000;"> android:id="@+id/root"</span></strong>
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">;

 <;ImageView
 android:id="@+id/imageView"
 <strong><span style="color: #008000;"> android:layout_width="100dp"
 android:layout_height="100dp"</span></strong>
 android:layout_marginStart="8dp"
 android:layout_marginTop="8dp"
 android:layout_marginEnd="8dp"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:srcCompat="@mipmap/ic_launcher_round" />;

<;/androidx.constraintlayout.widget.ConstraintLayout>;</pre>
<p><img class="alignnone size-full wp-image-1406" src="https://c1ctech.com/wp-content/uploads/2019/12/Screenshot-2019-12-04-18.37.24-3794724038-1575548647876.png" alt="Screenshot 2019-12-04 18.37.24" width="884" height="739" /></p>
<p class="p1">Let’s create our final layout or the second frame — <strong><span style="color: #008000;">activity_main_animation.xml</span></strong>. In this second layout, to make our image bigger, I’ve increased it to 250dp.</p>
<p><span style="color: #0000ff;"><strong>activity_main_animation.xml</strong></span></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;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">;


 <;ImageView
 android:id="@+id/imageView"
 <span style="color: #008000;"><strong> android:layout_width="250dp"
 android:layout_height="250dp"</strong></span>
 android:layout_marginStart="8dp"
 android:layout_marginEnd="8dp"
 android:layout_marginBottom="8dp"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:srcCompat="@mipmap/ic_launcher_round" />;
<;/androidx.constraintlayout.widget.ConstraintLayout>;</pre>
<p><img class="alignnone size-full wp-image-1407" src="https://c1ctech.com/wp-content/uploads/2019/12/Screenshot-2019-12-04-18.37.57-879109051-1575548754491.png" alt="Screenshot 2019-12-04 18.37.57" width="846" height="726" /></p>
<p> ;</p>
<h4 id="3828" class="lq iq cn ar aq do lr ls lt lu lv lw lx ly lz ma mb"><span style="color: #000080;"><strong>Creating Animation</strong></span></h4>
<p class="p1">Now, we need to make this transition smooth by defining the animation, with the starting point as <span style="color: #008000;"><strong>activity_main.xml</strong> </span>and ending point as <span style="color: #008000;"><strong>activity_main_animation.xml</strong></span>.</p>
<pre>ConstraintLayout root;
ImageView imageView;

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

 root = findViewById(R.id.root);

 imageView = findViewById(R.id.imageView);

}

private void showAnimation() {
 show = true;

 ConstraintSet constraint1 = new ConstraintSet();

 constraint1.clone(this, R.layout.activity_main_animation);


 TransitionManager.beginDelayedTransition(root);
 constraint1.applyTo(root);
}</pre>
<p class="p1">In our <strong><span style="color: #008000;">MainActivity.Java</span></strong>, let’s create the click listener for our image and add the following code.</p>
<p><span style="color: #0000ff;"><strong>MainActivity.java</strong></span></p>
<pre>package com.example.constraintanimationdemo;

import android.os.Build;
import android.os.Bundle;
import android.transition.TransitionManager;
import android.view.View;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;

public class MainActivity extends AppCompatActivity {

 ConstraintLayout root;
 ImageView imageView;
 boolean show = false;

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

 root = findViewById(R.id.root);

 imageView = findViewById(R.id.imageView);

 imageView.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {

 if (Build.VERSION.SDK_INT >;= Build.VERSION_CODES.KITKAT) {
 if (show)
 revertAnimation();
 else
 showAnimation();
 }
 }
 });

 }

 private void showAnimation() {
 show = true;

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


 TransitionManager.beginDelayedTransition(root);
 constraint1.applyTo(root);
 }

 private void revertAnimation() {
 show = false;

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

 TransitionManager.beginDelayedTransition(root);
 constraint2.applyTo(root);

 }

}</pre>
<h4 class="p1"><span style="color: #000080;"><b>Exploring MainActivity.Java</b></span></h4>
<ul class="ul1">
<li class="li2">We created 2 ConstraintSet() — constraint1 and constraint2.</li>
<li class="li2">We got the constraints from <strong><span style="color: #008000;">activity_main.xml</span></strong> using <strong><span style="color: #0000ff;">clone()</span></strong> and mapped it to constraint1.</li>
<li class="li2">We got the constraints from<strong><span style="color: #008000;"> activity_main_animation.xml</span></strong> using <strong><span style="color: #0000ff;">clone()</span></strong> and mapped it to constraint2.</li>
<li class="li2">Then with the help of our <strong><span style="color: #008000;">TansitionManager</span></strong>, we initiated a default transition using <strong><span style="color: #008000;">beginDelayedTransition()</span></strong> to our root ConstraintLayout.</li>
<li class="li2">Based on the set value, we changed and applied the Constraints using the method <strong><span style="color: #008000;">applyTo().</span></strong></li>
</ul>
<p class="p1">Now, that’s all! no more additional steps. Run the app and check it yourself. Tap the image and you will see the keyframe animation in place.</p>
<h4><strong><span style="color: #000080;">Duplicating XML layout?</span></strong></h4>
<p class="p1">As you can see, we need to duplicate the layouts to achieve the animation or transition. But nobody would like to duplicate anything.<span style="color: #008000;"><strong> But when you clone the constraints, it takes only the layout related constraints and attributes such as layout width and height. But not the styling attributes — such as textSize, color, etc..</strong></span> So you need not replicate the exact styling in all the alternate layouts.</p>
<h4><span style="color: #000080;"><strong>You can achieve the same result using transition framework!</strong></span></h4>
<p class="p1">You are right in that none of this is new. You can achieve the same result with the transition framework. However, this becomes powerful when the animation you are trying to implement can be nicely specified using specific constraints (e.g. chained elements, guidelines, etc.) that would otherwise take a lot of work to achieve.</p>
<p class="p1">ConstraintLayout will only perform animation on its direct children since it only knows when you change layout parameters and constraints on the children that it handles. It means that it won’t handle nested ViewGroups very nicely. But nested ConstraintLayout may solve this problem.</p>
<p>I hope this article will help you in understanding the basics of how to implement ConstraintLayout animations in android applications. Next, we’ll see another use-case and we’ll also learn how to implement other transition effects.</p>
<p> ;</p>
<p> ;</p>
<p> ;</p>