1page.title=Crossfading Two Views
2trainingnavtop=true
3
4
5@jd:body
6
7    <div id="tb-wrapper">
8      <div id="tb">
9        <h2>
10          This lesson teaches you to:
11        </h2>
12        <ol>
13          <li>
14            <a href="#views">Create the Views</a>
15          </li>
16          <li>
17            <a href="#setup">Set up the Animation</a>
18          </li>
19          <li>
20            <a href="#animate">Crossfade the Views</a>
21          </li>
22        </ol>
23        <h2>
24          Try it out
25        </h2>
26        <div class="download-box">
27          <a href="{@docRoot}shareables/training/Animations.zip" class=
28          "button">Download the sample app</a>
29          <p class="filename">
30            Animations.zip
31          </p>
32        </div>
33    </div>
34    </div>
35
36    <p>
37      Crossfade animations (also know as dissolve) gradually fade out one UI component while simultaneously fading in
38      another. This animation is useful for situations where you want to switch content or views
39      in your app. Crossfades are very subtle and short but offer a fluid transition from one screen to the
40      next. When you don't use them, however, transitions often feel abrupt or hurried.
41    </p>
42    <p>Here's an example of a crossfade from a progress indicator to some text content.
43    </p>
44
45<div class="framed-galaxynexus-land-span-8">
46  <video class="play-on-hover" autoplay>
47    <source src="anim_crossfade.mp4" type="video/mp4">
48    <source src="anim_crossfade.webm" type="video/webm">
49    <source src="anim_crossfade.ogv" type="video/ogg">
50  </video>
51</div>
52<div class="figure-caption">
53Crossfade animation
54  <div class="video-instructions">&nbsp;</div>
55</div>
56
57    <p>
58      If you want to jump ahead and see a full working example,
59      <a href="{@docRoot}shareables/training/Animations.zip">download</a>
60      and run the sample app and select the Crossfade example.
61      See the following files for the code implementation:
62    </p>
63    <ul>
64      <li>
65        <code>src/CrossfadeActivity.java</code>
66      </li>
67      <li>
68        <code>layout/activity_crossfade.xml</code>
69      </li>
70      <li>
71        <code>menu/activity_crossfade.xml</code>
72      </li>
73    </ul>
74    <h2 id="views">
75      Create the Views
76    </h2>
77    <p>
78      Create the two views that you want to crossfade. The following example creates a progress
79      indicator and a scrollable text view:
80    </p>
81    <pre>
82&lt;FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
83    android:layout_width="match_parent"
84    android:layout_height="match_parent"&gt;
85
86    &lt;ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
87        android:id="@+id/content"
88        android:layout_width="match_parent"
89        android:layout_height="match_parent"&gt;
90
91        &lt;TextView style="?android:textAppearanceMedium"
92            android:lineSpacingMultiplier="1.2"
93            android:layout_width="match_parent"
94            android:layout_height="wrap_content"
95            android:text="@string/lorem_ipsum"
96            android:padding="16dp" /&gt;
97
98    &lt;/ScrollView&gt;
99
100    &lt;ProgressBar android:id="@+id/loading_spinner"
101        style="?android:progressBarStyleLarge"
102        android:layout_width="wrap_content"
103        android:layout_height="wrap_content"
104        android:layout_gravity="center" /&gt;
105
106&lt;/FrameLayout&gt;
107</pre>
108    <h2 id="setup">
109      Set up the Animation
110    </h2>
111    <p>
112      To set up the animation:
113    </p>
114    <ol>
115      <li>Create member variables for the views that you want to crossfade. You need
116      these references later when modifying the views during the animation.
117      </li>
118      <li>For the view that is being faded in, set its visibility to {@link
119      android.view.View#GONE}. This prevents the view from taking up layout space and omits it
120      from layout calculations, speeding up processing.
121      </li>
122      <li>Cache the <code>{@link android.R.integer#config_shortAnimTime}</code>
123      system property in a member variable. This property defines a standard
124      "short" duration for the animation. This duration is ideal for subtle animations or
125      animations that occur very frequently. {@link android.R.integer#config_longAnimTime} and
126      {@link android.R.integer#config_mediumAnimTime} are also available if you wish to use them.
127      </li>
128    </ol>
129    <p>
130      Here's an example using the layout from the previous code snippet as the activity content
131      view:
132    </p>
133    <pre>
134public class CrossfadeActivity extends Activity {
135
136    private View mContentView;
137    private View mLoadingView;
138    private int mShortAnimationDuration;
139
140    ...
141
142    &#64;Override
143    protected void onCreate(Bundle savedInstanceState) {
144        super.onCreate(savedInstanceState);
145        setContentView(R.layout.activity_crossfade);
146
147        mContentView = findViewById(R.id.content);
148        mLoadingView = findViewById(R.id.loading_spinner);
149
150        // Initially hide the content view.
151        mContentView.setVisibility(View.GONE);
152
153        // Retrieve and cache the system's default "short" animation time.
154        mShortAnimationDuration = getResources().getInteger(
155                android.R.integer.config_shortAnimTime);
156    }
157
158</pre>
159    <h2 id="animate">
160      Crossfade the Views
161    </h2>
162    <p>
163      Now that the views are properly set up, crossfade them by doing the following:
164    </p>
165    <ol>
166      <li>For the view that is fading in, set the alpha value to <code>0</code> and the visibility
167      to {@link android.view.View#VISIBLE}. (Remember that it was initially set to {@link
168      android.view.View#GONE}.) This makes the view visible but completely transparent.
169      </li>
170      <li>For the view that is fading in, animate its alpha value from <code>0</code> to
171      <code>1</code>. At the same time, for the view that is fading out, animate the alpha value
172      from <code>1</code> to <code>0</code>.
173      </li>
174      <li>Using {@link android.animation.Animator.AnimatorListener#onAnimationEnd onAnimationEnd()}
175      in an {@link android.animation.Animator.AnimatorListener}, set the visibility of the view
176      that was fading out to {@link android.view.View#GONE}. Even though the alpha value is <code>0</code>,
177      setting the view's visibility to {@link android.view.View#GONE} prevents the view from taking
178      up layout space and omits it from layout calculations, speeding up processing.
179      </li>
180    </ol>
181    <p>
182      The following method shows an example of how to do this:
183    </p>
184    <pre>
185private View mContentView;
186private View mLoadingView;
187private int mShortAnimationDuration;
188
189...
190
191private void crossfade() {
192
193    // Set the content view to 0% opacity but visible, so that it is visible
194    // (but fully transparent) during the animation.
195    mContentView.setAlpha(0f);
196    mContentView.setVisibility(View.VISIBLE);
197
198    // Animate the content view to 100% opacity, and clear any animation
199    // listener set on the view.
200    mContentView.animate()
201            .alpha(1f)
202            .setDuration(mShortAnimationDuration)
203            .setListener(null);
204
205    // Animate the loading view to 0% opacity. After the animation ends,
206    // set its visibility to GONE as an optimization step (it won't
207    // participate in layout passes, etc.)
208    mLoadingView.animate()
209            .alpha(0f)
210            .setDuration(mShortAnimationDuration)
211            .setListener(new AnimatorListenerAdapter() {
212                &#64;Override
213                public void onAnimationEnd(Animator animation) {
214                    mLoadingView.setVisibility(View.GONE);
215                }
216            });
217}
218</pre>