1 page.title=Applying a Transition 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>This lesson teaches you to</h2> 8 <ol> 9 <li><a href="#Create">Create a Transition</a></li> 10 <li><a href="#Apply">Apply a Transition</a></li> 11 <li><a href="#Targets">Choose Specific Target Views</a></li> 12 <li><a href="#Multiple">Specify Multiple Transitions</a></li> 13 <li><a href="#NoScenes">Apply a Transition Without Scenes</a></li> 14 <li><a href="#Callbacks">Define Transition Lifecycle Callbacks</a></li> 15 </ol> 16 </div> 17 </div> 18 19 <p>In the transitions framework, animations create a series of frames that depict a change 20 between the view hierarchies in the starting and ending scenes. The framework represents 21 these animations as transition objects, which contain information about an animation. To 22 run an animation, you provide the transition to use and the ending scene to a transition 23 manager.</p> 24 25 <p>This lesson teaches you run an animation between two scenes using built-in transitions 26 to move, resize, and fade views. The next lesson shows you how to define custom transitions.</p> 27 28 29 30 <h2 id="Create">Create a Transition</h2> 31 32 <p>In the previous lesson, you learned how to create scenes that represent the state of 33 different view hierarchies. Once you have defined the starting scene and the ending scene you 34 want to change between, you need to create a {@link android.transition.Transition} object 35 that defines an animation. The framework enables you to specify a built-in transition in a 36 resource file and inflate it in your code or to create an instance of a built-in transition 37 directly in your code.</p> 38 39 <!-- Built in transition table --> 40 <p class="table-caption" id="table1"><strong>Table 1.</strong> Built-in transition types.</p> 41 <table> 42 <tr> 43 <th scope="col">Class</th> 44 <th scope="col">Tag</th> 45 <th scope="col">Attributes</th> 46 <th scope="col">Effect</th> 47 </tr> 48 <tr> 49 <td><code><a href="/reference/android/transition/AutoTransition.html">AutoTransition</a></code></td> 50 <td><autoTransition/></td> 51 <td style="text-align=center;"> - </td> 52 <td>Default transition. Fade out, move and resize, and fade in views, in that order.</td> 53 </tr> 54 <tr> 55 <td><code><a href="/reference/android/transition/Fade.html">Fade</a></code></td> 56 <td><fade/></td> 57 <td><code>android:fadingMode="[fade_in |<br> fade_out |<br> fade_in_out]"</code></td> 58 <td> 59 <code>fade_in</code> fades in views<br> 60 <code>fade_out</code> fades out views<br> 61 <code>fade_in_out</code> (default) does a <code>fade_out</code> followed by a <code>fade_in</code>. 62 </td> 63 </tr> 64 <tr> 65 <td><code><a href="/reference/android/transition/ChangeBounds.html">ChangeBounds</a></code></td> 66 <td><changeBounds/></td> 67 <td style="text-align=center;"> - </td> 68 <td>Moves and resizes views.</td> 69 </tr> 70 </table> 71 72 73 <h3 id="FromFile">Create a transition instance from a resource file</h3> 74 75 <p>This technique enables you to modify your transition definition without having to change 76 the code of your activity. This technique is also useful to separate complex transition 77 definitions from your application code, as shown in <a href="#Multiple">Specify Multiple 78 Transitions</a>.</p> 79 80 <p>To specify a built-in transition in a resource file, follow these steps:</p> 81 82 <ol> 83 <li>Add the <code>res/transition/</code> directory to your project.</li> 84 <li>Create a new XML resource file inside this directory.</li> 85 <li>Add an XML node for one of the built-in transitions.</li> 86 </ol> 87 88 <p>For example, the following resource file specifies the {@link android.transition.Fade} 89 transition:</p> 90 91 <p class="code-caption">res/transition/fade_transition.xml</p> 92 93 <pre> 94 <fade xmlns:android="http://schemas.android.com/apk/res/android" /> 95 </pre> 96 97 <p>The following code snippet shows how to inflate a {@link android.transition.Transition} 98 instance inside your activity from a resource file:</p> 99 100 <pre> 101 Transition mFadeTransition = 102 TransitionInflater.from(this). 103 inflateTransition(R.transition.fade_transition); 104 </pre> 105 106 107 <h3 id="FromCode">Create a transition instance in your code</h3> 108 109 <p>This technique is useful for creating transition objects dynamically if you modify the user 110 interface in your code, and to create simple built-in transition instances with few or 111 no parameters.</p> 112 113 <p>To create an instance of a built-in transition, invoke one of the public constructors in 114 the subclasses of the {@link android.transition.Transition} class. For example, the following 115 code snippet creates an instance of the {@link android.transition.Fade} transition:</p> 116 117 <pre> 118 Transition mFadeTransition = new Fade(); 119 </pre> 120 121 122 123 <h2 id="Apply">Apply a Transition</h2> 124 125 <p>You typically apply a transition to change between different view hierarchies in response 126 to an event, such as a user action. For example, consider a search app: when the user enters 127 a search term and clicks the search button, the app changes to the scene that represents the 128 results layout while applying a transition that fades out the search button and fades in the 129 search results.</p> 130 131 <p>To make a scene change while applying a transition in response to some event in your 132 activity, call the {@link android.transition.TransitionManager#go TransitionManager.go()} 133 static method with the ending scene and the transition instance to use for the animation, 134 as shown in the following snippet:</p> 135 136 <pre> 137 TransitionManager.go(mEndingScene, mFadeTransition); 138 </pre> 139 140 <p>The framework changes the view hierarchy inside the scene root with the view hierarchy 141 from the ending scene while running the animation specified by the transition instance. The 142 starting scene is the ending scene from the last transition. If there was no previous 143 transition, the starting scene is determined automatically from the current state of the 144 user interface.</p> 145 146 <p>If you do not specify a transition instance, the transition manager can apply an automatic 147 transition that does something reasonable for most situations. For more information, see the 148 API reference for the {@link android.transition.TransitionManager} class.</p> 149 150 151 152 <h2 id="Targets">Choose Specific Target Views</h2> 153 154 <p>The framework applies transitions to all views in the starting and ending scenes by 155 default. In some cases, you may only want to apply an animation to a subset of views in a 156 scene. For example, the framework does not support animating changes to 157 {@link android.widget.ListView} objects, so you should not try to animate them during a 158 transition. The framework enables you to select specific views you want to animate.</p> 159 160 <p>Each view that the transition animates is called a <em>target</em>. You can only 161 select targets that are part of the view hierarchy associated with a scene.</p> 162 163 <p>To remove one or more views from the list of targets, call the {@link 164 android.transition.Transition#removeTarget removeTarget()} method before starting 165 the transition. To add only the views you specify to the list of targets, call the 166 {@link android.transition.Transition#addTarget addTarget()} method. For more 167 information, see the API reference for the {@link android.transition.Transition} class.</p> 168 169 170 171 <h2 id="Multiple">Specify Multiple Transitions</h2> 172 173 <p>To get the most impact from an animation, you should match it to the type of changes 174 that occur between the scenes. For example, if you are removing some views and adding others 175 between scenes, a fade out/fade in animation provides a noticeable indication that some views 176 are no longer available. If you are moving views to different points on the screen, a better 177 choice would be to animate the movement so that users notice the new location of the views.</p> 178 179 <p>You do not have to choose only one animation, since the transitions framework enables you 180 to combine animation effects in a transition set that contains a group of individual built-in 181 or custom transitions.</p> 182 183 <p>To define a transition set from a collection of transitions in XML, create a resource file 184 in the <code>res/transitions/</code> directory and list the transitions under the 185 <code>transitionSet</code> element. For example, the following snippet shows how to specify a 186 transition set that has the same behaviour as the {@link android.transition.AutoTransition} 187 class:</p> 188 189 <pre> 190 <transitionSet xmlns:android="http://schemas.android.com/apk/res/android" 191 android:transitionOrdering="sequential"> 192 <fade android:fadingMode="fade_out" /> 193 <changeBounds /> 194 <fade android:fadingMode="fade_in" /> 195 </transitionSet> 196 </pre> 197 198 <p>To inflate the transition set into a {@link android.transition.TransitionSet} object in 199 your code, call the {@link android.transition.TransitionInflater#from TransitionInflater.from()} 200 method in your activity. The {@link android.transition.TransitionSet} class extends from the 201 {@link android.transition.Transition} class, so you can use it with a transition manager just 202 like any other {@link android.transition.Transition} instance.</p> 203 204 205 206 <h2 id="NoScenes">Apply a Transition Without Scenes</h2> 207 208 <p>Changing view hierarchies is not the only way to modify your user interface. You can also 209 make changes by adding, modifying, and removing child views within the current hierarchy. For 210 example, you can implement a search interaction with just a single layout. Start with the 211 layout showing a search entry field and a search icon. To change the user interface to show 212 the results, remove the search button when the user clicks it by calling the {@link 213 android.view.ViewGroup#removeView ViewGroup.removeView()} method, and add the search results by 214 calling {@link android.view.ViewGroup#addView ViewGroup.addView()} method.</p> 215 216 <p>You may want to use this approach if the alternative is to have two hierarchies that are 217 nearly identical. Rather than having to create and maintain two separate layout files for a 218 minor difference in the user interface, you can have one layout file containing a view 219 hierarchy that you modify in code.</p> 220 221 <p>If you make changes within the current view hierarchy in this fashion, you do not need to 222 create a scene. Instead, you can create and apply a transition between two states of a view 223 hierarchy using a <em>delayed transition</em>. This feature of the transitions framework 224 starts with the current view hierarchy state, records changes you make to its views, and applies 225 a transition that animates the changes when the system redraws the user interface.</p> 226 227 <p>To create a delayed transition within a single view hierarchy, follow these steps:</p> 228 229 <ol> 230 <li>When the event that triggers the transition occurs, call the {@link 231 android.transition.TransitionManager#beginDelayedTransition 232 TransitionManager.beginDelayedTransition()} method providing the parent view of all the views 233 you want to change and the transition to use. The framework stores the current state of the 234 child views and their property values.</li> 235 <li>Make changes to the child views as required by your use case. The framework records 236 the changes you make to the child views and their properties.</li> 237 <li>When the system redraws the user interface according to your changes, the framework 238 animates the changes between the original state and the new state.</li> 239 </ol> 240 241 <p>The following example shows how to animate the addition of a text view to a view hierarchy 242 using a delayed transition. The first snippet shows the layout definition file:</p> 243 244 <p class="code-caption">res/layout/activity_main.xml</p> 245 246 <pre> 247 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 248 android:id="@+id/mainLayout" 249 android:layout_width="match_parent" 250 android:layout_height="match_parent" > 251 <EditText 252 android:id="@+id/inputText" 253 android:layout_alignParentLeft="true" 254 android:layout_alignParentTop="true" 255 android:layout_width="match_parent" 256 android:layout_height="wrap_content" /> 257 ... 258 </RelativeLayout> 259 </pre> 260 261 <p>The next snippet shows the code that animates the addition of the text view:</p> 262 263 <p class="code-caption">MainActivity.java</p> 264 265 <pre> 266 private TextView mLabelText; 267 private Fade mFade; 268 private ViewGroup mRootView; 269 ... 270 271 // Load the layout 272 this.setContentView(R.layout.activity_main); 273 ... 274 275 // Create a new TextView and set some View properties 276 mLabelText = new TextView(); 277 mLabelText.setText("Label").setId("1"); 278 279 // Get the root view and create a transition 280 mRootView = (ViewGroup) findViewById(R.id.mainLayout); 281 mFade = new Fade(IN); 282 283 // Start recording changes to the view hierarchy 284 TransitionManager.beginDelayedTransition(mRootView, mFade); 285 286 // Add the new TextView to the view hierarchy 287 mRootView.addView(mLabelText); 288 289 // When the system redraws the screen to show this update, 290 // the framework will animate the addition as a fade in 291 </pre> 292 293 294 295 <h2 id="Callbacks">Define Transition Lifecycle Callbacks</h2> 296 297 <p>The transition lifecycle is similar to the activity lifecycle. It represents the transition 298 states that the framework monitors during the time between a call to the {@link 299 android.transition.TransitionManager#go TransitionManager.go()} method and the completion of 300 the animation. At important lifecycle states, the framework invokes callbacks defined by 301 the {@link android.transition.Transition.TransitionListener TransitionListener} 302 interface.</p> 303 304 <p>Transition lifecycle callbacks are useful, for example, for copying a view property value 305 from the starting view hierarchy to the ending view hierarchy during a scene change. You 306 cannot simply copy the value from its starting view to the view in the ending view hierarchy, 307 because the ending view hierarchy is not inflated until the transition is completed. 308 Instead, you need to store the value in a variable and then copy it into the ending view 309 hierarchy when the framework has finished the transition. To get notified when the transition 310 is completed, you can implement the {@link 311 android.transition.Transition.TransitionListener#onTransitionEnd 312 TransitionListener.onTransitionEnd()} method in your activity.</p> 313 314 <p>For more information, see the API reference for the {@link 315 android.transition.Transition.TransitionListener TransitionListener} class.</p> 316
