View source for Animating User Interfaces in Android Studio using the Transitions Framework

<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Creating and Managing Overflow Menus in Android Studio|Previous]]<td align="center">[[Android Studio Development Essentials|Table of Contents]]<td width="20%" align="right">[[An Android Studio Transition Tutorial using beginDelayedTransition|Next]]</td>
<tr>
<td width="20%">Creating and Managing Overflow Menus in Android Studio<td align="center"><td width="20%" align="right">An Android Studio Transition Tutorial using beginDelayedTransition</td>
</table>
<hr>


<htmlet>androidstudio</htmlet>


The Android Transitions framework was introduced as part of the Android 4.4 KitKat release and is designed to make it easy for you, as an Android developer, to add animation effects to the views that make up the screens of your applications. As will be outlined in both this and subsequent chapters, animated effects such as making the views in a user interface gently fade in and out of sight and glide smoothly to new positions on the screen can be implemented with just a few simple lines of code when using the Transitions framework in Android Studio. 

== Introducing Android Transitions and Scenes ==

Transitions allow the changes made to the layout and appearance of the views in a user interface to be animated during application runtime. Whilst there are a number of different ways to implement Transitions from within application code, perhaps the most powerful mechanism involves the use of Scenes. A scene represents either the entire layout of a user interface screen, or a subset of the layout (represented by a ViewGroup).

To implement transitions using this approach, scenes are defined that reflect the two different user interface states (these can be thought of as the “before” and “after” scenes). One scene, for example, might consist of a TextEdit, Button and TextView positioned near the top of the screen. The second scene might remove the Button view and move the remaining TextEdit and TextView objects to the bottom of the screen to make room for the introduction of a MapView instance. Using the transition framework, the changes between these two scenes can be animated so that the Button fades from view, the TextEdit and TextView slide to the new locations and the map gently fades into view.

Scenes can be created in code from ViewGroups, or implemented in layout resource files that are loaded into Scene instances at application runtime.

Transitions can also be implemented dynamically from within application code. Using this approach, scenes are created by referencing collections of user interface views in the form of ViewGroups with transitions then being performed on those elements using the TransitionManager class, which provides a range of methods for triggering and managing the transitions between scenes.

Perhaps the simplest form of transition involves the use of the beginDelayedTransition() method of the TransitionManager class. When called and passed the ViewGroup representing a scene, any subsequent changes to any views within that scene (such as moving, resizing, adding or deleting views) will be animated by the Transition framework.

The actual animation is handled by the Transition framework via instances of the Transition class. Transition instances are responsible for detecting changes to the size, position and visibility of the views within a scene and animating those changes accordingly.

By default, transitions will be animated using a set of criteria defined by the AutoTransition class. Custom transitions can be created either via settings in XML transition files or directly within code. Multiple transitions can be combined together in a TransitionSet and configured to be performed either in parallel or sequentially. 

== Using Interpolators with Transitions ==

The Transitions framework makes extensive use of the Android Animation framework to implement animation effects. This fact is largely incidental when using transitions since most of this work happens behind the scenes, thereby shielding the developer from some of the complexities of the Animation framework. One area where some knowledge of the Animation framework is beneficial when using Transitions, however, involves the concept of interpolators.

Interpolators are a feature of the Android Animation framework that allows animations to be modified in a number of pre-defined ways. At present the Animation framework provides the following interpolators, all of which are available for use in customizing transitions:

* '''AccelerateDecelerateInterpolator''' – By default, animation is performed at a constant rate. The AccelerateDecelerateInterpolator can be used to cause the animation to begin slowly and then speed up in the middle before slowing down towards the end of the sequence.
* '''AccelerateInterpolator''' – As the name suggests, the AccelerateInterpolator begins the animation slowly and accelerates at a specified rate with no deceleration at the end.
* '''AnticipateInterpolator''' – The AnticipateInterpolator provides an effect similar to that of a sling shot. The animated view moves in the opposite direction to the configured animation for a short distance before being flung forward in the correct direction. The amount of backward force can be controlled through the specification of a tension value.
* '''AnticipateOvershootInterpolator''' – Combines the effect provided by the AnticipateInterpolator with the animated object overshooting and then returning to the destination position on the screen.
* '''BounceInterpolator''' – Causes the animated view to bounce on arrival at its destination position.
* '''CycleInterpolator''' – Configures the animation to be repeated a specified number of times.
* '''DecelerateInterpolator''' – The DecelerateInterpolator causes the animation to begin quickly and then decelerate by a specified factor as it nears the end.
* '''LinearInterpolator''' – Used to specify that the animation is to be performed at a constant rate.
* '''OvershootInterpolator''' – Causes the animated view to overshoot the specified destination position before returning. The overshoot can be configured by specifying a tension value.
As will be demonstrated in this and later chapters, interpolators can be specified both in code and XML files.

== Working with Scene Transitions ==

Scenes can be represented by the content of an Android Studio XML layout file. The following XML, for example, could be used to represent a scene consisting of three button views within a RelativeLayout parent:

<pre>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:onClick="goToScene2"
        android:text="@string/one_string" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:onClick="goToScene1"
        android:text="@string/two_string" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/three_string" />

</RelativeLayout>
</pre>

Assuming that the above layout resides in a file named scene1_layout.xml located in the res/layout folder of the project, the layout can be loaded into a scene using the getSceneForLayout() method of the Scene class. For example:

<pre>
Scene scene1 = Scene.getSceneForLayout(rootContainer, 
                R.layout.scene1_layout, this);
</pre>

Note that the method call requires a reference to the root container. This is the view at the top of the view hierarchy in which the scene is to be displayed.

To display a scene to the user without any transition animation, the enter() method is called on the scene instance:

<pre>
scene1.enter();
</pre>

Transitions between two scenes using the default AutoTransition class can be triggered using the go() method of the TransitionManager class:

<pre>
TransitionManager.go(scene2);
</pre>

Scene instances can be created easily in code by bundling the view elements into one or more ViewGroups and then creating a scene from those groups. For example:

<pre>
Scene scene1 = Scene(viewGroup1);
Scene scene2 = Scene(viewGroup2, viewGroup3);
</pre>

== Custom Transitions and TransitionSets in Code ==

The examples outlined so far in this chapter have used the default transition settings in which resizing, fading and motion are animated using pre-configured behavior. These can be modified by creating custom transitions which are then referenced during the transition process. Animations are categorized as either change bounds (relating to changes in the position and size of a view) and fade (relating to the visibility or otherwise of a view).

A single Transition can be created as follows:

<pre>
Transition myChangeBounds = new ChangeBounds();
</pre>

This new transition can then be used when performing a transition:

<pre>
TransitionManager.go(scene2, myChangeBounds);
</pre>

Multiple transitions may be bundled together into a TransitionSet instance. The following code, for example, creates a new TransitionSet object consisting of both change bounds and fade transition effects:

<pre>
TransitionSet myTransition = new TransitionSet();
myTransition.addTransition(new ChangeBounds());
myTransition.addTransition(new Fade());
</pre>

Transitions can be configured to target specific views (referenced by view ID). For example, the following code will configure the previous fade transition to target only the view with an ID that matches myButton1:

<pre>
TransitionSet myTransition = new TransitionSet();
myTransition.addTransition(new ChangeBounds());
Transition fade = new Fade();
fade.addTarget(R.id.myButton1);
myTransition.addTransition(fade);
</pre>

Additional aspects of the transition may also be customized, such as the duration of the animation. The following code specifies the duration over which the animation is to be performed:

<pre>
Transition changeBounds = new ChangeBounds();
changeBounds.setDuration(2000);
</pre>

As with Transition instances, once a TransitionSet instance has been created, it can be used in a transition via the TransitionManager class. For example:

<pre>
TransitionManager.go(scene1, myTransition);
</pre>

== Custom Transitions and TransitionSets in XML ==

Whilst custom transitions can be implemented in code, it is often easier to do so via XML transition files using the <fade> and <changeBounds> tags together with some additional options. The following XML includes a single changeBounds transition:

<pre>
<?xml version="1.0" encoding="utf-8"?>
<changeBounds/>
</pre>

As with the code based approach to working with transitions, each transition entry in a resource file may be customized. The XML below, for example, configures a duration for a change bounds transition:

<pre>
<changeBounds android:duration="5000" >
</pre>

Multiple transitions may be bundled together using the <transitionSet> element:

<pre>
<?xml version="1.0" encoding="utf-8"?>
<transitionSet 
  xmlns:android="http://schemas.android.com/apk/res/android" >

  <fade
    android:duration="2000"
    android:fadingMode="fade_out" />
 
  <changeBounds 
    android:duration="5000" >
     
    <targets>
      <target android:targetId="@id/button2" />
    </targets>
      
  </changeBounds>
  
  <fade
    android:duration="2000"
    android:fadingMode="fade_in" />
</transitionSet>
</pre>
<htmlet>androidstudio</htmlet>
Transitions contained within an XML resource file should be stored in the res/transition folder of the project in which they are being used and must be inflated before being referenced in the code of an application. The following code, for example, inflates the transition resources contained within a file named transition.xml and assigns the results to a reference named myTransition:

<pre>
Transition myTransition = TransitionInflater.from(this)
    .inflateTransition(R.transition.transition);
</pre>

Once inflated, the new transition can be referenced in the usual way:

<pre>
TransitionManager.go(scene1, myTransition);
</pre>

By default, transition effects within a TransitionSet are performed in parallel. To instruct the Transition framework to perform the animations sequentially, add the appropriate android:transitionOrdering property to the transitionSet element of the resource file:

<pre>
<?xml version="1.0" encoding="utf-8"?>

<transitionSet 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:transitionOrdering="sequential">

    <fade
      android:duration="2000"
      android:fadingMode="fade_out" />
 
    <changeBounds 
      android:duration="5000" >
  </changeBounds>
</transitionSet>
</pre>

Change the value from “sequential” to “together” to indicate that the animation sequences are to be performed in parallel.

== Working with Interpolators ==

As previously discussed, interpolators can be used to modify the behavior of a transition in a variety of ways and may be specified either in code or via the settings within a transition XML resource file. 

When working in code, new interpolator instances can be created by calling the constructor method of the required interpolator class and, where appropriate, passing through values to further modify the interpolator behavior:

* AccelerateDecelerateInterpolator()
* AccelerateInterpolator(float factor)
* AnticipateInterpolator(float tension)
* AnticipateOvershootInterpolator(float tension)
* BounceInterpolator()
* CycleInterpolator(float cycles)
* DecelerateInterpolator(float factor)
* LinearInterpolator()
* OvershootInterpolator(float tension)

Once created, an interpolator instance can be attached to a transition using the setInterpolator() method of the Transition class. The following code, for example, adds a bounce interpolator to a change bounds transition:

<pre>
Transition changeBounds = new ChangeBounds();
changeBounds.setInterpolator(new BounceInterpolator());
</pre>

Similarly, the following code adds an accelerate interpolator to the same transition, specifying an acceleration factor of 1.2:

<pre>
changeBounds.setInterpolator(new AccelerateInterpolator(1.2f));
</pre>

In the case of XML based transition resources, a default interpolator is declared using the following syntax:

<pre>
android:interpolator="@android:anim/<interpolator_element>"
</pre>

In the above syntax, <interpolator_element> must be replaced by the resource ID of the corresponding interpolator selected from the following list:

* accelerate_decelerate_interpolator
* accelerate_interpolator
* anticipate_interpolator
* anticipate_overshoot_interpolator
* bounce_interpolator
* cycle_interpolator
* decelerate_interpolator
* linear_interpolator
* overshoot_interpolator

The following XML fragment, for example, adds a bounce interpolator to a change bounds transition contained within a transition set:

<pre>
<?xml version="1.0" encoding="utf-8"?>
<transitionSet 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:transitionOrdering="sequential">

  <changeBounds
    android:interpolator="@android:anim/bounce_interpolator"
    android:duration="2000" />

  <fade
    android:duration="1000"
    android:fadingMode="fade_in" />
</transitionSet>
</pre>

This approach to adding interpolators to transitions within XML resources works well when the default behavior of the interpolator is required. The task becomes a little more complex when the default behavior of an interpolator needs to be changed. Take, for the sake of an example, the cycle interpolator. The purpose of this interpolator is to make an animation or transition repeat a specified number of times. In the absence of a cycles attribute setting, the cycle interpolator will perform only one cycle. Unfortunately there is no way to directly specify the number of cycles (or any other interpolator attribute for that matter) when adding an interpolator using the above technique. Instead, a custom interpolator must be created and then referenced within the transition file.

== Creating a Custom Interpolator ==

A custom interpolator must be declared in a separate XML file and stored within the res/anim folder of the project. The name of the XML file will be used by the Android system as the resource ID for the custom interpolator. 

Within the custom interpolator XML resource file, the syntax should read as follows:

<pre>
<?xml version="1.0" encoding="utf-8"?>
<interpolatorElement xmlns:android="http://schemas.android.com/apk/res/android" android:attribute="value" />
</pre>
<htmlet>adsdaqbox_flow</htmlet>
In the above syntax, interpolatorElement must be replaced with the element name of the required interpolator selected from the following list:

* accelerateDecelerateInterpolator
* accelerateInterpolator
* anticipateInterpolator
* anticipateOvershootInterpolator
* bounceInterpolator
* cycleInterpolator
* decelerateInterpolator
* linearInterpolator
* overshootInterpolator

The attribute keyword is replaced by the name attribute of the interpolator for which the value is to be changed (for example tension to change the tension attribute of an overshoot interpolator). Finally, value represents the value to be assigned to the specified attribute. The following XML, for example, contains a custom cycle interpolator configured to cycle 7 times:

<pre>
<?xml version="1.0" encoding="utf-8"?>
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:cycles="7" />
</pre>

Assuming that the above XML was stored in a resource file named my_cycle.xml stored in the res/anim project folder, the custom interpolator could be added to a transition resource file using the following XML syntax:

<pre>
<changeBounds 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:duration="5000"
  android:interpolator="@anim/my_cycle" >
</pre>

== Using the beginDelayedTransition Method ==

Perhaps the simplest form of Transition based user interface animation involves the use of the beginDelayedTransition() method of the TransitionManager class. This method is passed a reference to the root view of the viewgroup representing the scene for which animation is required. Subsequent changes to the views within that sub view will then be animated using the default transition settings:

<pre>
myLayout = (ViewGroup) findViewById(R.id.myLayout);
TransitionManager.beginDelayedTransition(myLayout);
// Make changes to the scene
</pre>
If behavior other than the default animation behavior is required, simply pass a suitably configured Transition or TransitionSet instance through to the method call:

<pre>
TransitionManager.beginDelayedTransition(myLayout, myTransition);
</pre>

== Summary ==

The Android 4.4 KitKat SDK release introduced the Transition Framework, the purpose of which is to simplify the task of adding animation to the views that make up the user interface of an Android application. With some simple configuration and a few lines of code, animation effects such as movement, visibility and resizing of views can be animated by making use of the Transition framework. A number of different approaches to implementing transitions are available involving a combination of Java code and XML resource files. The animation effects of transitions may also be enhanced through the use of a range of interpolators. 

Having covered some of the theory of Transitions in Android, the next two chapters will put this theory into practice by working through some example Android Studio based transition implementations.


<htmlet>androidstudio</htmlet>



<htmlet>ezoicbottom</htmlet>
<hr>
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Creating and Managing Overflow Menus in Android Studio|Previous]]<td align="center">[[Android Studio Development Essentials|Table of Contents]]<td width="20%" align="right">[[An Android Studio Transition Tutorial using beginDelayedTransition|Next]]</td>
<tr>
<td width="20%">Creating and Managing Overflow Menus in Android Studio<td align="center"><td width="20%" align="right">An Android Studio Transition Tutorial using beginDelayedTransition</td>
</table>