<p>In the previous article, <strong><span style="color: #0000ff;"><a style="color: #0000ff;" href="https://c1ctech.com/android-constraintlayout-animation/">Android ConstraintLayout Animation: Part I</a> </span></strong>we have talked about how to implement keyframe animation with a simple example using <span style="color: #008000;"><strong>ConstraintLayout</strong></span> and <strong><span style="color: #008000;">ConstraintSet.</span></strong><span style="color: #008000;"><span style="color: #000000;">We also peeked into few methods which made our animation possible.</span></span></p>
<p>Now In this article, we’ll see another use-case and we’ll also learn how to implement other transition effects.</p>
<p>Let’s see first what we’re going to build: Our goal is to create an animation that shows-off the Hampi detail when the user presses the screen, with seamless and fluid animation.</p>
<p><span style="color: #0000ff;"><strong>Get GITHUB code from <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://github.com/arunk7839/AndroidConstraintAnimationDemo">here</a></span>.</strong></span></p>
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="aMdioi-LK6U" title="Android Constraint Layout Animation"><a placeholder href="https://youtu.be/aMdioi-LK6U"><img src="https://i.ytimg.com/vi/aMdioi-LK6U/hqdefault.jpg" layout="fill" object-fit="cover" alt="Android Constraint Layout Animation"></a></amp-youtube></p>
<p> ;</p>
<p id="081e" class="ia ib cn ar ic b id ie if ig ih ii ij ik il im in" data-selectable-paragraph="">This animation is created with two different layout files: <span style="color: #008000;"><strong>hampi.xml</strong></span> and <strong><span style="color: #008000;">hampi_detail.xml.</span></strong></p>
<h3 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></h3>
<p>Let’s create our first layout of the <span style="color: #008000;"><strong>MainActivity</strong></span> which is <span style="color: #008000;"><b>hampi.xml.</b></span> In this layout, the views are the same as the second layout, but they are hidden outside the layout.</p>
<p><img class=" wp-image-1415 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/12/Screenshot-2019-12-05-19.47.14.png" alt="Screenshot 2019-12-05 19.47.14" width="605" height="527" /></p>
<p><span style="color: #0000ff;"><strong>hampi.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:id="@+id/root"
 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:scaleType="centerCrop"
 android:src="@drawable/hampi_img"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent" />;

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

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

 <;View
 android:id="@+id/fadeView"
 android:layout_width="wrap_content"
 android:layout_height="90dp"
 android:foreground="@drawable/gradient"
 app:layout_constraintBottom_toTopOf="@+id/description"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent" />;

 <;TextView
 android:id="@+id/tap"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginStart="8dp"
 android:layout_marginEnd="8dp"
 android:layout_marginBottom="12dp"
 android:text="Tap for info"
 android:textColor="#ffffff"
 android:textSize="15sp"
 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:background="#181818"
 android:gravity="center"
 android:paddingStart="8dp"
 android:paddingEnd="8dp"
 android:paddingBottom="8dp"
 android:text="@string/hampi_detail"
 android:textColor="#FFFF"
 android:textSize="22sp"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/backgroundImage" />;


<;/androidx.constraintlayout.widget.ConstraintLayout>;</pre>
<p data-selectable-paragraph="">Let’s create our final layout or the second frame — <span style="color: #008000;"><strong>hampi_datail.xml</strong></span>. This layout consists of the final views position.</p>
<p data-selectable-paragraph=""><img class=" wp-image-1416 aligncenter" src="https://c1ctech.com/wp-content/uploads/2019/12/Screenshot-2019-12-05-19.48.15.png" alt="Screenshot 2019-12-05 19.48.15" width="622" height="543" /></p>
<p data-selectable-paragraph=""><span style="color: #0000ff;"><strong>hampi_datail.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"
 android:layout_width="match_parent"
 android:layout_height="match_parent">;

 <;ImageView
 android:id="@+id/backgroundImage"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:scaleType="centerCrop"
 android:src="@drawable/hampi_img"
 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="#673AB7"
 android:paddingStart="24dp"
 android:paddingTop="8dp"
 android:paddingEnd="24dp"
 android:paddingBottom="8dp"
 android:text="Hampi"
 android:textColor="#FFFF"
 android:textSize="45sp"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintTop_toTopOf="parent" />;

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

 <;View
 android:id="@+id/fadeView"
 android:layout_width="wrap_content"
 android:layout_height="30dp"
 android:foreground="@drawable/gradient"
 app:layout_constraintBottom_toTopOf="@+id/description"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent" />;

 <;TextView
 android:id="@+id/tap"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginStart="8dp"
 android:layout_marginEnd="8dp"
 android:layout_marginBottom="8dp"
 android:text="Tap for info"
 android:textColor="#ffffff"
 android:textSize="15sp"
 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:background="#181818"
 android:gravity="center"
 android:paddingStart="8dp"
 android:paddingEnd="8dp"
 android:paddingBottom="8dp"
 android:text="@string/hampi_detail"
 android:textColor="#FFFF"
 android:textSize="22sp"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent" />;


<;/androidx.constraintlayout.widget.ConstraintLayout>;</pre>
<p id="9ff9" class="ia ib cn ar ic b id ie if ig ih ii ij ik il im in" data-selectable-paragraph="">As you can see, the layouts are exactly the same, the only difference is that in the first one (<span style="color: #008000;"><strong>hampi.xml</strong></span>) the elements are placed offscreen, while in the second one they are in the desired position.</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>

<h3><span style="color: #000080;"><strong>Creating Animation</strong></span></h3>
<p data-selectable-paragraph="">So, let’s build the animation and let’s see how is incredibly easy to make animations with ConstraintLayout and ConstraintSet.</p>
<p class="p1">First, we need to create a new instance of ConstraintSet, then we can clone the constraints of the second layout (<strong><span style="color: #008000;">hampi_detail.xml</span></strong>) by calling the <strong><span style="color: #0000ff;">clone()</span></strong> method.</p>
<pre>ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone(this, R.layout.hampi_detail);</pre>
<p><b><span style="color: #0000ff;">clone()</span> : </b>It 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>Let’s add some transition effects.</p>
<p class="p1">Now, let’s create the transition object used to set the interpolator and the duration of animation:</p>
<pre>ChangeBounds transition = new ChangeBounds();
transition.setInterpolator(new AnticipateOvershootInterpolator(1.0f));
transition.setDuration(1200);</pre>
<p class="p1"><span style="color: #0000ff;"><strong>ChangeBounds()</strong></span> captures the layout bounds of target views before and after the scene change and animates those changes during the transition.</p>
<p class="p1">Then we define the type of interpolator — which defines the rate of change of an animation. This allows the basic animation effects (alpha, scale, translate, rotate) to be accelerated, decelerated, repeated, etc. Here’s it’s <strong><span style="color: #008000;">AnticipateOverShootInterpolator</span></strong>.</p>
<p class="p1">And, last but not least, we need to call the <strong><span style="color: #008000;">TransitionManager.beginDelayedTransition()</span></strong> used to create a new scene and to run the transition on the next rendering frame. Lastly, we call <span style="color: #008000;"><strong>applyTo()</strong></span> to finally start the animation.</p>
<pre>TransitionManager.beginDelayedTransition(root, transition);

<span style="color: #008000;"><strong>//here root is the name of view to which we are applying the constraintSet</strong></span>
constraintSet.applyTo(root);</pre>
<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 <span style="color: #008000;"><strong><a style="color: #008000;" href="https://developer.android.com/reference/android/transition/AutoTransition.html"><span class="s1">AutoTransition</span></a></strong></span> 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 <span style="color: #008000;"><strong><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></strong> </span>with a value of null for the transition parameter.</p>
<p><span style="color: #0000ff;"><b>applyTo()</b></span> — sets or applies the new or requested constraints to the view specified.</p>
<p>Below you can see you have to write only these few lines of code to achieve this animation.</p>
<pre>private void showComponents() {

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

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

 TransitionManager.beginDelayedTransition(root, transition);

<strong><span style="color: #008000;"> //here root is the name of view to which we are applying the constraintSet</span></strong>
 constraintSet.applyTo(root);
}</pre>
<p>In our <span style="color: #008000;"><strong>MainActivity.Java</strong></span>, 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.androidconstraintdemo;

import android.os.Bundle;
import android.transition.ChangeBounds;
import android.transition.TransitionManager;
import android.view.View;
import android.view.animation.AnticipateOvershootInterpolator;
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 backgroundImage;
 boolean show = false;

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

 root = findViewById(R.id.root);
 backgroundImage = findViewById(R.id.backgroundImage);

 backgroundImage.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
 if (show)
<span style="color: #008000;"><strong> // if the animation is shown, we hide back the views</strong></span>
 hideComponents(); 
 else
<strong><span style="color: #008000;"> // if the animation is NOT shown, we animate the views</span></strong>
 showComponents();
 }
 });
 }


 private void showComponents() {

 show = true;
 ConstraintSet constraintSet = new ConstraintSet();
 constraintSet.clone(this, R.layout.hampi_detail);

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

 TransitionManager.beginDelayedTransition(root, transition);

<span style="color: #008000;"><strong> //here root is the name of view to which we are applying the constraintSet</strong></span>
 constraintSet.applyTo(root);
 }

 private void hideComponents() {
 show = false;

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

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

 TransitionManager.beginDelayedTransition(root, transition);

 constraintSet.applyTo(root);
 }


}</pre>
<p>I hope this article will help you in understanding another use-case of how to implement ConstraintLayout animations with transition effect in android applications.