1 page.title= 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2></h2> 8 <ol> 9 <li><a href="#Touch"></a></li> 10 <li><a href="#Reveal"></a></li> 11 <li><a href="#Transitions"></a></li> 12 <li><a href="#ViewState"></a></li> 13 <li><a href="#AnimVector"></a></li> 14 </ol> 15 <h2></h2> 16 <ul> 17 <li><a href="http://www.google.com/design/spec"></a></li> 18 <li><a href="{@docRoot}design/material/index.html">Android </a></li> 19 </ul> 20 </div> 21 </div> 22 23 24 <p> 25 Android 5.0 (API 21) 26 27 </p> 28 29 <ul> 30 <li></li> 31 <li></li> 32 <li></li> 33 <li></li> 34 <li></li> 35 </ul> 36 37 38 <h2 id="Touch"></h2> 39 40 <p> UI 41 {@link android.graphics.drawable.RippleDrawable} 42 43 </p> 44 45 <p> XML 46 </p> 47 48 <ul> 49 <li> <code>?android:attr/selectableItemBackground</code></li> 50 <li> <code>?android:attr/selectableItemBackgroundBorderless</code> 51 52 </li> 53 </ul> 54 55 <p class="note"><strong></strong><code>selectableItemBackgroundBorderless</code> API 21 56 </p> 57 58 59 <p> <code>ripple</code> {@link android.graphics.drawable.RippleDrawable} XML 60 </p> 61 62 <p> {@link android.graphics.drawable.RippleDrawable} <code>android:colorControlHighlight</code> 63 64 </p> 65 66 <p> {@link 67 android.graphics.drawable.RippleDrawable} API </p> 68 69 70 <h2 id="Reveal"></h2> 71 72 <p> UI 73 {@link android.view.ViewAnimationUtils#createCircularReveal 74 ViewAnimationUtils.createCircularReveal()} 75 </p> 76 77 <p></p> 78 79 <pre> 80 // previously invisible view 81 View myView = findViewById(R.id.my_view); 82 83 // get the center for the clipping circle 84 int cx = (myView.getLeft() + myView.getRight()) / 2; 85 int cy = (myView.getTop() + myView.getBottom()) / 2; 86 87 // get the final radius for the clipping circle 88 int finalRadius = Math.max(myView.getWidth(), myView.getHeight()); 89 90 // create the animator for this view (the start radius is zero) 91 Animator anim = 92 ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); 93 94 // make the view visible and start the animation 95 myView.setVisibility(View.VISIBLE); 96 anim.start(); 97 </pre> 98 99 <p></p> 100 101 <pre> 102 // previously visible view 103 final View myView = findViewById(R.id.my_view); 104 105 // get the center for the clipping circle 106 int cx = (myView.getLeft() + myView.getRight()) / 2; 107 int cy = (myView.getTop() + myView.getBottom()) / 2; 108 109 // get the initial radius for the clipping circle 110 int initialRadius = myView.getWidth(); 111 112 // create the animation (the final radius is zero) 113 Animator anim = 114 ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0); 115 116 // make the view invisible when the animation is done 117 anim.addListener(new AnimatorListenerAdapter() { 118 @Override 119 public void onAnimationEnd(Animator animation) { 120 super.onAnimationEnd(animation); 121 myView.setVisibility(View.INVISIBLE); 122 } 123 }); 124 125 // start the animation 126 anim.start(); 127 </pre> 128 129 130 <h2 id="Transitions"></h2> 131 132 <!-- shared transition video --> 133 <div style="width:290px;margin-left:35px;float:right"> 134 <div class="framed-nexus5-port-span-5"> 135 <video class="play-on-hover" autoplay=""> 136 <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"> 137 <source src="{@docRoot}design/material/videos/ContactsAnim.webm"> 138 <source src="{@docRoot}design/material/videos/ContactsAnim.ogv"> 139 </video> 140 </div> 141 <div style="font-size:10pt;margin-left:20px;margin-bottom:30px"> 142 <p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong> 1</strong> - 143 </p> 144 <em></em> 145 </div> 146 </div> 147 148 <p> 149 150 </p> 151 152 <ul> 153 <li><strong></strong><em></em> 154 155 </li> 156 157 <li><strong></strong><em></em> 158 159 </li> 160 161 <li><strong></strong> 162 changeImageTransform<em></em> 163 164 </li> 165 </ul> 166 167 <p>Android 5.0 (API 21) </p> 168 169 <ul> 170 <li><em></em> - </li> 171 <li><em></em> - </li> 172 <li><em></em> - </li> 173 </ul> 174 175 <p> {@link android.transition.Visibility} 176 {@link android.transition.Transition} API 177 </p> 178 179 <p>Android 5.0 (API 21) </p> 180 181 <ul> 182 <li>changeBounds<em></em> - </li> 183 <li>changeClipBounds<em></em> - </li> 184 <li>changeTransform<em></em> - </li> 185 <li><em>changeImageTransform</em> - </li> 186 </ul> 187 188 <p> 189 </p> 190 191 <img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" /> 192 <p class="img-caption"> 193 <strong> 2</strong> - 194 </p> 195 196 <h3></h3> 197 198 <p> <code>android:windowContentTransitions</code> 199 200 </p> 201 202 <pre> 203 <style name="BaseAppTheme" parent="android:Theme.Material"> 204 <!-- enable window content transitions --> 205 <item name="android:windowContentTransitions">true</item> 206 207 <!-- specify enter and exit transitions --> 208 <item name="android:windowEnterTransition">@transition/explode</item> 209 <item name="android:windowExitTransition">@transition/explode</item> 210 211 <!-- specify shared element transitions --> 212 <item name="android:windowSharedElementEnterTransition"> 213 @transition/change_image_transform</item> 214 <item name="android:windowSharedElementExitTransition"> 215 @transition/change_image_transform</item> 216 </style> 217 </pre> 218 219 <p> <code>change_image_transform</code> </p> 220 221 <pre> 222 <!-- res/transition/change_image_transform.xml --> 223 <!-- (see also Shared Transitions below) --> 224 <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> 225 <changeImageTransform/> 226 </transitionSet> 227 </pre> 228 229 <p><code>changeImageTransform</code> {@link android.transition.ChangeImageTransform} 230 {@link android.transition.Transition} API 231 </p> 232 233 <p> {@link android.view.Window#requestFeature Window.requestFeature()} 234 </p> 235 236 <pre> 237 // inside your activity (if you did not enable transitions in your theme) 238 getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); 239 240 // set an exit transition 241 getWindow().setExitTransition(new Explode()); 242 </pre> 243 244 <p> {@link 245 android.transition.Transition} </p> 246 247 <ul> 248 <li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li> 249 <li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li> 250 <li>{@link android.view.Window#setSharedElementEnterTransition 251 Window.setSharedElementEnterTransition()}</li> 252 <li>{@link android.view.Window#setSharedElementExitTransition 253 Window.setSharedElementExitTransition()}</li> 254 </ul> 255 256 <p>{@link android.view.Window#setExitTransition setExitTransition()} {@link 257 android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} 258 {@link android.view.Window#setEnterTransition 259 setEnterTransition()} {@link android.view.Window#setSharedElementEnterTransition 260 setSharedElementEnterTransition()} </p> 261 262 <p> 263 () 264 </p> 265 266 <p> {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} 267 268 </p> 269 270 <h3></h3> 271 272 <p> 273 </p> 274 275 <pre> 276 startActivity(intent, 277 ActivityOptions.makeSceneTransitionAnimation(this).toBundle()); 278 </pre> 279 280 <p> 281 <code>null</code> 282 </p> 283 284 <h3></h3> 285 286 <p></p> 287 288 <ol> 289 <li></li> 290 <li></li> 291 <li> XML </li> 292 <li> <code>android:transitionName</code> 293 </li> 294 <li> {@link android.app.ActivityOptions#makeSceneTransitionAnimation 295 ActivityOptions.makeSceneTransitionAnimation()} </li> 296 </ol> 297 298 <pre> 299 // get the element that receives the click event 300 final View imgContainerView = findViewById(R.id.img_container); 301 302 // get the common element for the transition in this activity 303 final View androidRobotView = findViewById(R.id.image_small); 304 305 // define a click listener 306 imgContainerView.setOnClickListener(new View.OnClickListener() { 307 @Override 308 public void onClick(View view) { 309 Intent intent = new Intent(this, Activity2.class); 310 // create the transition animation - the images in the layouts 311 // of both activities are defined with android:transitionName="robot" 312 ActivityOptions options = ActivityOptions 313 .makeSceneTransitionAnimation(this, androidRobotView, "robot"); 314 // start the new activity 315 startActivity(intent, options.toBundle()); 316 } 317 }); 318 </pre> 319 320 <p> {@link android.view.View#setTransitionName View.setTransitionName()} 321 322 </p> 323 324 <p> {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} {@link android.app.Activity#finish Activity.finish()} 325 326 </p> 327 328 <h3></h3> 329 330 <p> <code>android:transitionName</code> ( {@link android.view.View#setTransitionName View.setTransitionName()} ) {@link android.app.ActivityOptions} 331 332 333 </p> 334 335 <pre> 336 ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, 337 Pair.create(view1, "agreedName1"), 338 Pair.create(view2, "agreedName2")); 339 </pre> 340 341 342 <h2 id="CurvedMotion"></h2> 343 344 <p> 345 Android 5.0 (API 21) 346 </p> 347 348 <p>{@link android.view.animation.PathInterpolator} (Bzier curve) {@link android.graphics.Path} 349 1x1 (0,0) (1,1) 350 351 XML </p> 352 353 <pre> 354 <pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" 355 android:controlX1="0.4" 356 android:controlY1="0" 357 android:controlX2="1" 358 android:controlY2="1"/> 359 </pre> 360 361 <p> XML 362 </p> 363 364 <ul> 365 <li><code>@interpolator/fast_out_linear_in.xml</code></li> 366 <li><code>@interpolator/fast_out_slow_in.xml</code></li> 367 <li><code>@interpolator/linear_out_slow_in.xml</code></li> 368 </ul> 369 370 <p> {@link android.view.animation.PathInterpolator} {@link 371 android.animation.Animator#setInterpolator Animator.setInterpolator()} </p> 372 373 <p>{@link android.animation.ObjectAnimator} 374 {@link android.graphics.Path} X Y 375 </p> 376 377 <pre> 378 ObjectAnimator mAnimator; 379 mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path); 380 ... 381 mAnimator.start(); 382 </pre> 383 384 385 <h2 id="ViewState"></h2> 386 387 <p>{@link android.animation.StateListAnimator} 388 {@link 389 android.animation.StateListAnimator} XML </p> 390 391 <pre> 392 <!-- animate the translationZ property of a view when pressed --> 393 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 394 <item android:state_pressed="true"> 395 <set> 396 <objectAnimator android:propertyName="translationZ" 397 android:duration="@android:integer/config_shortAnimTime" 398 android:valueTo="2dp" 399 android:valueType="floatType"/> 400 <!-- you could have other objectAnimator elements 401 here for "x" and "y", or other properties --> 402 </set> 403 </item> 404 <item android:state_enabled="true" 405 android:state_pressed="false" 406 android:state_focused="true"> 407 <set> 408 <objectAnimator android:propertyName="translationZ" 409 android:duration="100" 410 android:valueTo="0" 411 android:valueType="floatType"/> 412 </set> 413 </item> 414 </selector> 415 </pre> 416 417 <p> XML <code>selector</code> <code>android:stateListAnimator</code> 418 419 {@link android.animation.AnimatorInflater#loadStateListAnimator 420 AnimationInflater.loadStateListAnimator()} {@link android.view.View#setStateListAnimator View.setStateListAnimator()} 421 422 </p> 423 424 <p> Z <code>android:stateListAnimator</code> <code>@null</code> 425 426 </p> 427 428 <p>{@link android.graphics.drawable.AnimatedStateListDrawable} 429 Android 5.0 430 {@link android.graphics.drawable.AnimatedStateListDrawable} XML 431 </p> 432 433 <pre> 434 <!-- res/drawable/myanimstatedrawable.xml --> 435 <animated-selector 436 xmlns:android="http://schemas.android.com/apk/res/android"> 437 438 <!-- provide a different drawable for each state--> 439 <item android:id="@+id/pressed" android:drawable="@drawable/drawableP" 440 android:state_pressed="true"/> 441 <item android:id="@+id/focused" android:drawable="@drawable/drawableF" 442 android:state_focused="true"/> 443 <item android:id="@id/default" 444 android:drawable="@drawable/drawableD"/> 445 446 <!-- specify a transition --> 447 <transition android:fromId="@+id/default" android:toId="@+id/pressed"> 448 <animation-list> 449 <item android:duration="15" android:drawable="@drawable/dt1"/> 450 <item android:duration="15" android:drawable="@drawable/dt2"/> 451 ... 452 </animation-list> 453 </transition> 454 ... 455 </animated-selector> 456 </pre> 457 458 459 <h2 id="AnimVector"></h2> 460 461 <p><a href="{@docRoot}training/material/drawables.html#VectorDrawables"></a> 462 {@link android.graphics.drawable.AnimatedVectorDrawable} 463 </p> 464 465 <p> XML </p> 466 467 <ul> 468 <li> <code>res/drawable/</code> <code><vector></code> 469 </li> 470 <li> <code>res/drawable/</code> <code><animated-vector></code> 471 </li> 472 <li> <code>res/anim/</code> <code><objectAnimator></code> 473 </li> 474 </ul> 475 476 <p> <code><group></code> <code><path></code> 477 <code><group></code> <code><path></code> 478 </p> 479 480 <p> <code>android:name</code> 481 482 </p> 483 484 <pre> 485 <!-- res/drawable/vectordrawable.xml --> 486 <vector xmlns:android="http://schemas.android.com/apk/res/android" 487 android:height="64dp" 488 android:width="64dp" 489 android:viewportHeight="600" 490 android:viewportWidth="600"> 491 <group 492 <strong>android:name="rotationGroup"</strong> 493 android:pivotX="300.0" 494 android:pivotY="300.0" 495 android:rotation="45.0" > 496 <path 497 <strong>android:name="v"</strong> 498 android:fillColor="#000000" 499 android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> 500 </group> 501 </vector> 502 </pre> 503 504 <p> 505 </p> 506 507 <pre> 508 <!-- res/drawable/animvectordrawable.xml --> 509 <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" 510 android:drawable="@drawable/vectordrawable" > 511 <target 512 android:name="rotationGroup" 513 android:animation="@anim/rotation" /> 514 <target 515 android:name="v" 516 android:animation="@anim/path_morph" /> 517 </animated-vector> 518 </pre> 519 520 <p> {@link android.animation.ObjectAnimator} {@link 521 android.animation.AnimatorSet} 360 522 </p> 523 524 <pre> 525 <!-- res/anim/rotation.xml --> 526 <objectAnimator 527 android:duration="6000" 528 android:propertyName="rotation" 529 android:valueFrom="0" 530 android:valueTo="360" /> 531 </pre> 532 533 <p> 534 535 </p> 536 537 <pre> 538 <!-- res/anim/path_morph.xml --> 539 <set xmlns:android="http://schemas.android.com/apk/res/android"> 540 <objectAnimator 541 android:duration="3000" 542 android:propertyName="pathData" 543 android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" 544 android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" 545 android:valueType="pathType" /> 546 </set> 547 </pre> 548 549 <p> {@link 550 android.graphics.drawable.AnimatedVectorDrawable} API </p> 551
