41. Animating User Interfaces with the Android Transitions Framework

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.

41.1 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. While 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 EditText, Button and TextView views positioned near the top of the screen. The second scene might remove the Button view and move the remaining EditText and TextView objects to the bottom of the screen to make room for the introduction of a MapView instance. Using the...

41.2 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 allow 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...

41.3 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:

<?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...

41.4 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:

Transition myChangeBounds = new ChangeBounds();

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

TransitionManager.go(scene2, myChangeBounds);

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:

TransitionSet myTransition = new TransitionSet();

myTransition...

41.5 Custom Transitions and TransitionSets in XML

While 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:

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

<changeBounds/>

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:

<changeBounds android:duration="5000" >

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

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

<transitionSet

  xmlns:android="http://schemas.android.com/apk/res/android" >

 

  <fade

    ...

41.6 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...

41.7 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:

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

<interpolatorElement xmlns:android="http://schemas.android.com/apk/res/android" android:attribute="value" />

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...

41.8 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:

myLayout = findViewById(R.id.myLayout);

TransitionManager.beginDelayedTransition(myLayout);

// Make changes to the scene here

If behavior other than the default animation behavior is required, simply pass a suitably configured Transition or TransitionSet instance through to the method call:

TransitionManager.beginDelayedTransition(myLayout, myTransition);

41.9 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.