Home | History | Annotate | Download | only in animation 
      1 page.title=Animating Layout Changes
      2 trainingnavtop=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,
     32 create a {@link android.animation.LayoutTransition} object and supply it to
     33 the layout with the {@link android.view.ViewGroup#setLayoutTransition setLayoutTransition()}
     34 method.
     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">&nbsp;</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
     53 run the sample app and select the Crossfade example. See the following files for the
     54 code 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 &lt;LinearLayout android:id="@+id/container"
     68     android:animateLayoutChanges="true"
     69     ...
     70 /&gt;
     71 </pre>
     72 
     73 <h2 id="activity">Add, Update, or Remove Items from the Layout</h2>
     74 <p>
     75 Now, all you need to do is add, remove, or update items in the layout
     76 and the items are animated automatically:
     77 </p>
     78 <pre>
     79 private ViewGroup mContainerView;
     80 ...
     81 private void addItem() {
     82     View newView;
     83     ...
     84     mContainerView.addView(newView, 0);
     85 }
     86 </pre>
     87