1page.title=Animating Layout Changes 2trainingnavtop=true 3 4@jd:body 5 6<div id="tb-wrapper"> 7<div id="tb"> 8 9<h2>This lesson teaches you to:</h2> 10 <ol> 11 <li><a href="#views">Create the Layout</a></li> 12 <li><a href="#add">Add, Update, or Remove Items from the Layout</a></li> 13 </ol> 14 <h2> 15 Try it out 16 </h2> 17 <div class="download-box"> 18 <a href="{@docRoot}shareables/training/Animations.zip" class= 19 "button">Download the sample app</a> 20 <p class="filename"> 21 Animations.zip 22 </p> 23 </div> 24</div> 25</div> 26 27 <p>A layout animation is a pre-loaded animation that the system runs each time you make a change 28 to the layout configuration. All you need to do is set an attribute in the layout to tell the 29 Android system to animate these layout changes, and system-default animations are carried out for you. 30 </p> 31<p class="note"><strong>Tip</strong>: If you want to supply custom layout animations, 32create a {@link android.animation.LayoutTransition} object and supply it to 33the layout with the {@link android.view.ViewGroup#setLayoutTransition setLayoutTransition()} 34method. 35</p> 36 Here's what a default layout animation looks like when adding items to a list: 37</p> 38 39 <div class="framed-galaxynexus-land-span-8"> 40 <video class="play-on-hover" autoplay> 41 <source src="anim_layout_changes.mp4" type="video/mp4"> 42 <source src="anim_layout_changes.webm" type="video/webm"> 43 <source src="anim_layout_changes.ogv" type="video/ogg"> 44 </video> 45 </div> 46 <div class="figure-caption"> 47 Layout animation 48 <div class="video-instructions"> </div> 49 </div> 50 51<p>If you want to jump ahead and see a full working example, 52<a href="{@docRoot}shareables/training/Animations.zip">download</a> and 53run the sample app and select the Crossfade example. See the following files for the 54code implementation:</p> 55<ol> 56 <li><code>src/LayoutChangesActivity.java</code></li> 57 <li><code>layout/activity_layout_changes.xml</code></li> 58 <li><code>menu/activity_layout_changes.xml</code></li> 59</ol> 60 61<h2 id="views">Create the Layout</h2> 62<p>In your activity's layout XML file, set the <code>android:animateLayoutChanges</code> 63 attribute to <code>true</code> for the layout that you want to enable animations for. 64 For instance:</p> 65 66<pre> 67<LinearLayout android:id="@+id/container" 68 android:animateLayoutChanges="true" 69 ... 70/> 71</pre> 72 73<h2 id="activity">Add, Update, or Remove Items from the Layout</h2> 74<p> 75Now, all you need to do is add, remove, or update items in the layout 76and the items are animated automatically: 77</p> 78<pre> 79private ViewGroup mContainerView; 80... 81private void addItem() { 82 View newView; 83 ... 84 mContainerView.addView(newView, 0); 85} 86</pre> 87