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 Slide

  2. Abrupt transitions are jarring

    View Slide

  3. Smooth transitions provide
    continuity

    View Slide

  4. Smooth transitions keep users
    engaged

    View Slide

  5. Smooth transitions delight users

    View Slide

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

    View Slide

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

    View Slide

  8. Hold on…
     Requires API 21

    View Slide

  9. Hold on…

     Progressive enhancement, graceful degradation

    View Slide

  10. Hold on…


     Support APIs offer default behavior on older versions

    View Slide

  11. Scenes
    Snapshot of a ViewGroup

    View Slide

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

    View Slide

  13. What is this black magic?

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. Activities
    With shared elements

    View Slide

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

    View Slide

  24. Activity Transitions- setup

     Set a transition name on the View in both Activities

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. Activity Transitions- setup

     Set your Transitions

    View Slide

  31. Activity Transitions- setup


     Call startActivity(intent, transitionBundle);

    View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. Four transition types
     Enter

    View Slide

  39. Four transition types
     Exit

    View Slide

  40. Four transition types
     Reenter

    View Slide

  41. Four transition types
     Return

    View Slide

  42. Four transition types
    x2 with Shared elements

    View Slide

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

    View Slide

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

    View Slide

  45. Sample
     Exit, shared enter, enter

    View Slide

  46. Sample
     Reenter, shared return, return

    View Slide

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

    View Slide

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

    View Slide

  49. WARNING!
     Blocks transition

    View Slide

  50. WARNING!
     Blocks transition

    View Slide

  51. WARNING!


     Prefetch or find clever alternatives

    View Slide

  52. Fragment example

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. I didn’t want to animate that!

    View Slide

  59. Targets- includes







    View Slide

  60. Targets- excludes







    View Slide

  61. Support for <21

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide