Android Transitions

Android Transitions

A tour of the Transitions framework in Android

108056ccba92f98fdbbabad534537573?s=128

Bryan Herbst

February 06, 2016
Tweet

Transcript

  1. Transitions Bryan Herbst Android Engineer @ Target

  2. Abrupt transitions are jarring

  3. Smooth transitions provide continuity

  4. Smooth transitions keep users engaged

  5. Smooth transitions delight users

  6. “In the world of material design, motion describes spatial relationships,

    functionality, and intention with beauty and fluidity.”
  7. Android Transitions  Activity to Activity  Fragment to Fragment

     Scene to Scene (Views)
  8. Hold on…  Requires API 21

  9. Hold on…   Progressive enhancement, graceful degradation

  10. Hold on…    Support APIs offer default behavior

    on older versions
  11. Scenes Snapshot of a ViewGroup

  12. Scene transition TransitionManager.beginDelayedTransition(rootView, new Fade()); button.setVisibility(View.INVISIBLE);

  13. What is this black magic?

  14. How it works 1. beginDelayedTransition() => Take a snapshot of

    ViewGroup 2. Update Views 3. On next layout pass, Android takes another snapshot and creates animations
  15. How it works 1. beginDelayedTransition() => Take a snapshot of

    ViewGroup
  16. How it works 1. beginDelayedTransition() => Take a snapshot of

    ViewGroup 2. Update Views
  17. Transition types  Fade  Explode  Slide  ChangeBounds

     AutoTransition  Fade  Move  Resize
  18. What about property animation? ObjectAnimator.ofFloat(button, "alpha", 1f, 0f) .start();

  19. What about property animation? button.animate().alpha(0f);

  20. What about property animation? Fine if you want to think

    about Views individually
  21. What about property animation? Fine if you want to think

    about Views individually Scenes allow us to think in groups
  22. Activities With shared elements

  23. Activity Transitions- setup  Request Window.FEATURE_ACTIVITY_TRANSITIONS and Window.FEATURE_CONTENT_TRANSITIONS in both

    Activities
  24. Activity Transitions- setup   Set a transition name on

    the View in both Activities
  25. What are these transition names? An ID for the transition

    framework
  26. Rule #1 All animating Views must have a transition name

  27. Rule #2 All transition names must be unique within a

    layout
  28. Not a rule #1 Transition names don’t need to match

    between layouts
  29. Activity Transitions- setup  Create a Bundle with ActivityOptions .makeSceneTransitionAnimation(activity,

    sharedView, viewTransitionName) .toBundle();
  30. Activity Transitions- setup   Set your Transitions

  31. Activity Transitions- setup    Call startActivity(intent, transitionBundle);

  32. Specifying shared elements makeSceneTransitionAnimation(activity, sharedView, transitionName); We specify pairs of

    Views and transition names.
  33. Specifying shared elements makeSceneTransitionAnimation(activity, sharedView, transitionName); We specify pairs of

    Views and transition names. The sharedView is the original view in our current layout (the starting state)
  34. Specifying shared elements makeSceneTransitionAnimation(activity, sharedView, transitionName); We specify pairs of

    Views and transition names. The sharedView is the original view in our current layout (the starting state) The viewTransitionName is the name of the corresponding view in the new layout (the ending state)
  35. Activity transitions magic Captures Views in first Activity, then second

    Activity
  36. Activity Transitions use the Window e.g. getWindow().setEnterTransition(new Fade());

  37. Four transition types  Enter  Exit  Reenter 

    Return
  38. Four transition types  Enter

  39. Four transition types  Exit

  40. Four transition types  Reenter

  41. Four transition types  Return

  42. Four transition types x2 with Shared elements

  43. Or not Stick with enter and return for shared elements

  44. Shared exit and reenter Allow for animation before the transition

  45. Sample  Exit, shared enter, enter

  46. Sample  Reenter, shared return, return

  47. A note on timing Because sometimes Views don’t exist right

    away
  48. Delayed transitions  postponeEnterTransition();  startPostponedEnterTransition();

  49. WARNING!  Blocks transition

  50. WARNING!  Blocks transition 

  51. WARNING!    Prefetch or find clever alternatives

  52. Fragment example

  53. Transition setup setExitTransition(new Fade()); Fade out non-shared elements

  54. Transition setup newFrag.setSharedElementEnterTransition(new AutoTransition()); AutoTransition shared elements

  55. Transition setup newFrag.setEnterTransition(new Fade()); Fade in non-shared elements

  56. Making the transition fragmentManager.beginTransaction() .replace(R.id.container, newFrag) .addSharedElement(sharedView, "transitionName") .commit();

  57. What about delayed transitions?  Ugh. It isn’t good in

    Fragments.
  58. I didn’t want to animate that!

  59. Targets- includes <fade> <targets> <target android:includeId="@id/fancyWidget"/> <target android:includeClass=“com.example.FancyWidget"/> <target android:includeName=“fancyWidget"/>

    </targets> </fade>
  60. Targets- excludes <fade> <targets> <target android:excludeId="@id/toolbar"/> <target android:excludeClass=“android.support.v7.widget.Toolbar"/> <target android:excludeName="toolbar"/>

    </targets> </fade>
  61. Support for <21

  62. Support for <21 ActivityOptions => ActivityOptionsCompat .makeSceneTransitionAnimation(activity, view, name)

  63. Support for <21 startActivity(intent, transitionBundle); Has existed since API 16!

  64. Support for <21 Transition names  android:transitionName="name" is ignored on

    older versions  ViewCompat.setTransitionName(view, “name);
  65. Support for <21 Delaying transitions  supportPostponeEnterTransition();  supportStartPostponedEnterTransition();

  66. Support for <21 Specifying transitions The only place we need

    a version check if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getWindow().setEnterTransition(new Fade()); }