Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android Transitions

Bryan Herbst
February 06, 2016

Android Transitions

A tour of the Transitions framework in Android

Bryan Herbst

February 06, 2016
Tweet

More Decks by Bryan Herbst

Other Decks in Programming

Transcript

  1. Transitions
    Bryan Herbst
    Android Engineer @ Target

    View full-size slide

  2. Abrupt transitions are jarring

    View full-size slide

  3. Smooth transitions provide
    continuity

    View full-size slide

  4. Smooth transitions keep users
    engaged

    View full-size slide

  5. Smooth transitions delight users

    View full-size slide

  6. “In the world of material design,
    motion describes spatial
    relationships, functionality, and
    intention with beauty and fluidity.”

    View full-size slide

  7. Android Transitions
     Activity to Activity
     Fragment to Fragment
     Scene to Scene (Views)

    View full-size slide

  8. Hold on…
     Requires API 21

    View full-size slide

  9. Hold on…

     Progressive enhancement, graceful degradation

    View full-size slide

  10. Hold on…


     Support APIs offer default behavior on older versions

    View full-size slide

  11. Scenes
    Snapshot of a ViewGroup

    View full-size slide

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

    View full-size slide

  13. What is this black magic?

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Transition types
     Fade
     Explode
     Slide
     ChangeBounds
     AutoTransition
     Fade
     Move
     Resize

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. What about property animation?
    Fine if you want to think about Views individually
    Scenes allow us to think in groups

    View full-size slide

  22. Activities
    With shared elements

    View full-size slide

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

    View full-size slide

  24. Activity Transitions- setup

     Set a transition name on the View in both Activities

    View full-size slide

  25. What are these transition names?
    An ID for the transition framework

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. Activity Transitions- setup
     Create a Bundle with
    ActivityOptions
    .makeSceneTransitionAnimation(activity, sharedView, viewTransitionName)
    .toBundle();

    View full-size slide

  30. Activity Transitions- setup

     Set your Transitions

    View full-size slide

  31. Activity Transitions- setup


     Call startActivity(intent, transitionBundle);

    View full-size slide

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

    View full-size slide

  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)

    View full-size slide

  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)

    View full-size slide

  35. Activity transitions magic
    Captures Views in first Activity, then second Activity

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Four transition types
     Enter

    View full-size slide

  39. Four transition types
     Exit

    View full-size slide

  40. Four transition types
     Reenter

    View full-size slide

  41. Four transition types
     Return

    View full-size slide

  42. Four transition types
    x2 with Shared elements

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. Sample
     Exit, shared enter, enter

    View full-size slide

  46. Sample
     Reenter, shared return, return

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. WARNING!
     Blocks transition

    View full-size slide

  50. WARNING!
     Blocks transition

    View full-size slide

  51. WARNING!


     Prefetch or find clever alternatives

    View full-size slide

  52. Fragment example

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. I didn’t want to animate that!

    View full-size slide

  59. Targets- includes







    View full-size slide

  60. Targets- excludes







    View full-size slide

  61. Support for <21

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  64. Support for <21
    Transition names
     android:transitionName="name" is ignored on older versions
     ViewCompat.setTransitionName(view, “name);

    View full-size slide

  65. Support for <21
    Delaying transitions
     supportPostponeEnterTransition();
     supportStartPostponedEnterTransition();

    View full-size slide

  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());
    }

    View full-size slide